Fancybox, когда я открываю группу изображений и нажимаю «Далее» с помощью «индекса начала» - это не работает нормально

Question

Когда я открываю группу изображений с помощью fancybox "Index of start", у меня возникает проблема.

// "img [2]", это img с rel = 2

Когда янажмите на IMG, он открывается.После загрузки, когда я нажимаю «prev Img» - он работает нормально, но при нажатии «next img» - Галерея начинает воспроизведение с img [0].используя fancyBox v2.0.3.в действии: 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')
      });
    });

Answer 1

Вам не нужно использовать .live() с fancybox v2.x, так как он уже обрабатывает настоящие и будущие (динамически добавленные) элементы.Кроме того, fancybox использует либо data-fancybox-group, либо rel для группировки изображений в галерее существующих элементов, но, поскольку вы создаете ручную галерею из array, вам на самом деле не нужна ни одна из них, поэтому выhtml может быть таким простым (даже если вам не понадобится тег <a>, но давайте оставим его таким):

<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 как:

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.

Обратите внимание, что вам не нужно preventDefault(), так как тамhref не установлен для каждого якоря