Crea una Galería de Imágenes Responsive + Modal + Carrusel con JavaScript, CSS Flexbox, y HTML. 

Me funciono muy bien, con unas pequeñas diferencias de estilo pero lo que mas necesitaba era el Js, muchas gracias por gran aporte.

Felicidades! Gran tutorial , funciona todo a la perfección! Tengan cuidado al ir escribiendo el código , el mínimo error hace que tengas que volver a repasarlo entero!

LexterXPS muchas gracias por compartir este excelente trabajo, realmente aprecio varias cosas de tu video: la sencillez y claridad del codigo haciendo facil cosas que tienen cierta complejidad, el uso de vanilla evitando incluir pesadas librerias cuando no es necesario, y por sobre todas las cosas tu codigo funciona! Ojala puedas seguir subiendo este tipo de material con css y js, seria genial si hicieras algun tipo de animacion de botones o texto al llegar a determinado punto al scrollear en una pagina. Te dejo un apreton de manos y te deseo exito con tu canal. Saludos desde Montevideo, Uruguay!

Excelente vídeo, aprecio mucho el trabajo que hiciste. Seria grandioso que anexaras el código fuente o un preview del proyecto

Anda perfecto, era justo lo que estaba buscando! Muchas gracias

Te amo viejo, un errorcito cambia todo, no lo puedo creer!!!

Les dejo el codigo de JS completo y probado, incluye el cierre del modal que no se menciona en el video: document.addEventListener('DOMContentLoaded', function() { let imagenes = [ { img: '......' }, { img: '......' }, { img: '.......' }, ]; let contador = 0 const contenedor = document.querySelector('.slideshow'); const overlay = document.querySelector('.overlay'); const galeria_imagenes = document.querySelectorAll('.galeria img'); const img_slideshows = document.querySelector('.slideshow img'); contenedor.addEventListener('click', function(event) { let atras = contenedor.querySelector('.atras'), adelante = contenedor.querySelector('.adelante'), img = contenedor.querySelector('img'), tgt = event.target if (tgt == atras) { if (contador > 0) { img.src = imagenes[contador - 1].img contador-- } else { img.src = imagenes[imagenes.length - 1].img contador = imagenes.length - 1 } } else if (tgt == adelante) { if (contador < imagenes.length - 1) { img.src = imagenes[contador + 1].img contador++ } else { img.src = imagenes[0].img contador = 0 } } }) Array.from(galeria_imagenes).forEach(img => { img.addEventListener('click', event => { const imagen_seleccionada = +(event.target.dataset.imgMostrar) img_slideshows.src = imagenes[imagen_seleccionada].img contador = imagen_seleccionada overlay.style.opacity = 1 overlay.style.visibility = 'visible' }) }) var span = document.getElementsByClassName("btn_cerrar")[0]; span.onclick = function() { overlay.style.visibility = "hidden"; } })

Muchas gracias por el tutorial , me ha sido de gran ayuda !

Muchas gracias 😁, este es uno de los mejores tutoriales acerca de como crear una galería de imágenes que he visto en RU-vid. Te has ganado una nueva suscriptora ʕ•́ᴥ•̀ʔっ

Y así es como luce la magia en el mundo real, justo lo que buscaba

Un grandísimo trabajo ! la galería es estéticamente muy buena y para los que somos principiantes, tu forma de explicar es muy accesible. Se me resiste el javascript, es la primera vez que lo utilizo y no consegí hacerlo funcionar todavía a pesar de haber revisado varias veces el código (algo hago mal). También echo de menos un texto que acompañe a la imagen al abrirse en el modal, algo así como el titulo, o cómo se hizo...En cualquier caso te animo a seguir, tu trabajo es muy bueno y puedes contarme entre tus suscriptores. Un fuerte abrazo desde España !!

Si se puede chavos solo es prestar atención en la redacción

alguien que me pase el código fuente mas de 6 hrs y no me sale me cargar el modal pero la img no :(

Oye bro, me puedes pasar el codigo fuente, te quedo re facheroo!! ;)

Ahora, lo chulo es que el carrusel fuera alimentado por una función que leyera los jpgs del directorio, los guardara en un array y generara los divs del html dinamicamente. Seria posible? En C lo sabría hacer, pero en esto que soy muy nuevo no tengo ni idea!!

Si quisiera hacer un div vertical a la izq. para el menú con los tag ? no me sale el css. Se muy poco de css 😥 Despues viene el js que tambien se muy poco. No entiendo como pasar variables. 2 div pero que la galeria es un include que se carga dependiendo el tag.

hola muchas gracias por compartir tus conocimientos, lo realice tal cual como el video pero no me abre el solo me muentra la galeria no corre el js

Hola qué tal, excelente video, el mejor que vi en este tema, te felicito. Mi duda es cómo hacer el código Javascript para una sola imagen y no para una galeria

una pregunta es que cada que quiero agregar los botones de atras y adelante no me aparecen, sabe por que

Resolvi el error. Pero aparecio otro. en el video en el fichero *.js declara el array de imagenes así: {img:'/img/25.jpg'} . Pero no aparecia la imagen he tenido de poner el path absoluto. Tampoco valia un relativo desde el directorio js {img: '../img/25.jpg'}. ¿Alguna idea?

Buenisimo locooo me quedo excelente pero no funciona la x para quitar el modo amplio de la imagen cuando le das click

¡Hola!, excelente video, ¿a esta galería de imágenes se le podría añadir un formulario de carga de imágenes para que al subirlas se añadieran a esta galería?, tienes mi like y mi suscripción....graciass

hay uno que si me funciona que es el de la izquierda pero el de la derecha sigue arriba ¿que hago? xd

Hola a todos, a pesar de mirar y revisar no entiendo el error que me da javascript. Me indica error unknow parsing token > En esta linea claro: Array.from(galeria_imagenes).forEach(img => { A pesar de que leo, no veo el motivo del error. Una ayudita.

Hola podrias pasarme el codigo llevo horas y no logro hacerlo por favor

subi el codigo porfaa

alguien tiene todo el codigo funcional? en el modal no me quiere aparecer la imagen :(

No me cargan las imágenes en el overlay, me sale el icono de un archivo img pero no enseña la imagen.

Amigo una pregunta todo me funciona menos al poner siguiente en la imagen eh copiado todo tal cual pero no me funciona al dar siguiente o retroceder (atras o adelante no me funcionan JavaScript

Hola tengo un problema, resulta que si me funciona la galeria, pero yo queria hacer varias galerias con distintas imagenes, pero wordpress solo me reconoce un archivo js. Alguien sabe que puedo hacer? Soy principiante. Ayuda :(