我有一个使用 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));
}
我尝试在每张图片下方添加按钮,但它只显示在原始图片中。当我打开如上图所示的图像时。该按钮不与图像一起显示。
最佳答案
您可以将按钮添加为标题:
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>';
}
关于jquery - 在 BaguetteBox 中的每个图像下方添加按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59254445/