Crea una Galería con Efecto Lightbox Fácilmente con Materialize CSS
Вставка
- Опубліковано 19 вер 2024
- 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
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!
Te di dislike para poder dar like de nuevo.
help me please
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?
@@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.
Claro, gracias
Gracias Falcon eres un maestro, gracias a ti he aprendido muchas cosas (:
Muchas gracias, que gusto escuchar que hayas aprendido mucho!
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.
Muchas gracias, he comprado tu curso de desarrollo web 100 % recomendable.💖💖💖💖
ME SALVASTEE PRO. Gracias por todo lo que hacés eres u genio :))
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
Muy buen vídeo Carlos Arturo, eres una gran inspiración para el desarrollo web te felicito, cuenta con mi apoyo Saludos desde Tabasco
Muchas gracias Alfredo!
Termine la practica! Le voy a estar dando mi estilo cambiándole algunas cosas
Saludos. FalconMasters, gracias por la respuesta rapida. exito...
FalconMasters gracias por la ayuda que nos ha brindado siempre que haces un video yo hago el mismo ejercicio
Muchas gracias por ayudar aprender, gracias por el codigo
Excelente video!! Muy detallado y bien explicado todo. Saludos FalconMaster🙋🏼♂️
Gracias!
Excelente video, Carlos!
Gracias
Excelente vídeo me gustó muchísimo felicitaciones.
wow que genial , muchas gracias justo lo que buscaba
Excelente video, muchas gracias!
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!
He estado investigando Laura, pero nunca he hecho eso que quieres, no sabia muy bien como se hace.
@@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!
@@lauraluchetti7321 Ten por seguro que subire un tutorial si aprendo mas del tema.
@@lauraluchetti7321 pero se llama aplicación hibrida
gracias por el video
GRACIAS FALCON, ME AYUDASTE
Funciona muy bien, pero si ya tengo avanzado el proyecto afecta etiquetas como el nav, se puede hacer algo para que no las afecte?
Exacto!!!! Lo solucionaste?
Muy buen video como siempre, y muy buen recurso para crear proyectos Saludos ✌
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.
claro que valoro el que hagas los videos, lo chimbo es cuando uno te pregunta algo y no contestas...!!!
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.
@@FalconMasters OK perdnado sr Carlos...!!! siga ilustrandonos, uchas gracias...!!!
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.
Nuevamente genial!!!!!
muy buenooooooooooooooooooooooooooooooooooooooooooooo
Qué bueno!
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
Gracias por aprender, se podría colocar un botón y texbox para buscar una imagen , de un producto o artículo, gracias , bendiciones
Eso ya es algo un poco mas avanzado a esta practica, pero también lo enseño, aquí tienes un tutorial:
ua-cam.com/video/42T31laI9Qs/v-deo.html
Uff men de bolas muchas gracias
Excelente video, ya le di like, pues me pareció muy bien!.
Muchas gracias!
Genial como siempre... Una pregunta falcon que opinas de tailwindCSS y si podrias hacer algún tutorial
Tailwind es genial, si tengo ganas de hacer algún tutorial de el, pero no he preparado nada.
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
Excelente 💪💪💪
Buen vídeo. Podrías explicar un poco como se puede implementar con Bootstrap 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.
Hola maestro falcon master
Hola
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?
Saludos, quiero usar este efecto para una galeria pero de videos, se puede =???
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.
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.
por que al poner esta linea de codigo se me desordena casi todo
No se porque pero el link reel que pones, me cambia totalmente el nav. no se como hacer
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
Cómo lo edito si necesito que aparezca en la parte inferior de la página y no en otra pestaña?
falcon que tema usas en el visual?
maestro como se puede hacer este mismo efecto pero en React y sin Materialize, seria muy complejo hacerlo sin Materialize ??
Falcon Diosters
sino quiero usar el material si uso brackets funcionara ?
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.
Cómo saco el scroll después de tocar la imágen???
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.
tome su like biejo* sabroz0
las fotos tienen que ser del mismo tamaño ? porque me quedan de distintos tamaños y desordenado.
Saludos, Excelente explicacion, trate bajar del repositorio, pero no se encuentra
Aquí esta: github.com/falconmasters/lightbox-materialize/
Hola tenía un menú y cuando hice la galería le cambió la altura tiene algo que ver con JS?
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.
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.
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
Hola, una consulta. Materialize esta pisando uno de los estilos de mi css cambiando el color del nav bar del footer. Como puedo evitrlo?
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.
@@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
@@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}
@@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.
@@pablodemartini6318 Me alegra que pudieras solucionarlo.
Saludos.
Como hago para que todas las imágenes sean del mismo tamaño? :(
Lo puedes hacer con paint
Que paso con el link de GITHUB,
Aquí esta: github.com/falconmasters/lightbox-materialize/
11:23
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
Estoy haciendo lo mismo que el video y no me queda, hago clic en la img y no pasa nada : (
Se puede hacer este efecto pero que sean videos
Display Grid.
Como hacer que se vaya a otra pagina, redirigirse cuando la imagen se agranda
ponle un href="link de la página a la que quieras que se redirija" dentro de la etiqueta de la imágen.
cuando quiero descargar tu proyecto me aparece en blanco sera porque no lo tengo actualizado el html (Sublime Text)?
Revisa que estes descargando de la rama master y no de la de codigo_base en github.
@@FalconMasters
en la descarga hace la direccion de tu proyecto como: github.com/falconmasters/carousel-materialize.git
@@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
Se puede hacer ese mismo efecto con bootstrap4??
Se puede aunque es un poco diferente.
Y habra con flechita a la siguiente foto?
En este caso materialize no tiene esa opción.
Y se pidrias hacer una galeria de imagenes con flechita?
Señor Falcon, creo que usted es diabólico
😈