Fancybox, when I open group of images and click on next with using “start index” - it's not working normally

Question

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

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

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

JFK JFK · Accepted Answer · 2012-03-13T20:54:35

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>

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

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

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

Fancybox, when I open group of images and click on next with using “start index” - it's not working normally

1 Answers