fancybox два изображения, показанные в том же окне

Question

У меня есть галерея, и изображения содержат другие изображения.Поэтому после нажатия на изображение миниатюры я хочу увидеть полный размер изображения миниатюр и другие изображения, которые не представлены в галерее, потому что они являются лишь частью этого основного изображения.Эти изображения будут доступны при прокрутке и будут отображаться в том же окне, что и основное изображение.

Теперь у меня есть такой код (с одним изображением после нажатия на миниатюру):

<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>  

Обновление

Решите это с 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>

Answer 1

Итак, в основном вы запрашиваете двустороннюю навигацию (например, двухмерную), но я никогда не сталкивался с таким сценарием, который бы полностью это поддерживал.

Вы можете отобразить дополнительные изображения под основным изображением, но они не будут иметь одинаковую функциональность (например, масштабирование / перетаскивание / и т. д.), или вы можете отобразить их как встроенные элементы (очевидно, не будет никакой функциональности, связанной с изображением).