Load Slider on ajax loaded content

Question

the slider i'm using is this one : http://www.stunicholls.com/gallery/jquery-slide-anything.html

It works ok on a normal html, but when I put it to load over an ajax loaded content it doesn't work anymore, how can I fix it?

This is the js of the slider:

    $(window).load(function(){
    /* just one variable to set-up */

    speed = 600;
    tabColor = '#069';
    tabCurrent = '#09c';

    /* setting the initial state of the slideshow and first image */
    var picVar = $('.iStu12 li.images div.slide div.slidePanel');
    totPic = picVar.length;
    curPicWidth = picVar.eq(0).width();
    curPicHeight = 480;
    totWidth = 0;

    /* calculate the total width of the images and set the div.slide to match */
    $.each((picVar), function() {
    caption=$(this).attr('caption');
    $('.iStu12 li.caption').append('<b>'+caption+'</b>');
    totWidth = totWidth+$(this).width();
    });
    $('ul.iStu12 li.images div.slide').width(totWidth);

    current=0;
    var captionVar = $('.iStu12 li.caption b');
    tabSet ()

    /* resize the containing elements, left/right arrow positions and add the first image caption */
    resize(curPicWidth,curPicHeight)


    /* monitor 'next' clicks */
    $('.iStu12 li.next').click (function() {
        picVar = $('.iStu12 li.images div.slide div.slidePanel');

        /* animate the line of images left one photo - then remove the first image from set, make it the last image then finally move the set to absolute position left:0 */
        curPicWidth = picVar.eq(0).width();
        curPicHeight = 480;
        $('ul.iStu12 li.images div.slide').animate({left:-curPicWidth}, speed, 
            function() {
            $('ul.iStu12 li.images div.slide').find('div.slidePanel:first').remove().appendTo('ul.iStu12 li.images div.slide');
            $('ul.iStu12 li.images div.slide').css('left','0px'); 
        });
        /* get the width, height and alt for the currently displayed image */
        curPicWidth = picVar.eq(1).width();
        curPicHeight = 480;
        /* animate the containing elements and left/right arrow positions to match the current image */
        resize(curPicWidth,curPicHeight)
        current++
        if(current==totPic) {current=0;}
        tabSet ()

    });

    /* monitor 'previous' clicks */
    $('.iStu12 li.prev').click (function() {
        /*  get the last image from the set and make it the fist image, then set the left position of the set to minus the width of the new first image */
        $('ul.iStu12 li.images div.slide').find('div.slidePanel:last').remove().prependTo('ul.iStu12 li.images div.slide');
        picVar = $('.iStu12 li.images div.slide div.slidePanel');

        curPicWidth = picVar.eq(0).width();
        curPicHeight = 480;

        $('ul.iStu12 li.images div.slide').css('left',-curPicWidth); 
        /* animate the first image to left = 0 */
        $('ul.iStu12 li.images div.slide').animate({left:0}, speed);

        /* animate the containing elements, left/right arrow positions to match the current image and change the caption */
        resize(curPicWidth,curPicHeight)
        current--
        if(current==-1) {current=totPic-1;}
        tabSet ()

    });

    /* tab clicking routine */
    $('.iStu12 li.caption b').click (function() {
        clicked = $(this).index()
        /* if to the right of the current tab then slide left */
        if (clicked>current) {
            rotate=clicked-current;
            picVar = $('.iStu12 li.images div.slide div.slidePanel');
            curPicWidth = 0;

            for (var i=0; i<rotate; i++) {
                curPicWidth = curPicWidth+picVar.eq(i).width();
            }
            $('ul.iStu12 li.images div.slide').animate({left:-curPicWidth},{queue:false, duration:speed,  
                complete: function() {
                for (var n=0; n<rotate; n++) {
                $('ul.iStu12 li.images div.slide').find('div.slidePanel:first').remove().appendTo('ul.iStu12 li.images div.slide');
                $('ul.iStu12 li.images div.slide').css('left','0px'); 
                }}
            });

            /* get the width, height and alt for the currently displayed image */
            curPicWidth = picVar.eq(rotate).width();
            curPicHeight = picVar.eq(rotate).height();
            /* animate the containing elements and left/right arrow positions to match the current image */
            resize(curPicWidth,curPicHeight)
            current=clicked;
            tabSet ()
        }
        /* if to the left of the current tab then slide right */
        if (clicked<current) {
            rotate=current-clicked;
            picVar = $('.iStu12 li.images div.slide div.slidePanel');
            curPicWidth = 0;

            for (var i=0; i<rotate; i++) {
                curPicWidth = curPicWidth+picVar.eq(totPic-1).width();
                $('ul.iStu12 li.images div.slide').find('div.slidePanel:last').remove().prependTo('ul.iStu12 li.images div.slide');
            }

            $('ul.iStu12 li.images div.slide').css({left:-curPicWidth, 
                complete: function() {
                /* animate the first image to left = 0 */
                $('ul.iStu12 li.images div.slide').animate({left:0}, speed);
                }
            });
            /* get the width, height and alt for the currently displayed image */
            picVar = $('.iStu12 li.images div.slide div.slidePanel');
            curPicWidth = picVar.eq(0).width();
            curPicHeight = 480;
            /* animate the containing elements and left/right arrow positions to match the current image */
            resize(curPicWidth,curPicHeight)
            current=clicked;
            tabSet ()
        }
    });

    $('.iStu12 li.caption b').mouseover (function() {
        if ($(this).index()!==current) {
            $(this).css('background',tabCurrent);
        }
    }).mouseout(function(){
        if ($(this).index()!==current) {
            $(this).css('background',tabColor);
        }
    });


    function tabSet () {
        captionVar.css('background',tabColor);
        captionVar.eq(current).css('background',tabCurrent);
    }

    /* resize the containing elements, the left/right arrow positions and update the caption */
    function resize (w,h) {
        $('.iStu12').animate({width:w, height:h},speed);
        $('.iStu12 li.images').animate({width:w, height:h},speed);
    }

    });

i'm loading it this way:

    <script type="text/javascript" src="js/loader.js"></script>
    <script type="text/javascript" src="js/stu12.js"></script>

First the ajax content and then the js of the slider

this is the content of the loader.js:

$(document).ready(function(){

// load home when the page loads
$("#content").load("home.html", function(){
  $(this).fadeIn("slow");
});

// load artworks page
$("#artworks > a").click(function(){
    $("#content").hide();
    $("#content").load("artworks.html", function(){
        $(this).fadeIn("slow");
    });
});

    // load projects page
    $("#artworks ul li a").click(function(){
        $("#content").hide();
        $("#content").load("project.html", function(){
            $(this).fadeIn("slow");
        });
    });

    // load single project page         
    $("#project_page").live("click", function(){
        $("#content").hide();
        $("#content").load("project.html", function(){
            $(this).fadeIn("slow");
        });
    });

        // load single project page         
        $("#project_slider").live("click", function(){
            $("#content").hide();
            $("#content").load("project_inside.html", function(){
                $(this).fadeIn("slow");
            });
        });

        // back to projects page        
        $(".back").live("click", function(){
            $("#content").hide();
            $("#content").load("project.html", function(){
                $(this).fadeIn("slow");
            });
        }); 

// load prensa page
$("#prensa_nav").click(function(){
    $("#content").hide();
    $("#content").load("prensa.html", function(){
      $(this).fadeIn("slow");
    });
});

// load contacto page
$("#contacto_nav").click(function(){
    $("#content").hide();
    $("#content").load("contacto.html", function(){
      $(this).fadeIn("slow");
    });
}); 

// active menu item
$(function() {
    $('#menu li').click(function() {
        $('#menu li').each(function() {
            $(this).removeClass('active');
        });
        $(this).addClass('active');
    });
});


/* Menu dropdown */
$(document).ready(function($){

    // Add class of drop if item has sub-menu
    $('ul.submenu').closest('li').addClass('drop');

    // Left Sidebar Main Navigation
    var menu_ul = $('.menu > li.drop > ul'),
        menu_a  = $('.menu > li.drop > a');

    menu_ul.hide()    

    menu_a.click(function(e) {
        e.preventDefault();
        if(!$(this).hasClass('active')) {
            menu_a.removeClass('active');
            menu_ul.filter(':visible').slideUp('normal');
            $(this).addClass('active').next().stop(true,true).slideDown('normal');
        } else {
            $(this).removeClass('active');
            $(this).next().stop(true,true).slideUp('normal');
        }
    });

});
});

Answer 1

Looking at stu12.js , it is not designed to work with data that is loaded asynchronously into the various slidePanel divs.

To work around this, I would suggest that you load the JS after you have loaded the slidePanels into your HTML.

Looking at the code, I'm not sure where the slidePanels are loaded? In one of the dynamically loaded HTML files? You will have a problem where more than one HTML file has these sliding panels.

So, first remove this line from your HTML:

<script type="text/javascript" src="js/stu12.js"></script>

If the slidePanels are only in one HTML file, then add this for the relevant HTML load before the statement $(this).fadeIn("slow"); to load in the slider JavaScript dynamically:

   $.getScript("js/stu12.js")
      .done(function(script, textStatus) {
            console.log( textStatus );
      })
      .fail(function(jqxhr, settings, exception) {
           console.log( "Error loading stu12.js: " + exception);
   });

If you have these sliding panels in more than one HTML page being dynamically loaded, then I would recommend changing your JavaScript so that all the HTML pages are loaded dynamically at page load, but hidden in different divs that can then displayed with the different click functions.

You can then load the slider JavaScript once all the HTML pages are loaded with something like:

$('#content').ajaxStop(function() {
       $.getScript("js/stu12.js")
          .done(function(script, textStatus) {
                console.log( textStatus );
          })
          .fail(function(jqxhr, settings, exception) {
               console.log( "Error loading stu12.js: " + exception);
       });
});