Question

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 slider fails to see the new images and just displays blank even though in the div, there are new image links.

In my html, I have this,

<script type="text/javascript" charset="utf-8">

    $(document).ready(function(){   
    $("#slider").easySlider({
    auto: true, 
    controlsFade: true,
    pause: 3000,
    continuous: false,
    numeric: true
    });
    }); 
    //]]>
    </script>

    <div id="newslideshows">
    <a href="#" id="show1"><img src="image1.jpg" /></a>
    <a href="#" id="show2"><img src="image2.jpg" /></a>
    </div>

        <div id="slider"> 
        <ul>
        <li><a href="#"><img src="1.jpg" /></a></li>
        <li><a href="#"><img src="2.jpg" /></a></li>
        </ul>
    </div>

slide is where the easy slider’s slideshow is

in my src’d js file, I have this

$(document).ready(function(){
    $('#show1').click(function(){
      $('#slider').load('slideshow1.html');
    });

    $('#show2').click(function(){
      $('#slider').load('slideshow2.html');
    });
});

and in my slideshow1.html and slideshow2.html, I have something like this.

<ul>
<li><a href="#"><img src="14.jpg" /></a></li>
<li><a href="#"><img src="15.jpg" /></a></li>
<li><a href="#"><img src="16.jpg" /></a></li>
</ul>

So once I hit those image links in the newslideshows div, the slider div gets populated with the images from slideshow1.html and slideshow2.html but the slideshow starts displaying blanks. I am guessing it’s due to the easy slider function not being restarted or something in that nature, can anybody think of a possible solution for this?

Thanks.

Answer 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.

<div id="newslideshows">
    <a href="slideshow1.html" class="slideShow"><img src="image1.jpg" /></a>
    <a href="slideshow2.html" class="slideShow"><img src="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 clicked
        var 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
          });
        });
    });