幻燈片在FancyBox圖片庫？

我剛剛開始學習一些HTML和JavaScript（閱讀：我幾乎不知道這件事），並希望我的index.html頁面打開一個旋轉圖像庫使用FancyBox。幻燈片在FancyBox圖片庫？

我已經完成了所有設置，直到頁面加載時第一個圖像出現在模式對話框中，但是我希望圖庫自動從一個圖像旋轉到另一個圖像，可能是在某些指定的時間間隔。那可能嗎？我將如何着手設置？

再次，答案越簡單，越好 - 因爲我不知道下蹲。

我是我們這個時代的編程奇才面前謙卑自己...

2010-10-25 Dr.Fishtable

您可以將它添加到您的JavaScript的末尾：

setInterval($.fancybox.next, 10000);

的數字表示的等待時間，以毫秒爲單位（如此在我的例子中是10秒）。另外，請確保在fancybox的選項中指定cyclic = true，否則它將停在最後一張圖片上。（除非這就是你想要的）

編輯：要添加一個暫停，你可以這樣做以下：

而是在你的JavaScript是一個線，補充一點：

var rotatingInterval = FALSE; 
function toggleRotating(fromButton) { 
    if (rotatingInterval) { 
    clearInterval(rotatingInterval); 
    rotatingInterval = FALSE; 
    } else { 
    rotatingInterval = setInterval($.fancybox.next, 10000); 
    if (fromButton) 
     $.fancybox.next(); 
    } 
} 
toggleRotating(FALSE);

然後你可以在你的html中有一個按鈕，如下所示：

<input type="button" value="Pause" onclick="toggleRotating(TRUE);" />

哪個可以播放/暫停。

來源

2010-10-26 00:43:50 cambraca

太棒了！這很好。是否可以爲最終用戶添加一個「暫停」按鈕來臨時暫停自動滾動間隔？ – 2010-10-27 17:39:29

嗯，我希望有一個暫停按鈕，可以包含在對話框中，就像在FancyBox中一樣。那可能嗎？ – 2010-10-27 22:49:02

如果不修改FancyBox的內部工作方式，我不認爲這是可能的，這將需要一些更多的工作。如果它在每張幻燈片上觸發，更好地使用setTimeout而不是setInterval，那麼 – cambraca 2010-10-28 00:13:02

以下是我如何設置功能。我添加了計數，因爲加載圖庫時，onStart/onComplete調用每次加載新圖像時都會觸發。我只想要第一次調用將setInterval綁定到下一個調用。

function toggleRotating(fromButton) { 
     count = count + 1; 
     if (fromButton == false) { 
     clearInterval(rotatingInterval); 
     rotatingInterval = false; 
     count = 0; 
     } else { 
     if(count == 1) 
      rotatingInterval = setInterval($.fancybox.next, 10000); 

     } 
    }

這裏是我的全球變化和啓動fancybox的方法。

var rotatingInterval = false; 
var count = 0; 
$(function() { 
    $("a.slide").attr('rel', 'presentation1').fancybox({'autoDimensions':false,'height':540,'width':720,'autoScale':false,'cyclic':true, 'onStart': function(){ toggleRotating(true); } }); 
});

我沒有創建一個按鈕來停止旋轉。我想我會做到這一點，如果你點擊下一個或上一個按鈕，它會切換到false。

來源

2011-02-23 05:38:12 Ecropolis

？ – commonpike 2011-08-20 17:49:48

要打開你的fancybox成幻燈一旦打開，沒有多餘的按鈕，使用「的onComplete」選項設置一個計時器叫「下一個（）」。例如：

jQuery("a.fancybox").fancybox({ 
    "onComplete":function() { 
     clearTimeout(jQuery.fancybox.slider); 
     jQuery.fancybox.slider=setTimeout("jQuery.fancybox.next()",5000); 
    } 
});

來源

2011-08-20 17:44:07 commonpike

幻燈片在FancyBox圖片庫？

回答

相關問題