Fancybox 多个重复图像答案

【问题标题】：Fancybox multiple duplicate imagesFancybox 多个重复图像
【发布时间】：2013-07-10 06:51:23
【问题描述】：

我已阅读有关此主题的其他主题，但尚未找到针对我的特定情况的答案。我已经修改了http://jsfiddle.net/g9R4H/ 的代码，以生成我正在尝试完成的示例。在我的实现中，我可能有多个图像的多个副本。一个图像可能有两个缩略图，另一个可能有 3 个都在同一页面上。我已将问题缩小到 eq(0) 设置，并确定当花哨的框打开时将该值更改为 1 会选择不同的图像。我无法根据单击的图像确定如何设置该值。在我的实际脚本中，链接是通过 php 生成的，当我创建触发器链接时，我确实知道它与什么图像值相关。我是 javascript 方面的新手，所以在回答时请记住这一点。 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();

【问题讨论】：

问题：无论图库从哪个图片开始，所有图片是否都属于同一个图库？
是的！这是一个示例biz131.inmotionhosting.com/~woodpr5/… 请记住，这是正在进行的工作。如果您单击标准手风琴，您将在 Crown Style、Light Globe 和 Light Fittings 设置中看到一个问题示例。现在只有第一个可以正常工作。我希望其他两个拉出相同的画廊图像。我们此时尚未加载所有图像，因此同一页面上可能还有另一组需要相同行为的图像。

标签： php javascript jquery fancybox fancybox-2

【解决方案1】：

我没有收到任何回复，但经过一番思考后，我找到了使用 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>";
}
?>

【讨论】：