Question

我已经阅读了有关此主题的其他主题，但未找到我的具体情况的答案。我修改了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();

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

Fancybox多个重复图像

1 个答案: