Carregar imagem com js

[Will Up]

Criei uma galeria de imagens com PHP e quando alguém clica em uma miniatura, abre uma lightbox (bem simples, com poucas linhas de js, css e umas divs) com a imagem ampliada. Até aí tudo bem, funciona perfeitamente, o problema é o tempo de carregamento da página, todas as imagens precisam carregar.

Gostaria que as imagens grandes carregassem somente quando abro a lightbox (quando a div é exibida). Como faço?

[SK15]

Mas qual lighbox está usando?

Usa o 'oficial' com JQyery ele usa Ajax para carregar as imagens ou seja quando clica ele carrega a imagem e não sobrecarrega ...

http://www.huddletogether.com/projects/lightbox2/

Outra pergunta no PHP você está gerando as thumbs (imagens em miniaturas) dessa galeria pois se colocar as imagens grandes para carregar não há lightbox que de jeito porém depois que tudo tiver carregado ele tente a abrir mais rápido os lightbox

[Will Up]

Essa é a lightbox. Preciso usar ela, pois é mais fácil de adaptar e não entendo nada de jquery.

Js:

<script type="text/javascript">
$(document).ready(function() {  
        $('a[name=modal]').click(function(e) {
                e.preventDefault();
                var id = $(this).attr('href');
                var maskHeight = $(document).height();
                var maskWidth = $(window).width();
                $('#mask').css({'width':maskWidth,'height':maskHeight});
                $('#mask').fadeIn(1000);        
                $('#mask').fadeTo("slow",0.8);  

                //Get the window height and width
                var winH = $(window).height();
                var winW = $(window).width();
                $(id).css('top',  winH/2-$(id).height()/2);
                $(id).css('left', winW/2-$(id).width()/2);
                $(id).fadeIn(2000); 
        });
        $('.window .close').click(function (e) {
                e.preventDefault();
                $('#mask').hide();
                $('.window').hide();
        });     
        $('#mask').click(function () {
                $(this).hide();
                $('.window').hide();
        });                     
});
</script>

Link:

<a href="#exibe" name="modal">Abre lightbox</a>

Lightbox:

<div id="boxes">
<div id="exibe" class="window">

Conteúdo lightbox

</div>
  <div id="mask"></div>
</div>