Fancybox 2.1.0从图库中排除触发图像 [英] Fancybox 2.1.0 exclude trigger image from gallery

问题描述

可能重复：

Fancybox多个链接到同一个图库但没有重复

我正在使用fancybox 2.1.0和jQuery 1.8.3来加载一个图像库，但它并不是我想要它的工作方式。我有一个大的主图像，然后是一组画廊缩略图。单击主图像或缩略图可打开fancybox图库。

I'm using fancybox 2.1.0 with jQuery 1.8.3 to load up a gallery of images but it's not working quite how I want it to. I have a large main image then a set of gallery thumbnails underneath. Clicking either the main image or the thumbnails opens the fancybox gallery.

问题是缩略图中的主要图像功能也是如此，因此当图库启动时我会得到第一个图像重复：1.jpg，1.jpg，2.jpg，3.jpg等。

The problem is the main image also features in the thumbnails, so when the gallery is launched I get the first image repeating: 1.jpg, 1.jpg, 2.jpg, 3.jpg etc.

我希望主图像触发图库灯箱但不包含在它，但我似乎无法做到正确。非常感谢任何建议！

I want the main image to trigger the gallery lightbox but not be included in it but I can't seem to get it right. Would really appreciate any suggestions!

我的加价：

<a class="product-image fancybox" data-fancybox-group="gallery" id="main-image" title="" href="1.jpg">
  <img id="image" src="1.jpg" height="320" width="320" alt="" title="" />
</a>

<ul>
  <li>
    <a class="fancybox" data-fancybox-group="gallery" href="1.jpg" title="Image 1">
      <img src="1.jpg" width="100" height="100" alt="" />
    </a>
  </li>
  <li>
    <a class="fancybox" data-fancybox-group="gallery" href="2.jpg" title="">
      <img src="2.jpg" width="100" height="100" alt="" />
    </a>
  </li>
  <li>
    <a class="fancybox" data-fancybox-group="gallery" href="3.jpg" title="">
      <img src="3.jpg" width="100" height="100" alt="" />
    </a>
  </li>

</ul>

我的剧本：

var $j = jQuery.noConflict(); 
$j(document).ready(function() {
    $j('.fancybox').fancybox({
        nextEffect: 'fade',
        prevEffect: 'fade',
        helpers: {
            title : {
                type : 'float'

            }
        }
    });
});

推荐答案

试试这个：
html（remove fancybox 主img中的类）并将 rel 附加到 data-fancybox-group

Try this : html (remove fancybox class in main img) and append rel to data-fancybox-group

    <a class="product-image" data-fancybox-group-rel="gallery" id="main-image" title="" href="1.jpg">
  <img id="image" src="1.jpg" height="320" width="320" alt="" title="" />
</a>

<ul>
  <li>
    <a class="fancybox" data-fancybox-group="gallery" href="1.jpg" title="Image 1">
      <img src="1.jpg" width="100" height="100" alt="" />
    </a>
  </li>
  <li>
    <a class="fancybox" data-fancybox-group="gallery" href="2.jpg" title="">
      <img src="2.jpg" width="100" height="100" alt="" />
    </a>
  </li>
  <li>
    <a class="fancybox" data-fancybox-group="gallery" href="3.jpg" title="">
      <img src="3.jpg" width="100" height="100" alt="" />
    </a>
  </li>
</ul>

js

  $('a.product-image').click(openFancybox);

function openFancybox(){
 $.fancybox.open($(this).attr('data-fancybox-group-rel'));
}

参见doc 这里 API方法
[很酷，此代码未经过测试];）]
祝你好运

see doc here API Methods [be cool,this code was not tested] ;)] good luck

这篇关于Fancybox 2.1.0从图库中排除触发图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！