英文 | https://www.geeksforgeeks.org/how-to-create-image-lightbox-gallery-using-html-css-and-javascript/?ref=rp
翻译 | web前端开发
你可以对JavaScript进行编码，但是我们也可以使用一些下载的JS和CSS。在本文中，我们将JS和CSS文件附加到我们的代码中。为了使我们自己的设计更好，我们还可以修改CSS代码。
我们将任务分为三步。
在第一步，创建结构；第二步，根据自己的目的添加需要的CSS；在最后一部分中，我们将链接下载的JS 和 CSS文件。
创建结构：在本部分中，我们将仅使用HTML进行编码以创建普通的HTML。
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Lightbox Gallery</title>
</head>
<body>
<h2>GeeksforGeeks</h2>
<b>A Computer Science Portal for Geeks</b>
<div class="gallery">
<a href=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142254/html9.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143104/html10.png">
</a>
<a href=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142245/CSS8.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143101/CSS9.png">
</a>
<a href=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142240/Bootstrap5.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143058/Bootstrap6.png">
</a>
<a href=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142257/JavaScript2.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143106/JavaScript3.png">
</a>
<a href=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142303/jquery.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143108/jquery4.png">
</a>
<a href=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142309/php7.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143112/php8.png">
</a>
</div>
</body>
</html>
通过CSS设计结构：在本部分中，我们将添加一些CSS属性以使图像具有吸引力。
CSS代码如下：
<style>
body {
text-align: center;
}
h2 {
color: green;
}
.gallery {
margin: 10px 40px;
}
.gallery img {
width: 200px;
height: 50px;
transition: 1s;
padding: 5px;
}
.gallery img:hover {
filter: drop-shadow(4px 4px 6px gray);
transform: scale(1.1);
}
</style>
最终，在这一部分中，你必须将下载的CSS和JS文件链接到你的代码中。你可以通过解压缩文件来简单地链接下载的文件。对于CSS文件，请使用带有href属性的<link>标记作为CSS的地址，对于JS文件，请使用带有src属性的<script>标记作为代码。
最后，我们必须将data-lightbox =“ mygallery”属性放在<a>标记内。下一个和上一个按钮将在JS文件附加期间自动添加。
最终代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Lightbox Gallery</title>
<link rel="stylesheet"
type="text/css"
href="lightbox2/dist/css/lightbox.min.css">
<script src=
"lightbox2/dist/js/lightbox-plus-jquery.min.js">
</script>
<style>
body {
text-align: center;
}
h2 {
color: green;
}
.gallery {
margin: 10px 40px;
}
.gallery img {
width: 200px;
height: 50px;
transition: 1s;
padding: 5px;
}
.gallery img:hover {
filter: drop-shadow(4px 4px 6px gray);
transform: scale(1.1);
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<b>A Computer Science Portal for Geeks</b>
<div class="gallery">
<a href=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142254/html9.png"
data-lightbox="mygallery">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143104/html10.png">
</a>
<a href=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142245/CSS8.png"
data-lightbox="mygallery">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143101/CSS9.png">
</a>
<a href=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142240/Bootstrap5.png"
data-lightbox="mygallery">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143058/Bootstrap6.png">
</a>
<a href=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142257/JavaScript2.png"
data-lightbox="mygallery">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143106/JavaScript3.png">
</a>
<a href=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142303/jquery.png"
data-lightbox="mygallery">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143108/jquery4.png">
</a>
<a href=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142309/php7.png"
data-lightbox="mygallery">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318143112/php8.png">
</a>
</div>
</body>
</html>
最终效果：
