I have a question regarding fancybox galleries. I used fancybox on a website am developing to display 3 galleries on one page. I have 3 pictures and i want when clicked on one to display a series of pictures connected to that picture. So every picture gives a different photo gallery. I succeeded to do so, but the only problem is that all the galleries are connected, so when u pres next in the gallery it doesnt stop, but it keeps going in circle showing all the pictures from all 3 galleries.
<div class="projects">
<ul>
<li><a href="images/Appetit_01.jpg" class="fancybox" rel="gallery" title="Appétit-Kitchen Utencil Set">
<img src="images/project_1.png" class="img_projects" alt="appetit project"></a>
<a href="images/Appetit_04.jpg" class="fancybox" rel="gallery" title="Appétit-Kitchen Utencil Set"></a>
<a href="images/Appetit_05.jpg" class="fancybox" rel="gallery" title="Appétit-Kitchen Utencil Set"></a>
<a href="images/Appetit_10.jpg" class="fancybox" rel="gallery" title="Appétit-Kitchen Utencil Set"></a>
<a href="images/Appetit_11.jpg" class="fancybox" rel="gallery" title="Appétit-Kitchen Utencil Set"></a>
<a href="images/Appetit_15.jpg" class="fancybox" rel="gallery" title="Appétit-Kitchen Utencil Set"></a>
</li>
<li><a href="images/IVflow1.jpg" class="fancybox" rel="gallery" title="IV Flow Regulator">
<img src="images/project_2.png" class="img_projects" alt="iv flow project"></a>
<a href="images/IVflow2.jpg" class="fancybox" rel="gallery" title="IV Flow Regulator"></a>
<a href="images/IVflow3.jpg" class="fancybox" rel="gallery" title="IV Flow Regulator"></a>
<a href="images/IVflow4.jpg" class="fancybox" rel="gallery" title="IV Flow Regulator"></a>
<a href="images/IVflow5.jpg" class="fancybox" rel="gallery" title="IV Flow Regulator"></a>
</li>
<li><a href="images/Baby_1.jpg" class="fancybox" rel="gallery" title="Mom & Baby, Baby Shampoo Bottle">
<img src="images/project_3.png" class="img_projects" alt="mom and baby shampoo"></a>
<a href="images/Baby_2.jpg" class="fancybox" rel="gallery" title="Mom & Baby, Baby Shampoo Bottle"></a>
<a href="images/Baby_3.jpg" class="fancybox" rel="gallery" title="Mom & Baby, Baby Shampoo Bottle"></a>
<a href="images/Baby_4.jpg" class="fancybox" rel="gallery" title="Mom & Baby, Baby Shampoo Bottle"></a>
<a href="images/Baby_5.jpg" class="fancybox" rel="gallery" title="Mom & Baby, Baby Shampoo Bottle"></a>
</li>
</ul>
</div>
Can somebody help me please how to display this galleries separately. So, when clicked, only the relevant pictures to show in the gallery, not all of them.