How to create separate Fancybox galleries on the same page?

Question

We are using jQuery 1.7.1 and Fancybox 1.3.4. I am brand new to Fancybox. I have never used it before yesterday, but it is used widely on a site that I am working on. The person who set up Fancybox was terminated because he was ... irrelevant. :)

I am creating a product comparison page. Up to four products will display on a single page. Each product may have up to five images specific to that product.

Currently, when I click on any image, Fancybox pops open and creates a gallery of all of the images on the page. So, if I have one product with five images, there is a five image gallery. If I have four products with five images, there is one gallery with twenty images. This doesn't work well for me.

What I want is for each product to have its own gallery. If a they click on Product A, they will see only the images associated with Product A. If they click on Product B... you get it.

How can I make Fancybox create separate galleries on a single page?

EDIT

Currently, my rel attribute is set to 'autoGallery'. One of the answers below suggested that I change it to something like this, which would produce what I am looking for:

<img rel='Gallery1'>
<img rel='Gallery1'>
<img rel='Gallery2'>
<img rel='Gallery2'>
<img rel='Gallery3'>
<img rel='Gallery3'>

If I change the rel attribute to anything except for 'autoGallery', clicking on the image just opens the image into a new window.

Answer 1

I had the same problems with Fancybox 3 - using rel="gallery" and data-fancybox-group="gallery" didnt work.

Found this codepen / fiddle that made it work, by adding .attr('data-fancybox', 'gallery');

https://codepen.io/anon/pen/EwpOxE?editors=1010