javascript - 在图中添加多个缩略图
问题描述
我有一个图形和一个 figcaption,我想要一张图片,当我点击它时,会有更多的缩略图/图片。
我的图:
<!-- Bootstrap CSS -->
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<div class="col-6 col-lg-3">
<figure>
<figcaption>
<h3>project</h3>
<h4>project test</h4>
<a href="img/realisations/imagexl.png" data-lightbox="work" data-title="resume"><img src="https://picsum.photos/300/100" alt="loupe.svg"></a>
</figcaption>
<br>
<img src="https://picsum.photos/300/101" alt="imagexs.jpg">
</figure>
</div>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap 4 JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
谢谢你。
解决方案
您可以这样做的一种方法是将图像的初始显示设置为none
并单击显示它们
$(document).ready(function() {
var MoreImages = document.getElementById("moreImages");
var ShowImages = document.getElementById("showImages");
MoreImages.style.display = "none";
ShowImages.addEventListener("click", function() {
document.getElementById("moreImages").style.display = "";
});
});
img {
height: 150px;
width: 150px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap 4 JS -->
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<figure>
<figcaption>
<h3>project</h3>
<h4>project test</h4>
<span id="showImages"
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</figcaption>
<div class="row" id="moreImages">
<div class="col-4">
<span
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</div>
<div class="col-4">
<span
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</div>
<div class="col-4">
<span
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</div>
</div>
</figure>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>
推荐阅读
- elasticsearch - NEST 6.5.4 for .NET 中脚本的弹性搜索更新 API
- swift - Swift:使用泛型类型参数创建对象数组
- architecture - 软件/应用高级设计
- python - 在 Python 中使用面向对象编程时出现属性错误
- git - 如何提交/推送换行符(LF)到 git 存储库
- javascript - 将 unicode 字符显示为问号的响应 XML
- javascript - 使用纯 JavaScript 将图像插入 Excel
- slack - 提交 slack 对话框(Slack API)时出现连接错误
- c# - MongoDB:具有覆盖 ID 和属性的子类出现问题
- asp.net-mvc-4 - 为 SCA 创建 Stripe Dotnet Checkout 会话