Question

我有一个画廊，图像包含其他图像。因此，点击图像后，我想看到完整尺寸的图像和其他图像，这些图像不在图库中，因为它们只是主图像的一部分。这些图像将通过滚动到达，并将显示在与主图像相同的窗口中。

现在我有这样的代码（点击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>

更新

用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

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

您可以在主图像下显示其他图像，但它们不具有相同的功能（例如，缩放/拖动/等），或者您可以将它们显示为内联元素（显然，没有与图像相关的功能）

fancybox两个图像显示在同一窗口

1 个答案: