Home/ Questions/Q 8950903
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T13:32:37+00:00

I’m students studying web design in Korea. I have a question. I’m using fancybox

  • 0

I’m students studying web design in Korea.
I have a question. I’m using fancybox on my personal project.
It’s awesome!! However, I have a problem..

The homepage is simply constructed with like that

Contents
Fancybox image slide1
Contents
Fancybox image silde2

The important thing is slide1 and slide2 is not related.
However, when I click small image of slide1, fancybox shows all of images including slide1 and slide2 images.
I want to show only slide1 images in ‘Fancybox image slide1’.

Please help me!!
I attaching brief HTML source. Thank you!

<script>
$(document).ready(function() {
       $('.fancybox').fancybox();
});
</script>

<body>
   contents<br>
   <div class="fancybox_image_slide1">
   <a class="fancybox" rel="group" href="1_b.jpg"><img src="1_s.jpg"/></a>
   <a class="fancybox" rel="group" href="2_b.jpg" ><img src="2_s.jpg"/></a>
</div>
contents<br>   
<div class="fancybox_image_slide2" >
   <a class="fancybox" rel="group" href="3_b.jpg"><img src="3_s.jpg" /></a>
   <a class="fancybox" rel="group" href="4_b.jpg" ><img src="4_s.jpg"/></a>
</div>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Fancy box uses the rel attribute to handle grouping. Make sure that each group has matching values for the rel attribute.

    <script>
$(document).ready(function() {
    $('.fancybox').fancybox();
});
</script>

<body>
contents<br>
<div class="fancybox_image_slide1">
   <a class="fancybox" rel="slide1" href="1_b.jpg"><img src="1_s.jpg"/></a>
   <a class="fancybox" rel="slide1" href="2_b.jpg" ><img src="2_s.jpg"/></a>
</div>
contents<br>   
<div class="fancybox_image_slide2" >
   <a class="fancybox" rel="slide2" href="3_b.jpg"><img src="3_s.jpg" /></a>
   <a class="fancybox" rel="slide2" href="4_b.jpg" ><img src="4_s.jpg"/></a>
</div>
</body>
    • 0