在 BaguetteBox 中的每个图像下方添加按钮

Question

我有一个使用 BaguetteBox 的灯箱图片库。我需要画廊中的每张图片在下面都有一个下载按钮，就像这样：

这是我的代码： HTML： `

<div class="tz-gallery">

    <div class="row">

        <div class="col-sm-12 col-md-4">
            <a class="lightbox" href="https://www.w3schools.com/css/img_5terre.jpg">
                <img src="https://www.w3schools.com/css/img_5terre.jpg" alt="Bridge">
                <button  style="position: absolute;top: 75%; left: 85%; z-index: 1" class="btn btn-danger btn-xs" ><span class="glyphicon glyphicon-download-alt"></span></button>

            </a>
        </div>
        <div class="col-sm-6 col-md-4">
            <a class="lightbox" href="https://www.w3schools.com/css/img_forest.jpg">
                <img src="https://www.w3schools.com/css/img_forest.jpg" alt="Park">
                <button  style="position: absolute;top: 75%; left: 85%; z-index: 1" class="btn btn-danger btn-xs" ><span class="glyphicon glyphicon-download-alt"></span></button>

            </a>
        </div>
        <div class="col-sm-6 col-md-4">
            <a class="lightbox" href="https://www.w3schools.com/css/img_lights.jpg">
                <img src="https://www.w3schools.com/css/img_lights.jpg" alt="Tunnel">
                <button  style="position: absolute;top: 75%; left: 85%; z-index: 1" class="btn btn-danger btn-xs" ><span class="glyphicon glyphicon-download-alt"></span></button>

            </a>
        </div>
        <div class="col-sm-12 col-md-8">
            <a class="lightbox" href="https://www.w3schools.com/css/img_mountains.jpg">
                <img src="https://www.w3schools.com/css/img_mountains.jpg" alt="Traffic">
                <button  style="position: absolute;top: 75%; left: 85%; z-index: 1" class="btn btn-danger btn-xs" ><span class="glyphicon glyphicon-download-alt"></span></button>

            </a>
        </div>
    </div>

</div>

`

JS：

<script>baguetteBox.run('.tz-gallery');</script>

CSS：

.tz-gallery {
    padding: 40px;
}

.tz-gallery .row > div {
    padding: 2px;
}

.tz-gallery .lightbox img {
    width: 100%;
    border-radius: 0;
    position: relative;
}

.tz-gallery .lightbox:before {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -13px;
    margin-left: -13px;
    opacity: 0;
    color: #fff;
    font-size: 26px;
    font-family: 'Glyphicons Halflings';
    content: '\e003';
    pointer-events: none;
    z-index: 9000;
    transition: 0.4s;
}

.tz-gallery .lightbox:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: rgba(46, 132, 206, 0.7);
    content: '';
    transition: 0.4s;
}

.tz-gallery .lightbox:hover:after,
.tz-gallery .lightbox:hover:before {
    opacity: 1;
}

.baguetteBox-button {
    background-color: transparent !important;
}

.masonry-wrapper {
    padding: 1.5em;
    max-width: 960px;
    margin-right: auto;
    margin-left: auto;
}
.masonry {
    display: grid;
    grid-template-columns: repeat(1, minmax(200px,1fr));
    grid-gap: 10px;
    grid-auto-rows: 0;
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {
    .masonry {
        grid-template-columns: repeat(2, minmax(100px,1fr));
    }
}
@media only screen and (min-width: 1024px) {
    .masonry {
        grid-template-columns: repeat(4, minmax(100px,1fr));
    }
}
.masonry-item, .masonry-content {
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
}
.masonry-item {
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, .3));
    transition: filter .25s ease-in-out;
}
.masonry-item:hover {
    filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, .3));
} 

我尝试在每个图像下方添加按钮，但它只显示在原始图像中。当我打开像上图​​一样的图像时。该按钮不与图像一起显示。

Answer 1

您可以将按钮添加为标题：

baguetteBox.run('.tz-gallery', {
    captions: createCaption
});
function createCaption(element) {
    return '<button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-download-alt"></span></button>';
}