How to make fancybox slider with main image?

  • 0
    Hey. Faced a problem.
    I have the following conclusion. (See image)

    There is a main picture and 2 or more small ones.
    I need to implement the following algorithm:
    1. when clicking on small img, Big img changed to the image that was clicked.
    There are no problems here, I pull up src by attribute.
    2. When I clicked on Big IMG, I got a fensibox with a gallery.
    That is, if I have 2 small img then I could turn over.
    But by hanging a fensibox on a BIG IMG he makes a fensibox 1 image.

    Here we need to somehow integrate rel = 'group', but I don’t know how to do it correctly.

    <div class="main-img">
                    <a class="fancybox"    href="big-img.png">
                        <img  src="small-img.png" alt="">
                    </a>
                </div>
                <div class="catalog-element__gallery gallery">
                                     <a class="fancybox"    href="big-img.png">
                        <img  src="small-img.png" alt="">
                    </a>
                     <a class="fancybox"    href="big-img2.png">
                        <img  src="small-img2.png" alt="">
                    </a>                   
                </div>
    JavaScript Anonymous, Jun 15, 2019

  • 0 Answers
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!