Jump to content
Fórum Script Brasil
  • 0

Carregar imagem com js


Will Up

Question

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?

Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0

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

Link to post
Share on other sites
  • 0

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>

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      148884
    • Total Posts
      644940
×
×
  • Create New...