Fancybox next/prev not working

问题

I have this html with the data-fancybox-group attribute set on the link around the image just as in the demo to enable the next/previous but it's not working. I'm including the buttons js and css and they're loading in correctly so I have no idea why it's not working. Can anyone help?

   <ul class="gallery photos">                              

      <li>
        <div>
          <h4><a href="http://nduna.demo.provokateur.com/media-center/photos/amy-robbins/">Amy Robbins</a></h4>
          <div class="photocontent">
            <p>
              <a href="http://nduna.demo.provokateur.com/wp-content/uploads/2012/12/Homepage-Together1.jpg">
            <img class="alignnone size-thumbnail wp-image-1082" title="Homepage-Together" src="http://nduna.demo.provokateur.com/wp-content/uploads/2012/12/Homepage-Together1-200x88.jpg" alt="" width="200" height="88" />
          </a>
        </p>
      </div>
      <a href="http://nduna.demo.provokateur.com/media-center/photos/amy-robbins/" class="cta">Show image</a>
    </div>

  </li>
  <li>
    <div>
      <h4><a href="http://nduna.demo.provokateur.com/media-center/photos/unicef-hq07-0149indrias-getachew/">Indrias Getachew</a></h4>
      <div class="photocontent">
        <p>
          <a href="http://nduna.demo.provokateur.com/wp-content/uploads/2012/07/070149F.jpg">
            <img class="alignnone size-thumbnail wp-image-942" title="070149F" src="http://nduna.demo.provokateur.com/wp-content/uploads/2012/07/070149F-200x88.jpg" alt="" width="200" height="88" />
          </a>
        </p>
      </div>
      <a href="http://nduna.demo.provokateur.com/media-center/photos/unicef-hq07-0149indrias-getachew/" class="cta">Show image</a>
    </div>
  </li>
  <li>
    <div>
      <h4><a href="http://nduna.demo.provokateur.com/media-center/photos/dsc-0103/">DSC 0103</a></h4>
      <div class="photocontent">
        <p>
          <a href="http://nduna.demo.provokateur.com/wp-content/uploads/2012/07/DSC_0103.jpg">
            <img class="alignnone size-thumbnail wp-image-943" title="DSC_0103" src="http://nduna.demo.provokateur.com/wp-content/uploads/2012/07/DSC_0103-200x88.jpg" alt="" width="200" height="88" />
          </a>
        </p>
      </div>
      <a href="http://nduna.demo.provokateur.com/media-center/photos/dsc-0103/" class="cta">Show image</a>
    </div>
  </li>
</ul>

The script is working perfectly other than this, here's the js:

$('.homepnl.photo li, .gallery.photos li, .lb-photos').each(function(i,itm){
var photolink = $('.photocontent a',$(itm)).attr('href');
// var title = $('.wp-caption-text',$(itm)).text();

$('a',$(itm)).click(function(evt){
  evt.preventDefault();
});


// $(itm).attr('title',title);
$(itm).attr('href',photolink);
$('.photocontent p a').attr(data-fancybox-group','gallery');

//applying the fancybook plugin to the item. 
$(itm).fancybox({href:photolink, 'autoDimensions': true });

});

The deadline for this was yesterday so any help greatly appreciated!

The page is here: http://nduna.demo.provokateur.com/media-center/

回答1:

fancybox OLDER than 2.0 VS fancybox 2.0+

Fancybox OLDER than 2.0 ( http://fancybox.net/ )

appears to support ONLY rel attrubute for grouping

Fancybox 2.0+ ( http://fancyapps.com/fancybox/ )

supports both = rel attribute && data-fancybox-group attribute

So if you are using older than 2.0 version of fancybox this is probably your issue :)

回答2:

I think what you're missing is a matching "rel" attribute on your anchor tags. From the Fancybox documentation (http://fancybox.net/howto):

Note - Galleries are created from elements who have the same "rel" tag, example:

/* HTML */
<a class="grouped_elements" rel="group1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""/></a>     

<a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""/></a> 
<a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="image_small_4.jpg" alt=""/></a> 

/* This will create two galleries */

$("a.grouped_elements").fancybox();

EDIT:

So from your code, you could do something like this (for all of your images):

<a rel="gallery-one" href="http://nduna.demo.provokateur.com/wp-content/uploads/2012/12/Homepage-Together1.jpg"><img class="alignnone size-thumbnail wp-image-1082" title="Homepage-Together" src="http://nduna.demo.provokateur.com/wp-content/uploads/2012/12/Homepage-Together1-200x88.jpg" alt="" width="200" height="88" /></a>

EDIT 2

When I run the following code in the console on your page, it then adds the next/prev buttons to each image. I'm not 100% certain as to how fancybox works, but there may be an issue with the use of jQuery's .attr() selector in the initiator.

jQuery('.photocontent p a').data('fancyboxGroup','gallery').fancybox();

来源：https://stackoverflow.com/questions/13764068/fancybox-next-prev-not-working

标签

jquery

fancybox