🟡 Galería de imágenes con HTML CSS & JavaScript

[@enoz6470]

Recuerdo cuando mi profesor nos encargó esto de proyecto y fue para mí, un ardúo dolor de cabeza ya que no existían vídeos de este tipo, me iba a dar por vencido hasta que buscando en lo más profundo de YT, encontré tu video y gracias a ti pude pasar la materia!

[@elweonweandolaweafome]

Esas dificultades hacen que no se te olvide lo aprendido. Yo estoy aquí por la misma razón, solo que no me lo encarga un profesor, sino yo mismo para hacer un proyecto. Recuerda que la obligación mata al gusto :D

[@CriptoTube666]

Me salvaste en un proyecto de la escuela te ganaste mi sub

[@alexalvarenga1690]

Excelente video, he pasado hora buscando algo asi de explicativo y paso por paso pero no se encuentra, mucha calidad en tu contenido

[@G_T_L]

Muchas gracias por la explicación no encontraba la forma de hacerlo, sigue así, me suscribo a tu canal

[@p4selket]

Muchísimas gracias! Es una aplicacion bella y sencilla, y bien explicada, y justo vas al grano de lo que hay que hacer! Excelente servicio! :)

[@danicodex]

Gracias a ti Gisel!, estaré realizando un post sobre tu comentario en mi Instagram, no olvides de pasarte por allá

[@poppylipops]

Muy Bueno, muy bien explicado. Que genio 😍

[@Natahsz]

gracias man me ayudo tu tuto, y aprendi como funciona el reference y eso gracias

[@danicodex]

🔴 Apóyame con un granito aquí: www.paypal.com/donate/?hosted_button_id=3X6NV69DTXGZE

[@goldenz7282]

GRACIAS!!! ME SALVASTE TENIA QUE PRENSENTAR ESTO EN UNA HORA GRACIAS!!

[@alexisrodriguez2823]

Excelente video!

[@hugocangi6214]

SALUDOS BUENA SEMANA,

[@danielchavez5514]

Muchas gracias por tu tiempo a enseñar este tutorial

[@danicodex]

De nada !! 🙂

[@xoce7269]

Excelente video, gracias!!!

[@alojatedemente]

Muy buen video amigo una duda y si agregue las imagenes en css con backgraound-image se puede hacer lo mismo que tu hiciste ?? o es diferente ?

[@carolcondoritorres8272]

Graciaaaaas me salvaste!!!!

[@gonzalezjose6211]

seria buenísimo que mostrara como incrustar videos también

[@DiegoForerOficial]

Muchas gracias!

[@antonioarias8489]

Beun video me sirvio de mucho

[@danicodex]

Gracias a ti :)

[@-YANNI-]

que crack bro te amo

[@user-mx6sb2vk9p]

me encanto tu video 💟!!!

[@alimateocamposmartinez5987]

Gran video!!! estaría cool que tuviera flechas para cambiar de imagen una vez que está grande :D

[@danicodex]

Así es ! Te lo dejo como reto 😉☺️☺️

[@alimateocamposmartinez5987]

@@danicodex Rebasado el Dani

[@marcoantoniovalencia8694]

@@danicodex 🤣 se notó el f*ck bien grande que le plantaste en la cara al tipo

[@paubelve1350]

uy si estaria buenisimo una segunda parte de este video con esa info!!!

[@paubelve1350]

@@danicodex nos podrias tirar una punta? jeje

[@totimang]

Muy bueno, consulta como podria hacer si le doy un nombre a las imagenes en alt="nombre" y quiero que al darle click en la imagen tambien salga referenciado el nombre. Como se podria hacer? Gracias

[@chocolatedemani7451]

muy bueno

[@yosmanguanare7722]

Gracias por todo.

[@danicodex]

Gracias pa a ti por pasarte por acá

[@miguelmondragon1366]

exelente amigo

[@maurosoto8366]

segui cada paso que esta en el video y llego a una parte y cuando quise compilarlo para ejecutarlo en el navegador me sale error que no puedo ver me salio localhost8080 pero ya trabaje con otros de tus videos lo cual me parece raro

[@bryanpenafielchavez7805]

Hola amigo, muchas gracias por el video, esta excelente, me fue de gran ayuda. Pero me gustaría saber como lo adapto a videos, ¿me puedes ayudar?😁

[@elweonweandolaweafome]

El contexto es un trailer de una pelicula: html: css: .trailer { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10000; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; backdrop-filter: blur(20px); visibility: hidden; opacity: 0; } .trailer.active { visibility: visible; opacity: 1; } .trailer video { max-width: 900px; outline: none; } .trailer .close { position: absolute; top: 30px; right: 30px; cursor: pointer; filter: invert(1); max-width: 32px; } JavaScript: function toggleVideo() { const trailer = document.querySelector('.trailer'); const video = document.querySelector('video'); trailer.classList.toggle('active'); video.currentTime = 0; video.pause(); }

[@bryanpenafielchavez7805]

@@elweonweandolaweafome muchísimas gracias amigo

[@andermv3172]

buen video master

[@danicodex]

Gracias !! 🙂

[@Solaris2es]

sería genial crear una galería con opción de subir imágenes y que queden guardadas en base de datos

[@martafernandez3097]

Muy buen tuto

[@danicodex]

Gracias :))

[@elweonweandolaweafome]

Gracias :D

[@dragpagsh6322]

Me salvaste el culo y aprendi muchisima gracias

[@danicodex]

Gracias a ti por pasarte por acá 😀

[@Baldur-Dev-Arts]

Muy buen video bro, me podrias ayudar con un detalle? Resulta que puse algunas imagenes en 2k y al abrir la imagen sobresale de la pagina total y no se puede apreciar muy bien. ¿Como lo puedo hacer para que se vea la imagen con un tamaño predefinido?

[@danicodex]

Dale un width a tu imagen

[@pilarmolnar888]

Hola, que tal?, no me funciona la parte de java, y esta bien referenciado... ¿Sabes por que podría ser?

[@ElStormツ]

Hola bro, quería saber si me podías ayudar, por que tengo la duda de como hacer para agregar también texto y que se vea al lado de la imagen, ósea que cuando de clic a cualquier imagen la habrá pero al lado también un pequeño texto, me podrías ayudar por fas 😩

[@jaimelopez4080]

Si pudiste bro ?

[@elweonweandolaweafome]

debes encerrar al texto en otro contenedor y por pocisión puedes sobreponerlo, position: absolute; bottom: 0; por ejemplo xd

[@juliancardozo8494]

Hola hermano, muchisimas gracias por el aporte. Consulta, cada vez q actualizo la pagina me sale la primer imagen abierta y la tengo q cerrar. Porq sucede?

[@marcoantoniovalencia8694]

tienes que revisar el tutorial

[@metalorius]

Vaya me sirvió, pero tengo un problema, a la hora ver la X aparece al lado derecha de la imagen y no en la derecha arriba.... algun consejo y muchas gracias, ten un buen dia.

[@danicodex]

Revisa tu código css puede ser que haya un error de posicionamiento

[@metalorius]

@@danicodex vaya YT sin avisarme siempre de las respuestas..... si eso lo he revisado muchas veces, ya que lo estoy integrando a una pagina que estoy haciendo, pero gracias buen amigo n.n un abrazo.

[@palomafernandez6935]

Me sirvio mucho, sabes como puedo ponerle a este codigo una foto como fondo de la galeria?

[@danicodex]

Puedes usar la propiedad de background-image

[@gabrielavelez4338]

hola buen video ..me podrias ayudar diciendome como podría colocar un enlace a cada imagen ya maximizada para que me lleve a otra pagina. muchas gracias

[@danicodex]

Hola !! , Puedes englobar tus imágenes dentro de una etiqueta

[@gabrielavelez4338]

@@danicodex lo hice pero al darle click a la imagen en vez de maximizarse me lleva a otra pagina y lo que yo quiero es que cuando le de click se maximice y dentro de la imagen maximizada ponerle un enlace a otra pagina..llevo dias intentandolo y no puedo ..por favor ayudame

[@danicodex]

Lo que puedes realizar es añadir la etiqueta a tu id = fulImg en otras palabras englobarla a ese contenedor , pero no colocarle el atributo href, la incorporaras dinámicamente con Javascript. Entonces para referenciar cuando tu imagen ya está maximizada simplemente agregaas una condicional en la línea 9 de tu archivo javascript , el condicional evaluará si (fulImg.style.display = "flex" ) = True en caso de serlo, dentro agregas un addEventListener con el evento click y dentro de eso agregas el link a tu etiqueta a

[@danicodex]

Si todavía no lograste resolver tu problema me puedes escribir al instagram para ayudarte con tu código

[@gabrielavelez4338]

@@danicodex muchas gracias!

[@VladimirSnape11]

excelente explicación mi hermano, serias tan amable de pasarme el código de ser posible ???

[@martapitadelgado6425]

Hola, muy interesante el video pero cómo se crea un archivo javascript porque sin eso no me sale la galeria, gracias

[@danicodex]

Añade tu archivo con el nombre de script.js

[@danicodex]

El nombre puede ser cualquiera lo que importa es la extensión

[@GameCify_YT]

De hecho, Tienes el codigo?

[@danicodex]

Puedes descargarlo aquí github.com/DaniCodex/Galeria_de_Imagenes

[@GameCify_YT]

@@danicodex Gracias, que dios te bendiga

[@jesuscaraballo7705]

@@danicodex te amo

[@martapitadelgado6425]

¿alguien sabe cómo puedo hacerlo?

[@danicodex]

¿En que te puedo ayudar?

[@isaak3288]

nunca se me quito la raya de encima del titulo

[@Eragon09]

buen tutorial men, ahora el tema es que al abrir la pagina desde mi pc funciona perfecto pero a la hora de subirlo al host no me funciona este codigo js tengo otros codigos que si funcionan perfectamente pero este me tira esto openfullimg is not defined at HTMLImageElement.onclick alguna ayuda? lo subi con git y git hub al host lo raro es que me anda perfecto cuando lo abro desde live server o el html.

[@danicodex]

Hola agu agu, revisa tu código js nuevamente, y verifica que tu variable openFullimg esté declarado. Si sigues sin poder solucionar me puedes hablar a mi página de Facebook para poder ayudarte con tu código

[@Eragon09]

@@danicodex si lo delcare pero con queryselector porque cree un class nomas voy a probar con id como el vieo gracias por responder