Using .load() To Populate Div With Images For Easy Slider1.7

So I am trying to populate the slideshow div with images from a external html file but the problem seems to be that the new images do get pulled okay with .load() but the easy slid

Solution 1:

You need to use the complete function on load and inside it call the function to set easy slider. I am guessing that you are calling easy slider before the images are finished loading. (hard to say with the limited code you posted)

New markup using a class of slideShow and defining the URL in the href.

<divid="newslideshows"><ahref="slideshow1.html"class="slideShow"><imgsrc="image1.jpg" /></a><ahref="slideshow2.html"class="slideShow"><imgsrc="image2.jpg" /></a></div>

Now setting the selector as the slideShow class and taking the URL from the href and using it to load the new slide show:

//you could also use $('#newslideshows a').click(function(evt){
$('.slideShow').click(function(evt){
        //prevent the derault click event
        evt.preventDefault();
        //get the url from the link clickedvar actionUrl = $(this).attr('href');
        //clear existing ul
        $('#slider ul').remove();
        //call new slideshow
        $('#slider').load(actionUrl), function() {
          //call easy slider here
          $('#slider').easySlider({
          auto: true,
          controlsFade: true,
          pause: 3000,
          continuous: false,
          numeric: true
          });
        });
    });

Solution 2:

UPDATED: easySlider v 1.7

You need your click functions to look like this.

$('#show1').click(function(){

    //clear out slider's html (the ul)//and remove the controls
    $('#slider ul', '#controls').remove();

    //replace slide show html
    $('#slider').load('slideshow1.html'), function() {

      //re-generate controls
      $('#slider').easySlider({
        auto: true,
        controlsFade: true,
        pause: 3000,
        continuous: false,
        numeric: true
      });//easySlider

    });//load success

});//click function