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

Open specific image in fancybox from main image area

本文关键字：图像 fancybox 区域      更新时间：2023-09-26

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

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

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

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

测试页面：http://www.pixlsnap.com/j/testb.php

好吧，我已经通过保存你的整个页面（以及链接到你的实时网站的所有资源，很高兴这些图像有一个直接的路径）来测试了这一点，你可以做以下操作，但在我去之前，有一个脚本错误，你需要纠正：

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

^您没有正确关闭此函数，它在末尾需要一个额外的});。

现在有两件事你需要为你的问题做：

1） 将以下代码粘贴到我之前提到的函数上方（顺序很重要，所以需要在其上方）：

$(document).ready(function(){
    $('#imgconstrain img').on('click',function(){
        $new_hoverid = $('img.cloudzoom-gallery-active').attr('id');
        $('#1').closest('a').attr('href','#'+$new_hoverid);
    });
});

为了解释这个代码的作用，当大图像被点击时，我们将获得活动图像，如果你没有注意到，当你点击缩略图时，它会得到类cloudzoom-gallery-active。因此，单击较大的图像时，我们将使用cloudzoom-gallery-active类检索缩略图的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 -->

直到hover6，就这样。

如果这对你有效，请告诉我，如果解释不够清楚，请随时询问^-^

编辑：

因此，根据评论，这里有一些事情要做：

1） 在你的这个锚标签：

<div id="imgconstrain">
<a rel="gallery" class="fancybox" href="#hover0">
<img class = "cloudzoom" id="1" src =
  • 取出rel="gallery"（这就是fancybox从一开始点击next就会显示的原因），删除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>
  • 不需要，我们将以较小的方式进行

3） 就像我之前提到的，请在这里添加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 -->
  • 依此类推，直到最后一个图像

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

})；

你可以去掉我之前回答的这个代码，因为我已经把它放在了新的代码中：

$（document）.ready（function）｛

$（'#imgconstrain-img'）.on（'click'，function（）{

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

$（'#1'）.最接近（'a'）.attr（'ref'，'#'+$new_hoverid）；

})

完整代码粘贴箱

让我知道它是否适用于您：）

相关文章：