Can I group Fancybox 2 by other than rel attribute

2
votes

I have nice gallery with lots of pictures in one page and am using Fancybox to nicely show them in groups using different "rel" attributes. But I want to make a "view all" option to ignore the "rel" and to join them all in one group. I don't want to change the HTML with js, as I have more than 100 images and it would not be efficient. Also I would like to avoid building an array of items to tell Fancybox to show (for the same reason). So is there a way I could trick Fancybox to group not by "rel", but maybe by certain class, or other attribute?

My (very simplified) HTML looks like:

<div class="gallery">
  <a rel="group1" class="showall" href="image01-full.jpg"><img src="image01.jpg"/></a>
  <a rel="group1" class="showall" href="image02-full.jpg"><img src="image02.jpg"/></a>

  <a rel="group2" class="showall" href="image03-full.jpg"><img src="image03.jpg"/></a>
  <a rel="group2" class="showall" href="image04-full.jpg"><img src="image04.jpg"/></a>

  <a rel="group3" class="showall" href="image05-full.jpg"><img src="image05.jpg"/></a>
  <a rel="group3" class="showall" href="image06-full.jpg"><img src="image06.jpg"/></a>
</div>

I target my images in the simplest form:

$('.gallery a').fancybox();

So my images are then grouped by rel in like 3 groups if in this example. Can I group them by telling to group by class "showall", or something? Or the only way is to build the data array of all items and feed it as an option when I need it?

Thank You!

1
jqueryfancyboxfancybox-2
Which plugin are you using - Fancybox or fancybox-2? Could you create a jsFiddle? Also, you should attempt doing something yourself before asking on SO. – martynas
@martynas : the OP has the fancybox-2 tag ;) – JFK
You can't have different grouping settings at the same time, you may need to trigger (with a button perhaps?) a toggling event from separated groups to a single (all) one. I wrote this post that might give you an idea how-to picssel.com/… (includes demo) – JFK
Thanks @JFK, Your example seems very promising, it should do the trick. However I was not sure if changing many (150+) DOM nodes at once would be efficient enough.. I practically solved it myself already, though in a bit more complicated way: you can use Fancybox API method call and feed simple jQuery object selector to target images, like: $.fancybox.open( $('.showall'), [options] ). The problem was to set index option dynamically, otherwise API method disregards which image you have clicked and starts from the first one. – donatasben

1 Answers

6
votes

You can replace "rel" by "data-fancybox-group".

See exemples : http://fancyapps.com/fancybox/#examples