加載/顯示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問題

回答

相關問題