prettyPhoto一個頁面上的多個畫廊

我正在構建一個worpdress站點，並在使用簡碼構建的頁面上有多個畫廊。目前，所有圖像都被賦予rel屬性'prettyPhoto [1]'，但我需要將每個圖庫分開。我在頁面上總共有56個圖像，所以當第一張圖片的圖片1在Lightbox中打開時，它說的是1/56，我可以點擊所有56圖片，我想要的是圖庫1的1/16 那麼畫廊1/16等有人告訴我，在我的raw.js文件編輯這行腳本：prettyPhoto一個頁面上的多個畫廊

$(".gallery-icon a").attr('rel', 'prettyPhoto[1]');

但也不知道該怎麼用它做呢？任何幫助將不勝感激。這裏是有問題的頁面的鏈接：

http://www.tetra-shed.co.uk/news/

來源

2012-12-13 Alex Graves

prettyPhoto團體畫廊共同基礎上，方括號中的內容。因此，您將同一畫廊中的所有56幅圖像全部分配到圖庫1中。

您真正想要的是圖庫1中的第一個十六;

$(".gallery-icon a").attr('rel', 'prettyPhoto[1]');

而下一個16在畫廊2;

$(".gallery-icon a").attr('rel', 'prettyPhoto[2]');

的問題是 - 怎麼做鑑於rel屬性正在通過JS分配？那麼我會考慮根據父母的父div ID做。每個gallery-icon元素都有一個gallery-item父項。其中每一個都是具有特定ID的圖庫類的一部分。例如

<div id='gallery-3' class='gallery galleryid-555 gallery-columns-4 gallery-size-thumbnail'> 
    <dl class='gallery-item'> 
     <dt class='gallery-icon'>

所以你想分配唯一的圖庫ID作爲漂亮的照片相對值。即;

$(".gallery-icon a").attr('rel', 'prettyPhoto[gallery-3]');

我會通過尋找所有的畫廊，圖標和使用closest()尋父畫廊ID，像這樣做;

Finding the id of a parent div using Jquery

我沒有測試它或什麼，但這樣的事情應該讓你在正確的方向前進;

  $('#content').find('.gallery-icon a').each(function() { 

       var gallid = $(this).closest("div").attr("id"); 

       $(this).attr('rel', 'prettyPhoto['+ gallid +']'); 

      });

來源

2012-12-13 20:44:27 McNab

McNab您的救星。它第一次工作。非常感謝你的回覆和幫助。 –

或許我帶着簡單的解決方案，我只是通過我的所有的畫廊div要在each功能，然後在它們內部的圖像初始化prettyPhoto。

$(document).ready(function(){ 
    $.each($(".gallery"), function(i, val) { 
     var queryString = ".gallery:nth(" + i + ") a[rel^='prettyPhoto']"; 
     $(queryString).prettyPhoto({animation_speed:'normal',theme:'light_square', social_tools: false}); 
    }); 
});

來源

2014-01-04 17:26:01

爲什麼downvote？這很簡單，它的工作和你的HTML標記不必從畫廊改變到畫廊（這是很好的，因爲用戶可以添加或刪除我的網上畫廊） –

-1

所有這一切需要做的是改變相對在您添加庫的HTML看起來像這樣的rel =「prettyPhoto [pp_gal]」

在你的第一個畫廊

創建內部您的div將rel =「prettyPhoto [pp_gal]」更改爲「prettyPhoto [gallery1]」（例如）

和旁邊的「prettyPhoto [gallery2]」等。

來源

2014-02-18 17:48:37 Stuart

prettyPhoto一個頁面上的多個畫廊

回答

相關問題