Fancybox - Ajax圖片庫

我有一個自定義圖片庫，其中包含一個縮略圖div，每個包含在fancybox組中。Fancybox - Ajax圖片庫

當你點擊一個（它在fancybox打開），你可以按上一個/下一個在第一個「頁面」上的圖像之間循環。要在頁面之間移動，您必須關閉fancybox並更改頁面，然後打開新的縮略圖。這組新照片通過ajax檢索。

要顯示出你正是我想說的， http://www.speedcountry.com/mSpeed323/Mazda_MAZDASPEED3

如何，我可以使用的fancybox切換頁面並加載下一組圖片的？

2011-02-15 pws5068

它沒有出現在FancyBox中的任何內部方法，所以你必須修改插件。我冒昧地做了一個小改動，並在演示中張貼demo - 在FancyBox彈出框中打開任何圖像，然後按下鍵盤上的Enter鍵。它會將所有圖像加載到圖庫中，並從第一個開始。

修改線887，然後892之前插入的行：

$.fancybox.pos = function(pos, array) { // array parameter added 
    if (busy) { 
     return; 
    } 

    if (array) { currentArray = array; } // new line

所以，基本上添加「陣列」作爲函數參數，然後添加if (array)...線。

要使用它，只需在FancyBox打開時調用pos函數。這是從演示代碼：

// pos(index of image, jQuery object of gallery objects) 
$.fancybox.pos(0, $('#examples a[id]'));

*注：最初我只是用$('a[id]')，它包括那是看中裏面箱內的圖像。

更新：所以像你說的，你正在使用AJAX ......我猜你是剛開始圖像的URL列表加載更多的圖像。與URL開始，你將需要形成和這些圖像在一個隱藏的區域添加到頁面：

<div id="ajax-loaded" style="display:none"> 
<a href="#" title="image1 title"><img src="image1.jpg"></a> 
<a href="#" title="image2 title"><img src="image2.jpg"></a> 
... 
<a href="#" title="imageN title"><img src="imageN.jpg"></a> 
</div>

然後你就可以做的jQuery對象的數組$('#ajax-content img')到$.fancybox.pos功能作爲第二放慢參數，並開始與第一圖像（零）

// ajax complete, add images to gallery 
$.fancybox.pos(0, $('#ajax-loaded a'));

更新＃2：我裹在鏈接和jQuery選擇上面的HTML後，我發現，如果要包括圖像的標題是必要的。

來源

2011-03-01 04:33:21 Mottie

我在這裏看到你的邏輯，但是我對第二位有點困惑（並且演示對我不起作用）。我在數組參數中傳遞了什麼？您可以詳細說明「圖庫對象的jQuery對象」 – pws5068 2011-03-05 03:05:40

Hiya，演示停止工作，因爲我鏈接到他們網站上的fancybox文件。我只是切換所有的鏈接，並添加了CSS，所以它現在應該工作。第二個包含`$ .fancybox.pos`的函數是一個內部fancybox函數，它有點像「goto」圖像＃...我所做的只是將當前數組（jQuery對象數組）替換爲您自己添加的數組。 – Mottie 2011-03-05 03:34:28

我在我的回答中發佈了FancyBox的一些有用鏈接here。請檢查它們。

如果您發現它沒有用，請糾正我。

同時，如果執行有任何問題，請發帖。

謝謝。

來源

2011-02-15 12:17:06

剛剛在prepGallery()的末尾添加了$("#profileGallery .vehiclePictures:first").click()。所以在你的AJAX調用之後，它會自動「點擊」照片。

來源

2011-03-03 18:05:57 Haochi

Fancybox - Ajax圖片庫

回答

相關問題