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

Подписаться 511 тыс.

Просмотров 44 тыс.

50% 1

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.falconmasters.com
⭐ Curso de Diseño Web desde Cero:
www.desarrolloweb.io/cursos/d...
⭐ Curso de PHP y MYSQL desde Cero:
www.desarrolloweb.io/cursos/p...
⭐ Curso de React y Firebase desde Cero:
www.desarrolloweb.io/cursos/r...
⭐ Curso de Bootstrap:
www.desarrolloweb.io/cursos/b...
⭐ Curso de Woocommerce:
www.desarrolloweb.io/cursos/t...
---
📄 Materialize CSS: materializecss.com/getting-st...
📄 Código del Proyecto: github.com/falconmasters/ligh...
---
Redes Sociales:
♦ Twitter @falconmasters:
/ falconmasters
♦ Pagina de Facebook:
/ falconmasters

Наука

Опубликовано:

23 окт 2019

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 108

@FalconMasters 4 года назад

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 4 года назад

Te di dislike para poder dar like de nuevo.

@Hablales_alin 4 года назад

help me please

@olivaaev4108 4 года назад

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 4 года назад

@@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.

@user-cv1rg7jk1l 3 месяца назад

Claro, gracias

@Cibergroup 4 года назад

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.

@Aliss_nice 4 года назад

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

@vjpadron07 4 года назад

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

@jesusfasabifreyre2459 4 года назад

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

@FalconMasters 4 года назад

Muchas gracias, que gusto escuchar que hayas aprendido mucho!

@proodbykenny 4 года назад

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

@ezequielresipa9398 2 года назад

Excelente video, muchas gracias!

@danielspark128 2 года назад

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

@eddyyovanivizcarrapulido3498 4 года назад

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

@gabrielvillarreal4964 4 года назад

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

@FalconMasters 4 года назад

Gracias!

@alfredolizcano5770 4 года назад

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 4 года назад

Muchas gracias Alfredo!

@antoniorandisi3009 4 года назад

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

@luisbazaldua6615 3 года назад

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

@Deus-lo-Vuilt 2 года назад

wow que genial , muchas gracias justo lo que buscaba

@jhondcali 3 года назад

GRACIAS FALCON, ME AYUDASTE

@jaimeviloriogreen 4 года назад

Nuevamente genial!!!!!

@user-cv1rg7jk1l 3 месяца назад

Muchas gracias por ayudar aprender, gracias por el codigo

@Jesus-mq8vi 3 года назад

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

@1337Unlucky 4 года назад

Excelente video, Carlos!

@FalconMasters 4 года назад

Gracias

@jhoanmanuelcarvajal9822 4 месяца назад

gracias por el video

@cesarrodriguez1632 4 года назад

Excelente 💪💪💪

@M3NCarmona 4 года назад

Qué bueno!

@kevinguzman1929 4 года назад

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

@FalconMasters 4 года назад

Muchas gracias!

@ToshinoriYagi98 3 года назад

Uff men de bolas muchas gracias

@pcsistemas7086 2 года назад

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.

@julianrecarte368 3 года назад

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

@tintazuldisenografico6519 4 года назад

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.

@lauraluchetti7321 4 года назад

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 4 года назад

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

@lauraluchetti7321 4 года назад

@@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 4 года назад

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

@salvadorjuarez8641 Год назад

@@lauraluchetti7321 pero se llama aplicación hibrida

@nelsontrujillo960 3 года назад

muy buenooooooooooooooooooooooooooooooooooooooooooooo

@angelmani2724 4 года назад

sino quiero usar el material si uso brackets funcionara ?

@eduardorojas9 4 года назад

Hola maestro falcon master

@FalconMasters 4 года назад

Hola

@RobertoMejiaCollazos 4 года назад

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.

@chimboterex 4 года назад

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 4 года назад

Eso ya es algo un poco mas avanzado a esta practica, pero también lo enseño, aquí tienes un tutorial: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-42T31laI9Qs.html

@denncriss3082 4 года назад

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

@FalconMasters 4 года назад

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

@santiagobv2451 4 года назад

falcon que tema usas en el visual?

@anell0784 4 года назад

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.

@graalegre195 3 года назад

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

@Cibergroup 4 года назад

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.

@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?

@portillomelgar4238 3 года назад

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

@sergiocamargo7483 2 года назад

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?

@gabrielguardo5677 3 года назад

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

@luismiguelcruz2343 4 года назад

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

@FalconMasters 4 года назад

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.

@aborges8851 4 месяца назад

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

@colommbiano Год назад

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

@axelUrielR 4 года назад

Falcon Diosters

@aborges8851 4 года назад

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

@FalconMasters 4 года назад

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 4 года назад

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

@lucioquiroga7782 2 года назад

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

@katyagomezalaniz670 3 года назад

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.

@luzcisneros4954 2 года назад

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

@antoniorandisi3009 4 года назад

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

@FalconMasters 4 года назад

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

@Enzo-dp5xo 3 года назад

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

@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.

@alancamarillo9325 2 года назад

tome su like biejo* sabroz0

@mrjlemon932 2 года назад

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.

@eliasfernandez1624 3 года назад

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

@fershowfershow3164 4 года назад

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

@freddypercia 4 года назад

Que paso con el link de GITHUB,

@FalconMasters 4 года назад

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

@guadalupeelizabethlopezpen9660 4 года назад

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

@jrasecbenitez9518 Год назад

Lo puedes hacer con paint

@AlexSilvera1 4 года назад

Se puede hacer ese mismo efecto con bootstrap4??

@FalconMasters 4 года назад

Se puede aunque es un poco diferente.

@camachomoralesluisantonio4209 4 года назад

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

@FalconMasters 4 года назад

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

@camachomoralesluisantonio4209 4 года назад

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

@FalconMasters 4 года назад

@@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

@mayma721 3 года назад

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

@jesicamorel6725 2 года назад

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

@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.