加载/显示Flexslider问题

我试图使用Flexslider，并且在将Flexslider封装在另一个div中时隐藏它，然后试图在单击按钮时显示整个div。我没有使用AJAX调用来加载滑块或任何其他div，而是使用JQ来隐藏然后显示点击按钮时的显示内容（因为该站点相对简单而且很小）。加载/显示Flexslider问题

**//This is the JQuery I've tried using** 
<script type="text/javascript" charset="utf-8"> 
$('#projectsPage').hide(); 
$('#projectsLink').click(function(){ 
$('#projectsPage').fadeIn(1000).load(function(){ 
    $('.flexslider').flexslider({ 
    animation: "fade", 
    slideshow: true, 
    animationLoop: true, 
    animationSpeed: "3000", 
    slideshowSpeed: "8000", 
    controlNav: false, 
    directionNav: false 
    }); 
}); 
}); 
</script> 

**<!-- HTML-->** 

<!--Click this link to show the div containing the flexslider--> 
<a href="#projectsPage" id="projectsLink">link</a> 

<!--Div containing the flexslider div (which is part of the source code)--> 
<div id="projectsPage"> 
<div class="flexslider"> 
    <ul class="slides"> 
    <li> 
     <img src="js/flexslider/images/img2.jpg" /> 
    </li> 
    <li> 
     <img src="js/flexslider/images/img3.jpg" /> 
    </li> 
    <li> 
    <img src="js/flexslider/images/img4.jpg" /> 
    </li> 
</ul> 
</div> 
</div>

此代码是grander文档的一部分，但它并不是那么复杂。有人可以告诉我，如果我打破了某些东西或需要包含更多信息吗？

此外，在JS控制台中似乎没有错误，所以我很难为什么它不会显示。它会“加载”#projectsPage div，如URL中所示，但在窗口中不显示任何内容。

我很新的JQuery所以很好:)

谢谢！

来源

2013-03-01 Juliana Marguerite Linder

我不认为.load是你正在寻找的功能可按。 – 2013-07-09 06:42:30

如果您想要淡入淡出效果，您可能必须在淡入淡出之前应用一些样式才能使其达到正确大小，然后初始化柔性滑块，然后调用淡入淡出效果，否则隐藏容器的大小通常为0px，即导致柔性滑板即使在淡入之后仍保持隐藏状态。 – 2013-07-09 06:46:01

更好的方法可能是在加载时初始化柔性滑板，然后隐藏它。点击时，fadeIn可能会为你工作，而不会有太多麻烦，否则你需要让flexslider自己调整大小（有可能调用flexslider resize方法）。否则，如果您允许用户隐藏并重新显示它，您将重新初始化FlexSlider。 – 2013-07-09 06:48:01

滑块无法初始化隐藏的div内部。

我有隐藏在divs中的多个flexsliders的相同问题，只有当他们的缩略图被点击时才会显示。要做到这一点，请在元素上设置一个jquery click（）侦听器，以便使滑块显示，并在包含的div未隐藏后初始化滑块。

类似以下内容：

$('.show_slider_link_class').click(function(){ 

    //show containing element 
    $('.hidden_slider_container').show(); 

      // now you can init the flexslider 
    $('.flexslider_').flexslider({ 
     animation: "slide", 
     controlNav: "thumbnails", 
     minItems: 1, 
     start: function(slider){ 
      $('body').removeClass('loading'); 
     } 
     }); 
});

来源

2013-07-09 06:32:59 rmmoul

加载/显示Flexslider问题

回答

相关问题