Fancybox multiple duplicate images

问题

I have read the other threads on this topic but have not found an answer to my particular situation. I have modified the code from http://jsfiddle.net/g9R4H/ to produce an example of what I'm trying to accomplish. In my implementation I may have multiple duplicates of multiple images. One image may have two thumbnails and another may have 3 all on the same page. I have narrowed down the problem to the eq(0) setting and have determined that changing that value to 1 selects a different image when fancy box opens. I have not been able to determine how to set that value based on the image that is clicked. In my actual scripts the links are being generated via php and I do know when I create the trigger links what image value it relates to. I'm quite the rookie when it comes to javascript so keep that in mind when you answer. TIA

<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();

回答1:

I haven't had any responses, but after some thought I come to a solution using PHP. Basically I am using php to create a separate trigger for each occurrence of duplicate images. When the trigger links are created the trigger array is updated. After all the links have been added, the trigger array is processed and a separate trigger created for each. If someone else is having this issue, hopefully this will help.

<?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>";
}
?>

来源：https://stackoverflow.com/questions/17371787/fancybox-multiple-duplicate-images