Question

I’m trying to get smoothdivscroll working with lightbox plugin when loading content through ajax, but my efforts were in vain so far. Thats why I’m asking you for some help on this.

Here is the link to my test page: http://cablemodem.fibertel.com.ar/gustavolauro/

And bellow the code,

<script type="text/javascript">
    $(document).ready(function () {
        $("#makeMeScrollable").smoothDivScroll({
        });
        $("#item-100").click(function(){
            $("#makeMeScrollable").smoothDivScroll("getAjaxContent", "retratos.html", "replace");
        });
        $("#item-101").click(function(){
            $("#makeMeScrollable").smoothDivScroll("getAjaxContent", "artistico.html", "replace");
        });
        $('a[rel*=lightbox]').lightBox();   
    });
</script>

I’m using smoothdivscroll smoothdivscroll.com and lightbox http://leandrovieira.com/projects/jquery/lightbox/

The issue is that the ajax loaded content is not working with lightbox, I believe that this is because the selector a[rel*=lightbox] cannot find the recent loaded content but I was unable to solve the issue even when I tried lots of things.

Hope you can help,
Thanks in advance.

Answer 1

Firebug is your friend – learn to love it.

Now when you ajax load, you have to make sure that you bind all of the new content as it was not on the page originally when you tried to bind the anchor tags with the lightbox

something like:

 <script type="text/javascript">
        $(document).ready(function () {
            $("#makeMeScrollable").smoothDivScroll({
                        addedAjaxContent : function(){
                           $("#makeMeScrollable").find('a[rel*=lightbox]').lightBox();
                        }
            });
            $("#item-100").click(function(){
                $("#makeMeScrollable").smoothDivScroll("getAjaxContent", "retratos.html", "replace");

            });
            $("#item-101").click(function(){
                $("#makeMeScrollable").smoothDivScroll("getAjaxContent", "artistico.html", "replace");
            });
            $('a[rel*=lightbox]').lightBox();   
        });
    </script>