fancybox 两张图片同时显示 window

Question

我有一个图库，图像中包含其他图像。因此，在单击图像缩略图后，我想查看完整尺寸的缩略图图像和其他未显示在图库中的图像，因为它们只是该主图像的一部分。此图像将通过滚动到达，并将与主图像显示在同一 window 中。

现在我有这样的代码（点击缩略图后有一张图片）：

<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

所以，基本上，您是在要求双向导航（例如，二维），但我从来没有偶然发现可以完全支持它的脚本。

您可以在主图像下方显示其他图像，但它们不会具有相同的功能（例如，zooming/dragging/etc），或者您可以将它们显示为内联元素（显然，不会有与图像相关的功能）。

fancybox 两张图片同时显示 window

fancybox two images shown at the same window

javascript

fancybox

bootstrap-4