Inicio
Buscar
Ingresar
Registrarse
Starfield: el juego que revolucionará el espacio y la tecnología
Hack x Crack - Comunidad de Seguridad informática
»
Programación
»
Programación Web
»
Galería de imágenes con efecto Lightbox [HTML [CSS] [JS]
Imprimir
Páginas: [
1
]
Ir Abajo
Autor
Tema: Galería de imágenes con efecto Lightbox [HTML [CSS] [JS] (Leído 7959 veces)
R3LI4NT
{ L4 } Geek
Mensajes: 396
El poder del usuario radica en su ANONIMATO.
Galería de imágenes con efecto Lightbox [HTML [CSS] [JS]
«
en:
Octubre 25, 2021, 05:42:15 am »
HTML:
Código: Text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Galeria</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="lightbox/lightbox.min.css">
</head>
<body>
<div class="contenido">
<h1>Galería de Imágenes</h1>
</div>
<div class="galeria">
<a href="images/1.jpg" data-lightbox="mygallery" data-title="Wallpaper"><img src="images/1.jpg" alt=""></a>
<a href="images/2.jpg" data-lightbox="mygallery" data-title="Wallpaper"><img src="images/2.jpg" alt=""></a>
<a href="images/3.jpg" data-lightbox="mygallery" data-title="Wallpaper"><img src="images/3.jpg" alt=""></a>
<a href="images/4.jpg" data-lightbox="mygallery" data-title="Wallpaper"><img src="images/4.jpg" alt=""></a>
<a href="images/5.jpg" data-lightbox="mygallery" data-title="Wallpaper"><img src="images/5.jpg" alt=""></a>
<a href="images/6.jpg" data-lightbox="mygallery" data-title="Wallpaper"><img src="images/6.jpg" alt=""></a>
<a href="images/7.jpg" data-lightbox="mygallery" data-title="Wallpaper"><img src="images/7.jpg" alt=""></a>
<a href="images/8.jpg" data-lightbox="mygallery" data-title="Wallpaper"><img src="images/8.jpg" alt=""></a>
</div>
<script src="lightbox/lightbox-plus-jquery.min.js"></script>
</body>
</html>
CSS:
Código: CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*
{
padding
:
0
;
margin
:
0
;
box-sizing
:
border-box
;
font-family
:
'Poppins'
,
sans-serif
;
}
body
{
background
:
#0B0D11
;
height
:
100vh
;
width
:
100%
;
}
.contenido
{
width
:
100%
;
text-align
:
center
;
}
.contenido
h1
{
color
:
#f2f2f2
;
margin-top
:
50px
;
letter-spacing
:
1px
;
}
.galeria
{
position
:
relative
;
top
:
10%
;
width
:
80%
;
margin
:
50px
auto
50px
;
display
:
grid
;
grid-template-columns
:
repeat
(
auto-fit
,
minmax
(
240px
,
1fr
)
)
;
gap
:
20px
;
}
img
{
transition
:
all 0.2s ease-in-out
;
width
:
250px
;
border-radius
:
5px
;
border
:
1px
solid
#2A2F37
;
border-radius
:
100px
/
10px
;
-webkit-box-shadow
:
0
10px
6px
-6px
#000
;
-moz-box-shadow
:
0
10px
6px
-6px
#000
;
box-shadow
:
0
10px
6px
-6px
#000
;
}
img
:hover
{
opacity
:
.6
;
transform
:
scale
(
1.1
)
;
box-shadow
:
none
;
}
Es importante que descarguen los archivos para aplicar el efecto Lightbox, dentro se encuentra el código JavaScript y los iconos de close, next, loading, prev.
Archivos:
https://www.mediafire.com/folder/8hr92enx1itmy/Galeria
En línea
No contesto dudas por MP, si las tienes, las planteas en el foro.
Road To Hacking v3:
https://github.com/R3LI4NT/road-to-hacking
Miguelzangorano
{ L0 } Ñuub
Mensajes: 4
Re:Galería de imágenes con efecto Lightbox [HTML [CSS] [JS]
«
Respuesta #1 en:
Enero 21, 2022, 09:17:32 pm »
Me mola bastante!! Da gusto ver y sacar ideas
En línea
Imprimir
Páginas: [
1
]
Ir Arriba
Hack x Crack - Comunidad de Seguridad informática
»
Programación
»
Programación Web
»
Galería de imágenes con efecto Lightbox [HTML [CSS] [JS]
Va un mudo y le dice a un sordo: Hack x Crack usa cookies. Pues eso...
OK
Learn more