Una galería de caja de luz se usa básicamente para ver las imágenes de la galería en detalle específicamente. Puede codificar el JavaScript para hacerlo, pero también podemos usar algunos JS y CSS descargados. En este artículo, descargaremos el lightbox y adjuntaremos los archivos JS y CSS a nuestro código. Para nuestra propia satisfacción de diseño, también podemos usar el código CSS como queramos. Dividiremos la tarea en tres secciones. En la primera sección, crearemos la estructura, en la segunda sección agregaremos algo de CSS para nuestro propio propósito. En la última sección, vincularemos los archivos JS y CSS descargados.
Tenemos que descargar el lightbox, podemos descargarlo desde el enlace: https://github.com/lokesh/lightbox2/releases
Creación de estructura: en esta sección, codificaremos solo en HTML para crear una galería HTML normal.
- Código 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>
Estructura de diseño: en esta sección, agregaremos algunas propiedades de CSS para que la galería de imágenes sea atractiva.
- Código 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>
Solución final: en esta sección, debe vincular el archivo CSS y JS descargado a su código. Simplemente puede vincular el archivo descargado descomprimiendo el archivo. Para el archivo CSS, use la etiqueta <link> con el atributo href para la dirección de CSS y para el archivo JS use la etiqueta <script> con el atributo src para el código. Por último, tenemos que poner el atributo data-lightbox=”mygallery” dentro de la etiqueta <a> . El botón siguiente y anterior se adjuntarán automáticamente durante la conexión del archivo JS.
- Código definitivo:
HTML
<!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>
- Producción:
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA