使用 .load() 用图像填充 div 以方便使用 slider1.7

Question

所以我试图用外部 html 文件中的图像填充幻灯片 div，但问题似乎是新图像确实可以通过 .load() 拉取，但简单的滑块无法看到新图像，甚至只显示空白尽管在 div 中，有新的图像链接。

在我的html中，我有这个，

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

幻灯片是简单滑块的幻灯片

在我的src'd js文件中的位置，我有这个

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

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

，在我的slideshow1.html和slideshow2.html中，我有类似的东西。

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

因此，一旦我点击 newslideshows div 中的这些图像链接，滑块 div 就会填充来自 Slideshow1.html 和 Slideshow2.html 的图像，但幻灯片开始显示空白。我猜这是由于简单的滑块功能没有重新启动或类似的原因，有人能想到一个可能的解决方案吗？

谢谢。

Answer 1

您需要在加载时使用完整的函数，并在其中调用该函数来设置简单的滑块。我猜您在图像加载完成之前正在调用简单滑块。 （很难用您发布的有限代码来说明）

使用 SlideShow 类并在 href 中定义 URL 的新标记。

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

现在将选择器设置为 SlideShow 类并从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'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