灯箱 - 触发器库

Question

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

<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

您有两次图库中图片的链接，第一个图标是您想要的图标。您需要使用相同的href删除副本。

删除此链接：

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