jqueryajaxlightboxreloadzooming

lightbox plus reload after loading content ajax


http://serennz.sakura.ne.jp/toybox/lightbox/

How to get the script to work on new elements loaded by ajax?

This code works, but after loading does not work zooming. ;/

var lightbox = new Lightbox({
        loadingimg:'resource/loading.gif',
        expandimg:'resource/expand.gif',
        shrinkimg:'resource/shrink.gif',
        blankimg:'resource/blank.gif',
        previmg:'resource/prev.gif',
        nextimg:'resource/next.gif',
        closeimg:'resource/close.gif',
        /*effectimg:'resource/zzoop.gif',*/
        effectpos:{x:-40,y:-20},
        effectclass:'effectable',
        resizable:true,
        animation:true
});

Solution

  • Let's say your Ajax is working fine and you successfully get some html data. It will be like this:

    $.get('ajax/more_pictures.html', function(data) {
      displayNewImages(data);
    });
    

    Now you add your new images into some container , and give them "lightbox" attributes:

    function displayNewImages(images){
      $("#images_container").html(images);
      $("#images_container").find("a").attr("rel" , "lightbox").addClass("effectable");
    }
    

    And after all this create Lightbox instance :

    var lightbox = new Lightbox({ 
      // all the rest
    });
    

    That's it , simply adding rel="lightbox" and class="effectable" attributes to a element that wrapping image , and you're done!