Question

i have some issue regarding LightBox for images

issue is when i load images from external php file it is not showing the images in lightbox.

    <script type="text/javascript">
    $(document).ready(function(){   
    //Display Loading Image
    function Display_Load()
    {
        $("#loading").fadeIn(900,0);
        $("#loading").html("<img src='../images/lightbox-ico-loading.gif' />");
    }
    //Hide Loading Image
    function Hide_Load()
    {
        $("#loading").fadeOut('slow');
    };

   //Default Starting Page Results

    Display_Load();

    $("#content").load("images.php?page=1&uid=28", Hide_Load(), lightBox());

    //Pagination Click
    $("#pagination li").click(function(){

        Display_Load();

        //Loading Data
        var pageNum = this.id;
        var uid = 1;
        uid = "<?php echo $id; ?>";
        $("#content").load("images.php?page=" + pageNum + "&uid=" + uid, Hide_Load());
    });


});
    </script>

it loads all the images in below box but does not have any lightbox effect.

<center><div id="loading" ></div>
                            <div id="content"></div>
            </center>

normally to display images in lightbox we will do something like below and it is working fine at all other places then only above code is having problem.

    <script type="text/javascript">
$(function() {
    $('#gallery a').lightBox();
});
</script>

can any one please share some tips about it.

thank you advance.

Answer 1

Try this: http://docs.jquery.com/Plugins/livequery

With this plugin you could do something like this:

$('#gallery a').livequery(function() { $(this).lightBox() });

That way, .lightBox() would be applied to selectors added after initial page load.