灯箱 - 触发图库

Question

我有一个灯箱画廊，我有它，所以它显示所有图像，用户可以点击其中任何一个来触发画廊。现在，当 window 太小时，我有一个图标代替了图库。当用户点击它时，我想触发厨房，目前当我点击图标时，画廊的第一张图片出现，但它出现了两次。那么如何在第一张图片出现两次的情况下触发画廊。这是我的代码：第一项是图标。

<div class="design-centre-gallery">
                    <a href="images/design-centre-gallery/1.jpg" data-lightbox="design-centre-gallery"><i class="fa fa-picture-o design-centre-gallery-btn"></i></a>
                    <a href="images/design-centre-gallery/1.jpg" data-lightbox="design-centre-gallery"><img src="images/design-centre-gallery/1.jpg" /></a>
                    <a href="images/design-centre-gallery/2.jpg" data-lightbox="design-centre-gallery"><img src="images/design-centre-gallery/2.jpg" /></a>
                    <a href="images/design-centre-gallery/3.jpg" data-lightbox="design-centre-gallery"><img src="images/design-centre-gallery/3.jpg" /></a> 
                    <a href="images/design-centre-gallery/4.jpg" data-lightbox="design-centre-gallery"><img src="images/design-centre-gallery/4.jpg" /></a> 
                    <a href="images/design-centre-gallery/5.jpg" data-lightbox="design-centre-gallery"><img src="images/design-centre-gallery/5.jpg" /></a> 
                    <a href="images/design-centre-gallery/6.jpg" data-lightbox="design-centre-gallery"><img src="images/design-centre-gallery/6.jpg" /></a> 
                    <a href="images/design-centre-gallery/7.jpg" data-lightbox="design-centre-gallery"><img src="images/design-centre-gallery/7.jpg" /></a> 
                    <a href="images/design-centre-gallery/8.jpg" data-lightbox="design-centre-gallery"><img src="images/design-centre-gallery/8.jpg" /></a> 
                    <a href="images/design-centre-gallery/9.jpg" data-lightbox="design-centre-gallery"><img src="images/design-centre-gallery/9.jpg" /></a> 
                    <a href="images/design-centre-gallery/10.jpg" data-lightbox="design-centre-gallery"><img src="images/design-centre-gallery/10.jpg" /></a>   
                    <a href="images/design-centre-gallery/11.jpg" data-lightbox="design-centre-gallery"><img src="images/design-centre-gallery/11.jpg" /></a>   
                    <a href="images/design-centre-gallery/12.jpg" data-lightbox="design-centre-gallery"><img src="images/design-centre-gallery/12.jpg" /></a>   
                    <a href="images/design-centre-gallery/13.jpg" data-lightbox="design-centre-gallery"><img src="images/design-centre-gallery/13.jpg" /></a>   
                    <a href="images/design-centre-gallery/14.jpg" data-lightbox="design-centre-gallery"><img src="images/design-centre-gallery/14.jpg" /></a>   
                    <a href="images/design-centre-gallery/15.jpg" data-lightbox="design-centre-gallery"><img src="images/design-centre-gallery/15.jpg" /></a>   
                    <a href="images/design-centre-gallery/16.jpg" data-lightbox="design-centre-gallery"><img src="images/design-centre-gallery/16.jpg" /></a>   
                    <a href="images/design-centre-gallery/17.jpg" data-lightbox="design-centre-gallery"><img src="images/design-centre-gallery/17.jpg" /></a>   
                    <a href="images/design-centre-gallery/18.jpg" data-lightbox="design-centre-gallery"><img src="images/design-centre-gallery/18.jpg" /></a>   
                </div>

Answer 1

您对图库中的图片有两次 link，第一次是带有您想要的图标。您需要使用相同的 href 删除之后的重复项。

删除此 link:

  <a href="images/design-centre-gallery/1.jpg" data-lightbox="design-centre-gallery"><img src="images/design-centre-gallery/1.jpg" /></a>

Answer 2

我通过删除图标解决了这个问题：

<a href="images/design-centre-gallery/1.jpg" data-lightbox="design-centre-gallery"><i class="fa fa-picture-o design-centre-gallery-btn"></i></a>

并使用 CSS 媒体查询更改 first-child 的外观：

.design-centre-gallery a:first-child {
    display:block;
    text-align:right;
    padding:10px;
    font-family:FontAwesome;
    font-style:normal;
    font-weight:normal;
    line-height:1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.design-centre-gallery a:first-child:before {
    content:"\f03e";
    font-size:58px;
    color:#FFF;
}

.design-centre-gallery a:first-child img {
        display: none;
        float:right;
        padding:10px;
}

.design-centre-gallery a img{
    display: none;
}

@media (min-width: 768px){

    .design-centre-gallery a:first-child:before {
        content:"";
        font-size:58px;
        color:#FFF;
    }


    .design-centre-gallery a:first-child {
        display:initial;
        text-align:right;
        padding:0px;
        font-family:initial;
    }

    .design-centre-gallery a img {
        display: inline-block;
    }

    .design-centre-gallery a:first-child img {
        float: none;
        padding:0px;
        display:inline-block;
    }
}

灯箱 - 触发图库

Lightbox - Trigger gallery

lightbox