Crea una Galería con Efecto Lightbox Fácilmente con Materialize CSS

En este video aprenderás como hacer una galería de imágenes con efecto lightbox de una forma fácil y rápida usando Materialize CSS.
🚀 Blog de Diseño Web:
www.falconmaste...
⭐ Curso de Diseño Web desde Cero:
www.desarrollo...
⭐ Curso de PHP y MYSQL desde Cero:
www.desarrollo...
⭐ Curso de React y Firebase desde Cero:
www.desarrollo...
⭐ Curso de Bootstrap:
www.desarrollo...
⭐ Curso de Woocommerce:
www.desarrollo...
---
📄 Materialize CSS: materializecss...
📄 Código del Proyecto: github.com/fal...
---
Redes Sociales:
♦ Twitter @falconmasters:
/ falconmasters
♦ Pagina de Facebook:
/ falconmasters

[@FalconMasters]

Con este video llegamos a las 12 semanas publicando video consecutivamente! Si te gusta este tipo de videos y aprecias el esfuerzo en cada video por favor dale manita arriba 👍, eso me motiva mucho a seguir haciendo mas videos!

[@1337Unlucky]

Te di dislike para poder dar like de nuevo.

[@Hablales_alin]

help me please

[@olivaaev4108]

Hola soy nuevo suscriptor tengo un pequeño problema en un sitio web con el sistema HTML, en la página Forumcomunity cuándo hago un tema nuevo y uso etiquetas HTML no las reconoce, a qué refiero ejemplo pongo la etiqueta al principio y otro al final y no lo reconoce cómo una etiqueta sí no que sí aparece y no funciona y eso causa qué no pueda usar el y no se la verdad lo que pasa porque primero uso una app de HTML (SoloLearn) que ahí me reconoce todas las etiquetas y luego cuando lo pasó a está web (Forumcomunity) no lo reconoce, yo lo qué hago es copiar el código completo y luego lo pego y no funciona, en que me equivoco?

[@1337Unlucky]

@@olivaaev4108 99% seguro que la comunidad no detecta HTML y es muy probable que detecte un estilo que se llama Markdown. Markdown solo es un estilo para darle formato al texto y no se vea como texto plano, le da al texto negritas, color, cursivas, insertar imagen, etc. Investiga cómo se escribe e inténtalo en esa comunidad.

[@federicorodolfothomasyanz]

Claro, gracias

[@danielspark128]

Muchas gracias, he comprado tu curso de desarrollo web 100 % recomendable.💖💖💖💖

[@Cibergroup]

Falcon grandiosa galería de lo mejor al final dices que si nos gusto pero a mi parecer no hay palabras para describir este arte tan maravillosa y esa manera en que ejecutas cada etiqueta y diseño.

[@eddyyovanivizcarrapulido3498]

Gracias Falcon gracias a tu canal de youtube y en los cursos de udemy que tienes lo cual los tengo todos me e ayudado mucho en mi carrera decho ya casi voy por el de php y me muero de ganas de llegar en la seccion de como haces un blog desde cero cuenta con todos mis likes en tu canal siempre pulgar arriba

[@jesusfasabifreyre2459]

Gracias Falcon eres un maestro, gracias a ti he aprendido muchas cosas (:

[@FalconMasters]

Muchas gracias, que gusto escuchar que hayas aprendido mucho!

[@luisbazaldua6615]

Termine la practica! Le voy a estar dando mi estilo cambiándole algunas cosas

[@Aliss_nice]

ME SALVASTEE PRO. Gracias por todo lo que hacés eres u genio :))

[@federicorodolfothomasyanz]

Muchas gracias por ayudar aprender, gracias por el codigo

[@proodbykenny]

FalconMasters gracias por la ayuda que nos ha brindado siempre que haces un video yo hago el mismo ejercicio

[@alfredolizcano5770]

Muy buen vídeo Carlos Arturo, eres una gran inspiración para el desarrollo web te felicito, cuenta con mi apoyo Saludos desde Tabasco

[@FalconMasters]

Muchas gracias Alfredo!

[@Deus-lo-Vuilt]

wow que genial , muchas gracias justo lo que buscaba

[@ezequielresipa9398]

Excelente video, muchas gracias!

[@jhondcali]

GRACIAS FALCON, ME AYUDASTE

[@gabrielvillarreal4964]

Excelente video!! Muy detallado y bien explicado todo. Saludos FalconMaster🙋🏼‍♂️

[@FalconMasters]

Gracias!

[@antoniorandisi3009]

Saludos. FalconMasters, gracias por la respuesta rapida. exito...

[@1337Unlucky]

Excelente video, Carlos!

[@FalconMasters]

Gracias

[@vjpadron07]

Excelente vídeo me gustó muchísimo felicitaciones.

[@lauraluchetti7321]

Gracias Genio! muy útil como siempre y explicado perfectamente para que todos puedamos aprender. Muchas Gracias. Recorda cuando puedas, enseñarnos cómo hacer que aparezca una ventana que permita guardar una web en el escritorio del celular!

[@FalconMasters]

He estado investigando Laura, pero nunca he hecho eso que quieres, no sabia muy bien como se hace.

[@lauraluchetti7321]

@@FalconMasters Muchas Gracias de todas Formas. Al navegar desde el Celular, muchas veces aparece una ventana que te permite AÑADIR A INICIO un acceso directo a la Web, pero tampoco sabemos como hacerlo. De todas formas, mil gracias por ocuparte!

[@FalconMasters]

@@lauraluchetti7321 Ten por seguro que subire un tutorial si aprendo mas del tema.

[@salvadorjuarez8641]

@@lauraluchetti7321 pero se llama aplicación hibrida

[@julianrecarte368]

Muchas gracias Carlos, tengo una duda, sale todo perfecto a excepción de que cuando le doy la clase "responsive-img" la imagen si se achica pero sigue grande y ocupando toda la pantalla. Verifiqué el codigo anterior y está bien

[@jhoanmanuelcarvajal9822]

gracias por el video

[@graalegre195]

Hola, necesito que la imagen de la miniatura sea una, pero la imagen que abre sea otra ya que necesito que se vea la imagen completa, ya que las fotos no son todas iguales. Como debo agregarle eso? Gracias, espero tu respuesta

[@Jesus-mq8vi]

Muy buen video como siempre, y muy buen recurso para crear proyectos Saludos ✌

[@unalexmas]

Funciono bien, pero desarmo todo mi Header y su barra de menú principal, pero no veo ninguna relación, o ese script altera cualquier imagen con enlace?

[@aborges8851]

claro que valoro el que hagas los videos, lo chimbo es cuando uno te pregunta algo y no contestas...!!!

[@FalconMasters]

Una disculpa Diego, intento responder todo lo que me ponen, pero a veces es muy difícil, tengo cerca de 400 videos en youtube, 5 cursos en udemy y redes sociales. En todos estos medios me hacen preguntas diarias y a veces no me doy abasto.

[@aborges8851]

@@FalconMasters OK perdnado sr Carlos...!!! siga ilustrandonos, uchas gracias...!!!

[@RobertoMejiaCollazos]

Tengo una duda si en la clase ""col s12 m4 l3"" es para dar un tamaño responsive, primero de 4 luego de 3 y luego de 1, como puedo hacer para que el contenedor tenga 4 medidas de columnas de 4,3,2, y de 1 osea agregarle un tamaño mas de medida que seria de 2 columnas para tablet porque de 3 columnas para tablet no se ve muy bien. Espero me puedan ayudar. Saludos.

[@aborges8851]

Saludos, quiero usar este efecto para una galeria pero de videos, se puede =???

[@pcsistemas7086]

Muy buen aporte, tengo una pregunta, ¿se puedo combinar o utilizar dos Framework a la ves en un proyecto (página web)?; es decir bootstrap y materialize.

[@TIburonBlanco99]

esta muy chereve me gustaria que al abrir la imagen se le pueda en una flecha y pase a la siguiente imagen sin cerrarla. muchas gracias por compartir tus conocimientos.

[@sergiocamargo7483]

Funciona muy bien, pero si ya tengo avanzado el proyecto afecta etiquetas como el nav, se puede hacer algo para que no las afecte?

[@unalexmas]

Exacto!!!! Lo solucionaste?

[@chimboterex]

Gracias por aprender, se podría colocar un botón y texbox para buscar una imagen , de un producto o artículo, gracias , bendiciones

[@FalconMasters]

Eso ya es algo un poco mas avanzado a esta practica, pero también lo enseño, aquí tienes un tutorial: kzbin.info/www/bejne/amO3ZGSilq5sh9U

[@colommbiano]

maestro como se puede hacer este mismo efecto pero en React y sin Materialize, seria muy complejo hacerlo sin Materialize ??

[@luzcisneros4954]

Cómo lo edito si necesito que aparezca en la parte inferior de la página y no en otra pestaña?

[@luciotqr]

No se porque pero el link reel que pones, me cambia totalmente el nav. no se como hacer

[@santiagobv2451]

falcon que tema usas en el visual?

[@angelmani2724]

sino quiero usar el material si uso brackets funcionara ?

[@Cibergroup]

Chic@s tengo una duda es que ya he ido avanzando en el codigo descargue el ejemplo de falcon y no me aparece nada en mozilla y no se que podria ser agradeceria que me expliquen si he hecho algo mal.

[@tintazuldisenografico6519]

gracias por el video, una pregunta:¿Cómo puedo adaptar el materializa para un carrusel de imagenes? ya hice uno de un video tuyo anterior, pero me gustaría que al dar clic se agrandara la imagen y tuviera una descripcion, como aparece aqui. espero tu consejo, muchas gracias.

[@jaimeviloriogreen]

Nuevamente genial!!!!!

[@katyagomezalaniz670]

Hola, cómo le puedo hacer si la página será para otra persona. Es decir, que la persona pueda subir fotos sin necesidad de meterse a escribir código? Que pueda, no sé, seleccionar la imagen y subirla simplemente.

[@gabrielguardo5677]

por que al poner esta linea de codigo se me desordena casi todo

[@nelsontrujillo960]

muy buenooooooooooooooooooooooooooooooooooooooooooooo

[@Enzo-dp5xo]

las fotos tienen que ser del mismo tamaño ? porque me quedan de distintos tamaños y desordenado.

[@ToshinoriYagi98]

Uff men de bolas muchas gracias

[@fershowfershow3164]

estoy haciendo un sidebar menu y le agregue lo que hiciste el problema es que el sidebar no cabe en la parte izquierda del lightbox 24:47

[@portillomelgar4238]

Hola man una consulta puedes hacer un video tutorial de como hacer un video galeria sencilla para paginas web como ejemplo una escuelita o instituto que guarden videos cortos de graduaciones de antemano gracias

[@kevinguzman1929]

Excelente video, ya le di like, pues me pareció muy bien!.

[@FalconMasters]

Muchas gracias!

[@elsusurrooscuro]

Excelente 💪💪💪

[@denncriss3082]

Genial como siempre... Una pregunta falcon que opinas de tailwindCSS y si podrias hacer algún tutorial

[@FalconMasters]

Tailwind es genial, si tengo ganas de hacer algún tutorial de el, pero no he preparado nada.

[@eliasfernandez1624]

Cómo saco el scroll después de tocar la imágen???

[@M3NCarmona]

Qué bueno!

[@pablodemartini6318]

Hola, una consulta. Materialize esta pisando uno de los estilos de mi css cambiando el color del nav bar del footer. Como puedo evitrlo?

[@FalconMasters]

Hola Pablo, prueba cambiar el orden en el que enlazas tus archivos CSS. Asegurate de que el archivo CSS de tus estilos personales este debajo del de materialize.

[@pablodemartini6318]

@@FalconMasters Hola, gracias por la respuesta, pero están en el orden correcto, pero me sigue dando un color rosa a mi navbar del footer cuando debería ser gris, además de que me cambia otros estilos. Es lo único que me esta pisando de mi CSS

[@FalconMasters]

@@pablodemartini6318 Otra forma de arreglarlo es que seas mas especifico en tus reglas CSS. Por ejemplo en vez de que en tus estilos CSS pongas: .navbar {background: #000;} Se mas especifico y pon la ruta completa, por poner un ejemplo: header .contenedor .navbar {background: #000}

[@pablodemartini6318]

@@FalconMasters Hola lo logré solucionar cambiando la etiqueta del footer. Porque no me estaba afectanco la clase, sino la etiqueta. Muchas gracias por las respuestas.

[@FalconMasters]

@@pablodemartini6318 Me alegra que pudieras solucionarlo. Saludos.

[@anell0784]

Saludos. Tengo una página que hace ese mismo efecto de lightbox y presenta las imagenes casi tal cual se ven en este video cuando lo ponen para dispositivos más pequeños seleccionando una de las imagenes y se ve un tanto oscuro el fondo, pero me gustaría lograr en la versión movil poder hacer zoom expandiendo con los dedos. Esta página es un template de worpress que compree y luego fue adaptando a mi gusto. Me gustaría saber como puedo hacer usando css lo de hacer zoom expandiendo con los dedos la imagen.

[@mayma721]

Y si quiero el nombre de la imagen abajo de cada imagen y con un tamaño de letra grande y tipo de letra que sea elegante

[@eduardorojas9]

Hola maestro falcon master

[@FalconMasters]

Hola

[@cynthiaxrm]

Hola tenía un menú y cuando hice la galería le cambió la altura tiene algo que ver con JS?

[@unalexmas]

es mas el CSS externo, eso lo arruina, una pena, no veo solucion, aun cuando cambie los nombres de las clases a lo contenido en el header. Me avisas como los solucionaste por favor, gracias.

[@luismiguelcruz2343]

Buen vídeo. Podrías explicar un poco como se puede implementar con Bootstrap 4?

[@FalconMasters]

Este efecto lo estamos haciendo con materialize css que también es un framework como bootstrap, no te recomendaría juntar materialize y bootstrap al mismo tiempo.

[@jesicamorel6725]

Estoy haciendo lo mismo que el video y no me queda, hago clic en la img y no pasa nada : (

[@camachomoralesluisantonio4209]

cuando quiero descargar tu proyecto me aparece en blanco sera porque no lo tengo actualizado el html (Sublime Text)?

[@FalconMasters]

Revisa que estes descargando de la rama master y no de la de codigo_base en github.

[@camachomoralesluisantonio4209]

@@FalconMasters en la descarga hace la direccion de tu proyecto como: github.com/falconmasters/carousel-materialize.git

[@FalconMasters]

@@camachomoralesluisantonio4209 Es que esa es la rama de proyecto_base, no la de master. La de master la encontrabas dando en el boton que dice branch: github.com/falconmasters/carousel-materialize/tree/master

[@axelUrielR]

Falcon Diosters

[@khabron]

Se puede hacer este efecto pero que sean videos

[@alancamarillo9325]

tome su like biejo* sabroz0

[@antoniorandisi3009]

Saludos, Excelente explicacion, trate bajar del repositorio, pero no se encuentra

[@FalconMasters]

Aquí esta: github.com/falconmasters/lightbox-materialize/

[@guadalupeelizabethlopezpen9660]

Como hago para que todas las imágenes sean del mismo tamaño? :(

[@jrasecbenitez9518]

Lo puedes hacer con paint

[@freddypercia]

Que paso con el link de GITHUB,

[@FalconMasters]

Aquí esta: github.com/falconmasters/lightbox-materialize/

[@AlexSilvera1]

Se puede hacer ese mismo efecto con bootstrap4??

[@FalconMasters]

Se puede aunque es un poco diferente.

[@yacolca2007]

Como hacer que se vaya a otra pagina, redirigirse cuando la imagen se agranda

[@lukafialhox3423]

ponle un href="link de la página a la que quieras que se redirija" dentro de la etiqueta de la imágen.

[@HUGOSILVA-ee1vo]

Y habra con flechita a la siguiente foto?

[@FalconMasters]

En este caso materialize no tiene esa opción.

[@HUGOSILVA-ee1vo]

Y se pidrias hacer una galeria de imagenes con flechita?

[@javirulibriz1734]

Display Grid.

[@diegovaler9860]

11:23

[@thanoscom]

Señor Falcon, creo que usted es diabólico

[@FalconMasters]

😈