Fancybox多个重复图像 [英] Fancybox multiple duplicate images

问题描述

我已经阅读了有关此主题的其他主题，但没有找到针对我的特殊情况的答案.我已经修改了 http://jsfiddle.net/g9R4H/中的代码，以生成我的示例.我试图完成.在我的实现中，我可能有多个图像的多个副本.一个图像可能在同一页面上具有两个缩略图，而另一图像可能具有3个缩略图.我将问题缩小到eq(0)设置，并确定在打开精美的框时将该值更改为1会选择其他图像.我无法确定如何根据所单击的图像设置该值.在我的实际脚本中，链接是通过php生成的，我确实知道，当我创建触发器链接时，它所关联的图像值是什么.我是JavaScript的新秀，因此在回答时请记住这一点. TIA

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

推荐答案

我没有任何回应，但是经过一番思考之后，我想到了使用PHP的解决方案.基本上，我使用php为每次出现的重复图像创建单独的触发器.创建触发器链接后，将更新触发器数组.添加所有链接后，将处理触发器数组，并为每个触发器创建一个单独的触发器.如果其他人遇到此问题，希望这会有所帮助.

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

这篇关于Fancybox多个重复图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！