0

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();
Dennis
  • 3
  • 3
  • question : will all the images belong to the same gallery regardless what image the gallery starts from? – JFK Jun 28 '13 at 22:23
  • Yes! Here is an example http://biz131.inmotionhosting.com/~woodpr5/collection.php?series=2&collection=1 Keep in mind this is work in progress. If you click on the standards accordion you will see an example of the problem in the Crown Style, Light Globe, and Light Fittings settings. Only the first one works correctly now. I want the other two to pull up the same gallery image. We do not have all the images loaded at this point so there may be another set of images on the same page that will need same behavior. – Dennis Jul 03 '13 at 14:11

1 Answers1

0

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