的fancybox多個重複的圖像

我已閱讀關於這一主題的其他線程但還沒有找到一個答案，我的特殊情況。我從http://jsfiddle.net/g9R4H/修改的代碼產生什麼，我試圖完成一個例子。在我的實現中，我可能會有多個圖像的多個副本。一個圖像可能有兩個縮略圖，另一個可能在同一頁上有3個。我已經縮小的問題的當量（0）設置，並已經確定，改變該值1花式盒打開時選擇不同的圖像。我無法確定如何根據點擊的圖像設置該值。在我的實際腳本正在通過PHP中生成的鏈接，當我創建它涉及到什麼樣的形象值觸發鏈接我知道。當談到JavaScript時，我非常喜歡這個新手，所以當你回答的時候記住這一點。 TIA的fancybox多個重複的圖像

<a data-trigger-rel="gallery" class="fancybox-trigger" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a> 

<a data-trigger-rel="gallery" class="fancybox-trigger" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a> 

<br /> 
<br /> 

<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a> 
<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a> 


$(".fancybox-trigger").click(function() { 

    $("a[rel='" + $(this).data('trigger-rel') + "']").eq(0).trigger('click'); 

    return false; 

}); 


$(".fancybox").fancybox();

來源

2013-06-28 Dennis

問題：無論圖庫從哪個圖像開始，所有圖像都屬於同一圖庫嗎？ – JFK

是的！下面是一個例子 http://biz131.inmotionhosting.com/~woodpr5/collection.php?series=2&collection=1 請記住，這是工作正在進行中。如果你點擊標準手風琴的，你會看到在皇冠樣式，燈Globe和燈具配件設置的問題的一個例子。現在只有第一個工作正常。我希望其他兩個拉起相同的畫廊形象。我們目前沒有加載所有圖像，因此在同一頁面上可能會有另一組圖像需要同樣的行爲。 – Dennis

我還沒有任何迴應，但經過一番思考後，我來到一個使用PHP的解決方案。基本上我使用PHP爲每個重複圖像的出現創建一個單獨的觸發器。當觸發器鏈接被創建時，觸發器陣列被更新。在添加完所有鏈接後，處理觸發器數組併爲每個觸發器創建單獨的觸發器。如果別人有這個問題，希望這會有所幫助。

<?php 
$a=0; 
$image_id_array=array(); 
$trigger_array=array(); 

$result_set= get_collection_standards($sel_collection); 
while ($standard = mysqli_fetch_array($result_set)) { 
    $image_id=$result["image_id"]; 
    $path=$result["path"].$result["file_name"]; 
    $caption = htmlentities($result["caption"]); 
    If (!array_key_exists($image_id,$image_id_array)){ 
     $image_id_array[$image_id]=$a;//image_id receives the key value and the value is the photo number in the gallery - 1. 
     $a+=1; 
     $link="<a rel=\"feature_gallery\" class=\"fancybox\" href=\"{$path}-l.jpg\""; 
    } Else { //if the image does exist create a trigger link. 
     $link="<a data-trigger-rel=\"feature_gallery\" class=\"fancybox-trigger". $image_id_array[$image_id] . 
     "\" href=\"{$path}-l.jpg\" "; 
     if (!array_key_exists($image_id,$trigger_array)) { //update the trigger array to be used below. 
      $trigger_array[$image_id]=$image_id_array[$image_id]; 
     } 
    } 
    $link .= " title=\"{$caption}\"><img src=\"{$path}-s.jpg\" ></a>"; 
    echo $link; 
} 

foreach ($trigger_array as $position) { 
     echo "<script>"; 
     echo " $(\"a.fancybox-trigger{$position}\").click(function() {"; 
     echo " $(\"a[rel='\" + $(this).data('trigger-rel') + \"']\").eq(" . $position . ").trigger('click');"; 
     echo " $.fancybox.open($(this).attr('tirgger-rel'));"; 
     echo " return false;"; 
     echo "});"; 
     echo "</script>"; 
} 
?>

來源

2013-07-09 22:51:23 Dennis

的fancybox多個重複的圖像

回答

相關問題