使用.load（）为图像填充div以便轻松使用slider1.7 [英] Using .load() to populate div with images for easy slider1.7

问题描述

因此，我试图用外部html文件中的图像填充幻灯片div，但问题似乎是，新图像确实可以用.load（）方式拉动，但是易滑块无法看到新图像，只是

在我的html中，我有这个，

 < script type =text / javascriptcharset =utf-8> 
 $ b $（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是简单滑块的幻灯片显示位置

在我的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，但幻灯片显示开始显示空白。我猜这是因为简单的滑块功能没有重新启动，或者是这种性质，任何人都可以为此考虑一个可能的解决方案？

谢谢。

解决方案

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

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

 < div id =newslideshows> 
< a href =slideshow1.htmlclass =slideShow>< img src =image1.jpg/>< / a> 
< a href =slideshow2.htmlclass =slideShow>< img src =image2.jpg/>< / a> 
< / div> 
  

现在将选择器设置为slideShow类并从href获取URL并使用它加载新的幻灯片：

  //你也可以使用$（'＃newslideshows a'）。点击（function（evt）{
 $（'。slideShow'）。click（function（evt）{
 //防止derault点击事件
 evt.preventDefault（）; 
 //从链接获得链接点击
 var actionUrl = $（this）.attr（'href'）; 
 //清除现有的ul 
 $（'＃slider ul'） .remove（）; 
 //调用新幻灯片
 $（'＃slider'）。load（actionUrl），function（）{
 //在这里调用简单滑块
 $ （'#slider'）。easySlider（{
 auto：true，
 controlsFade：true，
 pause：3000，
 continuous：false，
 numeric：true 
}）; 
}）; 
}）; 
  

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.

解决方案

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

这篇关于使用.load（）为图像填充div以便轻松使用slider1.7的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！