Using .load () to fill div images with a convenient slider 1.7

Question

So, I'm trying to fill the slide show div with images from an external html file, but the problem is that the new images are really extracted using .load (), but the light slider does not see new images and just displays empty, although there are new ones in the div links to images.

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 a slide show of a slider

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>

, divs newslideshows, div slideshow1.html slideshow2.html, - . , - , - , - ?

.

Answer 1

, . , , . ( , )

URL- 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>

URL- href -:

//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
          });
        });
    });

Answer 2

: easySlider v 1.7

, .

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

    //clear out slider 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