Question

当我点击＆＃34;主图像＆＃34;我打开了fancybox我的画廊中的区域，无论打开什么图像，fancybox始终从图库中的第一个图像开始。例如，当用户点击第四个图像缩略图时，它会加载到＆＃34;主图像＆＃34;区域正确，但点击主图像fancybox从头开始。

我理解为什么要这样做，因为主图像区域包含在：

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

但我想要的是拥有href＆＃39;＃hover0＆＃39;当在主区域中加载相应的图像时，更改为＃hover2，＃hover3，＃hover4等。不知道该怎么做。

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

Answer 1

好吧，所以我通过保存整个页面（以及链接到您的实时网站的所有资源，以及图像有直接路径感到高兴）对此进行了测试，您可以执行以下操作，但在我去那之前是您需要更正的脚本错误：

 $(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。因此，点击较大的图片，我们将使用id类检索缩略图的cloudzoom-gallery-active。

现在，由于我们获得了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从点击下一步开始显示的原因）并删除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();
});

}）;

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

<击> $（文件）。就绪（函数（）{

<击>

$（＆＃39; #imgconstrain img＆＃39;）。on（＆＃39; click＆＃39;，function（）{

$ new_hoverid = $（＆＃39; img.cloudzoom-gallery-active＆＃39;）。attr（＆＃39; id＆＃39;）;

$（＆＃39;＃1＆＃39）。最近的（＆＃39; A＆＃39）。ATTR（＆＃39; HREF＆＃39;＆＃39;＃＆＃39; + $ new_hoverid）;

<击>}）;

<强> Full code pastebin

让我知道它是否适合你：）

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

1 个答案:

编辑：