Fancybox，当我打开一组图像并使用“开始索引"单击下一步时，它无法正常工作 [英] Fancybox, when I open group of images and click on next with using “start index” - it's not working normally

问题描述

当我用花式框开始索引"打开一组图像时，我遇到了问题.

When I open group of images with fancybox "Index of start", I have a problem.

//"img [2]"是rel = 2的img

//"img[2]" it's img with rel=2

当我单击img时，它会打开. 加载后，当我单击上一个图像"时-它正常工作， 但点击下一个img"时-图库会从img [0]开始播放. 使用fancyBox v2.0.3. 在行动中: http://youtu.be/1dii1qC9cOM

When I click on img, it's opens. After load, when I click "prev Img" - it's working normally, but on click "next img" - Gallery start playing from img[0]. using fancyBox v2.0.3. in action: http://youtu.be/1dii1qC9cOM

HTML:

<ul class="gallery">
    <li>
        <a rel="0" data-fancybox-group="PHOTOGALLERY"> <img alt="" src="1.jpg"> </a>
    </li>
    <li>
        <a rel="1" data-fancybox-group="PHOTOGALLERY"> <img alt="" src="2.jpg"> </a>
    </li>
    <li>
        <a rel="2" data-fancybox-group="PHOTOGALLERY"> <img alt="" src="3.jpg"> </a>
    </li>
    <li>
        <a rel="3" data-fancybox-group="PHOTOGALLERY"> <img alt="" src="4.jpg"> </a>
    </li>
</ul>

JS:

// Using group of images, received from ajax
    var hrefList = new Array;
    for (var i in data) {
      hrefList[i] = data[i].PATH
    }    
    ul.find('a').live('click',function(e){
      e.preventDefault();
      var himself = $(this);
      $.fancybox( hrefList, {
        'index': himself.attr('rel')
      });
    });

推荐答案

对于fancybox v2.x，您无需使用.live()，因为它已经可以处理当前和将来(动态添加)的元素.另外，fancybox使用data-fancybox-group或rel在现有元素库中对图像进行分组，但是由于您是从array创建 manual 库，因此您实际上不需要任何一个，因此您的html可以很简单(即使您不需要<a>标记，也可以像这样保留它):

You don't need to use .live() with fancybox v2.x since it already handles present and future (dynamically added) elements. Additionally fancybox uses either data-fancybox-group or rel to group images within a gallery of existing elements but since you are creating a manual gallery from array, you don't actually need either of them so you html can be as simple like (even you wouldn't need the <a> tag but let's leave it like that):

<ul class="gallery">
 <li>
  <a><img alt="" src="1.jpg" /></a>
 </li>
 <li>
  <a><img alt="" src="2.jpg" /></a>
 </li>
 <li>
  <a><img alt="" src="3.jpg" /></a>
 </li>
 <li>
  <a><img alt="" src="4.jpg" /></a>
 </li>
</ul>

然后，为了获得正确的index每个缩略图，您可以像这样调整js:

Then, in order to get the right index for each thumbnail you may tweak your js like:

var hrefList = new Array;
for (var i in data) {
 hrefList[i] = data[i].PATH
} 
$("ul.gallery a").each(function(e){
 $(this).click(function(){
  $.fancybox( hrefList, {
   index: e,
   type: 'image'    
  }); //fancybox        
 });//click
});//each

这将始终为您提供以正确的index开头的图库.

that will always give you the gallery that starts with the right index.

请注意，您也不需要preventDefault()，因为每个锚都不设置任何href

Notice that you don't need preventDefault() either since there isn't any href set for each anchor

这篇关于Fancybox，当我打开一组图像并使用“开始索引"单击下一步时，它无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！