自動播放（幻燈片）燈箱畫廊在放大燈箱？

我一直在尋找一個響應式燈箱，它會自動播放畫廊中指定點開始的畫廊。 Magnific Popup看起來很穩固。任何人都有辦法讓它充當燈箱幻燈片 - 也就是說，有圖庫autoadvance？自動播放（幻燈片）燈箱畫廊在放大燈箱？

從Magnific documentation看起來應該有一種方式，利用了magnificPopup.next();，magnificPopup.updateItemHTML();和/或回調事件，但這已經超出了我的JavaScript編程

的感謝！

編輯：如果你在想「umm fancybox的autoPlay？」，當然，這將工作也。我還是想試試Magnific

來源

2013-05-17 henry

簡單的說就是在open的區間內回調。

callbacks: { 
    open: { 
     setInterval(function() { 
      $.magnificPopup.instance.next(); 
     }, 2000); 
    } 
}

當然這是非常基本的實現，但你可以去你所需要的。

來源

2013-05-18 11:33:31

看起來不錯，不起作用。我認爲，從關閉'setInterval（'。開始我覺得不能抓住它，不管我有多少小事，我都不能接受它。謝謝你的幫助Dmitry – henry

@henry是的，它缺少我已經添加的'function（）'。上面的代碼現在應該可以工作，但另一個問題是如何在下一個/上一個按鈕被點擊時停止幻燈片顯示？ – JohnnyQ

雖然有一個怪癖，但我經過一番修改後發現了它。我在頁面上有兩個magnificPopup實例。一個只調用元素而不是圖庫模式，一個調用數組和圖庫中的所有項目。此代碼位於兩者的後面。但是，它會影響到這兩個實例，而我的「非」圖庫每5秒刷新一次！無論如何，下面的代碼是你在找什麼：

callbacks: { 
    open: setInterval(function() { 
      $.magnificPopup.instance.next() 
       }, 5000)}

來源

2013-06-06 15:43:38 manxam

Magnific酒店我彈出幻燈片使用一個小的形式與「開始幻燈片放映」按鈕，並在所需的時間間隔的輸入。幻燈片放映對象已基本下面的代碼：

var slideshow = { 
    interval: 4, 
    intervalTimer: null, 
    currImgNo: 0, 
    insertController: function(parentElement) { 
     // DOM code to create form html 
     $(slideShowStartButton).on('click', function(e){ 
      $('.popup-parent-container').magnificPopup('open', slideshow.currImgNo); 
      if ($.magnificPopup.instance.index + 1 
        < $.magnificPopup.instance.items.length) { 
       $.magnificPopup.instance.next(); 
       slideshow.currImgNo++; 
      } else { 
       $('.popup-parent-container').magnificPopup('close'); 
      } 
     }, slideshow.interval * 1000); 
    }); 
} 

$(document).ready(function() { 
    slideshow.insertController(/* This code depends on the slide show controller html */); 
});

幻燈片放映屬性currImgNo是用來與過去popuped圖像進入幻燈片並防止循環。

彈出Magnific酒店了在打開和關閉事件處理多餘的線條：

$('.popup-parent-container').magnificPopup({ 
    // ... 
    callbacks: { 
     open: function() { 
      slideshow.currImgNo = this.index; 
     }, 
     close: function() { 
      if (slideshow.intervalTimer) { 
       clearInterval(slideshow.intervalTimer); 
      } 
     } 
    } 
});

這工作得很好，至少對某些WebKit和我測試Gecko瀏覽的。

我的版本額外啓動全屏模式，但這需要更多的代碼跨瀏覽器工作。

來源

2013-12-21 11:04:20

自動播放（幻燈片）燈箱畫廊在放大燈箱？

回答

相關問題