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

时间:2018-05-31 16:57:08

标签: javascript bootstrap-4 fancybox

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

enter image description here 现在我有这样的代码(点击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>

1 个答案:

答案 0 :(得分:1)

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

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