Javascript 从主图像区域打开fancybox中的特定图像

当我点击我的图库中的“主图像”区域时，我打开了fancybox，无论打开什么图像，fancybox总是从图库中的第一个图像开始。例如，当用户单击第四个图像缩略图时，它会正确加载到“主图像”区域，但当单击主图像时，fancybox会从头开始

我理解它为什么这样做，因为主图像区域被包装在：

<a rel="gallery" class="fancybox" href="#hover0"> <img/> </a>

但我希望在主区域加载相应的图像时，将href'#hover0'更改为#hover2、#hover3、#hover4等。我不知道该怎么做

---

测试页面：

好的，我已经通过保存整个页面（以及链接到您的live站点的所有资源，很高兴图像有一个直接路径）来测试了这一点，您可以执行以下操作，但在我转到之前，您需要更正一个脚本错误：

 $(function(){
        // Bind a click event to a Cloud Zoom instance.
        $('#1').bind('click',function(){

^您没有正确关闭此函数，它需要一个额外的

}）在末尾

现在，您需要做两件事来解决您的问题：

1） 将以下代码粘贴到我前面提到的函数上方（顺序非常重要，因此需要将其置于上方）：

为了解释这段代码的作用，当单击大图像时，我们将获得活动图像，如果您没有注意到，当您单击缩略图时，它将激活类
cloudzoom gallery
。因此，单击较大的图像，我们将在
cloudzoom gallery处于活动状态时检索缩略图的
id

现在，由于我们得到的是
id
属性，因此每个图像都应该有一个唯一的id。因此，我们来看第二部分：

2） 为您的缩略图图像提供一个唯一的id，如：

<li><img class = 'cloudzoom-gallery' id="hover1" src ="http://brecksargent.com/slideshowpro/p.php?a=eXt1NExlZT1uemwuIjItOjI6Hys4OzouNio%2BNC4iKyAiPjQjJjs%2FNCY%2BLiY0&amp;m=1383849642" alt ="LIG Hippie Commune" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg' "> </li>
                                <!-- ^ here -->

<li><img class = 'cloudzoom-gallery' id="hover2" src ="http://brecksargent.com/slideshowpro/p.php?a=cX12XnxkJXl0bSczJSgwOzIDOjY5OyYzKzE8LTI%2BMiU%2BJzE%2FOicjKD8nNyM%3D&amp;m=1383853420" alt ="Dunno weird though" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg' "> </li>
                                <!-- ^ here -->


取出
rel=“gallery”
（这就是在单击“下一步”时从开始显示fancybox的原因）并删除
fancybox
类，而是添加
open fancybox
（原因稍后会给出）

2） 所有这些行：

<script type="text/javascript">
  function displayCaption() {
            var caption = document.getElementById('caption');
            caption.innerHTML = this.alt;
        }

        document.getElementById('1').onclick = displayCaption;
        document.getElementById('2').onclick = displayCaption;
        //....
</script>


依此类推，直到最后一张图片

4） 现在是最后一篇：

$('ul#carousel.elastislide-list img').on('click',function(){
            //here we get the updated id (hover1, hover2 etc.)
            //and pass it to the cloud-zoomed anchor tag
    $new_hoverid = $('img.cloudzoom-gallery-active').attr('id');
    $('#imgconstrain a').attr('href','#'+$new_hoverid);

    //get the caption of the thumbnail image and set it to the
    //p tag with id caption
    caption_text = $(this).attr('alt');
    var caption_element = document.getElementById('caption');
    caption_element.innerHTML = caption_text;
});

    //what this code does is, when the cloud-zoomed image is clicked,
    //we get the updated href (which is what the above code does)
    //and we are going to make that href get clicked so that the fancybox opens
$('#imgconstrain a.open-fancybox').on('click',function(){
    $to_open = $(this).attr('href');
    $('a.fancybox[href="'+$to_open+'"]').click();
});

}))

您可以取出我以前的答案中的代码，因为我已经将其放入新答案中：

$（文档）.ready（函数（）{

$（'imgconstrain img'）。在（'click'，function（）上{

$new_hoverid=$（'img.cloudzoom gallery active'）.attr（'id'）

$（'#1'）。最近（'a'）。attr（'href'，'#'+$new#hoverid）

}))


让我知道它是否适用于您：）
@我可以吃到非常好的奶酪汉堡，谢谢！但是它似乎破坏了缩略图点击时加载的标题。我想这是因为我使用的脚本正在加载旧ID（1,2,3）但是当将其更改为hover1、hover2、hover3时，它似乎仍然不起作用，知道为什么吗？再次感谢！@screth我明白了。在处理该链接时，我没有注意到任何标题。我可以看到该链接的测试页吗？@screth还有，我只是注意到这不是一个真正干净的解决方案，因为一旦单击图像和幻灯片，它就会从头开始g当它实际显示下一张时，我也会尝试修复它。@I Can have Cheezburger Here is the original test with the caption in the lower left是的，第一张幻灯片显示了两次，我以前看过，认为有办法修复它，只需再次找到解决方案！谢谢。@I Can have Cheezburger效果很好，谢谢你！如果你想在我身上加一个芝士汉堡，请告诉我：）
<script type="text/javascript">
  function displayCaption() {
            var caption = document.getElementById('caption');
            caption.innerHTML = this.alt;
        }

        document.getElementById('1').onclick = displayCaption;
        document.getElementById('2').onclick = displayCaption;
        //....
</script>

<li><img class = 'cloudzoom-gallery' id="hover1" src ="http://brecksargent.com/slideshowpro/p.php?a=eXt1NExlZT1uemwuIjItOjI6Hys4OzouNio%2BNC4iKyAiPjQjJjs%2FNCY%2BLiY0&amp;m=1383849642" alt ="LIG Hippie Commune" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg' "> </li>
                                    <!-- ^ here -->
<li><img class = 'cloudzoom-gallery' id="hover2" src ="http://brecksargent.com/slideshowpro/p.php?a=cX12XnxkJXl0bSczJSgwOzIDOjY5OyYzKzE8LTI%2BMiU%2BJzE%2FOicjKD8nNyM%3D&amp;m=1383853420" alt ="Dunno weird though" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg' "> </li>
                                    <!-- ^ here -->

$('ul#carousel.elastislide-list img').on('click',function(){
            //here we get the updated id (hover1, hover2 etc.)
            //and pass it to the cloud-zoomed anchor tag
    $new_hoverid = $('img.cloudzoom-gallery-active').attr('id');
    $('#imgconstrain a').attr('href','#'+$new_hoverid);

    //get the caption of the thumbnail image and set it to the
    //p tag with id caption
    caption_text = $(this).attr('alt');
    var caption_element = document.getElementById('caption');
    caption_element.innerHTML = caption_text;
});

    //what this code does is, when the cloud-zoomed image is clicked,
    //we get the updated href (which is what the above code does)
    //and we are going to make that href get clicked so that the fancybox opens
$('#imgconstrain a.open-fancybox').on('click',function(){
    $to_open = $(this).attr('href');
    $('a.fancybox[href="'+$to_open+'"]').click();
});