Search code examples
javascriptbootstrap-4fancybox

fancybox two images shown at the same window

I have a gallery and images contains other images. So After click on image thubnail I want to see full size of thubnail image and other images which are not represent on gallery because they are just part of that main image. This images will be reached trough scrolling and will be shown in same window with main image.

enter image description here Now i Have code like this(with one image after click on thubnail) :

<div class="col-3 thumb">
    <a data-fancybox="gallery" href="1.jpg" class="fancybox" data-caption="Description 1">
        <div class="hovereffect">
            <img class="img-fluid" src="1.jpg" alt="">
                <div class="overlay">
                    <h2>Tittle 1</h2>
                </div>
            </div>
        </a>
</div>  
    <div class="col-3 thumb">
    <a data-fancybox="gallery" href="2.jpg" class="fancybox" data-caption="Description 2">
        <div class="hovereffect">
            <img class="img-fluid" src="2.jpg" alt="">
                <div class="overlay">
                    <h2>Tittle 2</h2>
                </div>
            </div>
        </a>
    </div>  
    <div class="col-3 thumb">
    <a data-fancybox="gallery" href="3.jpg" data-caption="Description 3">
        <div class="hovereffect">
            <img class="img-fluid" src="3.jpg" alt="">
                <div class="overlay">
                    <h2>Tittle 3</h2>
                </div>
            </div>
        </a>
    </div>

Update

Solve this with id:

<a data-fancybox="gallery" href="#img_1" class="fancybox">
<div style="display:none">     
    <div id="img_1"">  
        <div class="container">

            <div class="row">
                <div class="col-7" >
                    <a data-fancybox="gallery1" href="1.jpg" class="fancybox">
                        <img class="img-fluid" src="1.jpg" />
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
Solution

  • So, basically, you are asking for two way navigation (e.g., two dimensional), but I have never stumbled upon such script that would fully support that.

    You can display additional images under the main image, but they will not have the same functionality (e.g., zooming/dragging/etc) or you can display them as inline elements (obviously, there would be no image-related functionality).