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

Поділитися
Вставка
  • Опубліковано 3 гру 2024

КОМЕНТАРІ • 108

  • @FalconMasters
    @FalconMasters  5 років тому +42

    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
      @1337Unlucky 5 років тому +4

      Te di dislike para poder dar like de nuevo.

    • @Hablales_alin
      @Hablales_alin 5 років тому +1

      help me please

    • @olivaaev4108
      @olivaaev4108 5 років тому

      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
      @1337Unlucky 5 років тому

      @@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
      @federicorodolfothomasyanz 9 місяців тому

      Claro, gracias

  • @jesusfasabifreyre2459
    @jesusfasabifreyre2459 5 років тому +7

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

    • @FalconMasters
      @FalconMasters  5 років тому

      Muchas gracias, que gusto escuchar que hayas aprendido mucho!

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

  • @danielspark128
    @danielspark128 3 роки тому

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

  • @luisbazaldua6615
    @luisbazaldua6615 4 роки тому

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

  • @Aliss_nice
    @Aliss_nice 5 років тому +2

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

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

  • @proodbykenny
    @proodbykenny 5 років тому

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

  • @federicorodolfothomasyanz
    @federicorodolfothomasyanz 9 місяців тому

    Muchas gracias por ayudar aprender, gracias por el codigo

  • @alfredolizcano5770
    @alfredolizcano5770 5 років тому +1

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

  • @jhondcali
    @jhondcali 3 роки тому

    GRACIAS FALCON, ME AYUDASTE

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 2 роки тому

    wow que genial , muchas gracias justo lo que buscaba

  • @ezequielresipa9398
    @ezequielresipa9398 3 роки тому

    Excelente video, muchas gracias!

  • @antoniorandisi3009
    @antoniorandisi3009 5 років тому +1

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

  • @gabrielvillarreal4964
    @gabrielvillarreal4964 5 років тому +1

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

  • @vjpadron07
    @vjpadron07 4 роки тому

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

  • @1337Unlucky
    @1337Unlucky 5 років тому +1

    Excelente video, Carlos!

  • @lauraluchetti7321
    @lauraluchetti7321 5 років тому

    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
      @FalconMasters  5 років тому +1

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

    • @lauraluchetti7321
      @lauraluchetti7321 5 років тому

      @@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
      @FalconMasters  5 років тому +1

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

    • @salvadorjuarez8641
      @salvadorjuarez8641 2 роки тому

      @@lauraluchetti7321 pero se llama aplicación hibrida

  • @Jesus-mq8vi
    @Jesus-mq8vi 3 роки тому

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

  • @jhoanmanuelcarvajal9822
    @jhoanmanuelcarvajal9822 10 місяців тому

    gracias por el video

  • @pcsistemas7086
    @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
    @julianrecarte368 4 роки тому

    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

  • @sergiocamargo7483
    @sergiocamargo7483 3 роки тому +1

    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
      @unalexmas 7 місяців тому

      Exacto!!!! Lo solucionaste?

  • @santiagobv2451
    @santiagobv2451 5 років тому

    falcon que tema usas en el visual?

  • @chimboterex
    @chimboterex 5 років тому

    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
      @FalconMasters  5 років тому +1

      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

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

  • @ToshinoriYagi98
    @ToshinoriYagi98 4 роки тому

    Uff men de bolas muchas gracias

  • @angelmani2724
    @angelmani2724 4 роки тому

    sino quiero usar el material si uso brackets funcionara ?

  • @kevinguzman1929
    @kevinguzman1929 5 років тому

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

  • @jaimeviloriogreen
    @jaimeviloriogreen 5 років тому

    Nuevamente genial!!!!!

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

  • @graalegre195
    @graalegre195 3 роки тому +1

    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

  • @nelsontrujillo960
    @nelsontrujillo960 4 роки тому

    muy buenooooooooooooooooooooooooooooooooooooooooooooo

  • @aborges8851
    @aborges8851 10 місяців тому

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

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

  • @aborges8851
    @aborges8851 5 років тому

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

    • @FalconMasters
      @FalconMasters  5 років тому +1

      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
      @aborges8851 5 років тому

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

  • @denncriss3082
    @denncriss3082 5 років тому

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

    • @FalconMasters
      @FalconMasters  5 років тому +1

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

  • @M3NCarmona
    @M3NCarmona 5 років тому

    Qué bueno!

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

  • @elsusurrooscuro
    @elsusurrooscuro 5 років тому

    Excelente 💪💪💪

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

  • @unalexmas
    @unalexmas 7 місяців тому

    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?

  • @colommbiano
    @colommbiano 2 роки тому

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

  • @luismiguelcruz2343
    @luismiguelcruz2343 5 років тому

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

    • @FalconMasters
      @FalconMasters  5 років тому

      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.

  • @eduardorojas9
    @eduardorojas9 5 років тому

    Hola maestro falcon master

  • @gabrielguardo5677
    @gabrielguardo5677 4 роки тому +1

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

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

  • @anell0784
    @anell0784 5 років тому

    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.

  • @lucioquiroga7782
    @lucioquiroga7782 3 роки тому +1

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

  • @luzcisneros4954
    @luzcisneros4954 3 роки тому

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

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

  • @freddypercia
    @freddypercia 5 років тому +1

    Que paso con el link de GITHUB,

    • @FalconMasters
      @FalconMasters  5 років тому +1

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

  • @eliasfernandez1624
    @eliasfernandez1624 3 роки тому

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

  • @cynthiaxrm
    @cynthiaxrm 3 роки тому

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

    • @unalexmas
      @unalexmas 7 місяців тому

      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.

  • @guadalupeelizabethlopezpen9660
    @guadalupeelizabethlopezpen9660 4 роки тому +2

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

  • @Enzo-dp5xo
    @Enzo-dp5xo 3 роки тому

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

  • @axelUrielR
    @axelUrielR 5 років тому

    Falcon Diosters

  • @antoniorandisi3009
    @antoniorandisi3009 5 років тому

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

    • @FalconMasters
      @FalconMasters  5 років тому

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

  • @pablodemartini6318
    @pablodemartini6318 2 роки тому

    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
      @FalconMasters  2 роки тому

      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
      @pablodemartini6318 2 роки тому

      @@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
      @FalconMasters  2 роки тому

      @@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
      @pablodemartini6318 2 роки тому

      @@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
      @FalconMasters  2 роки тому

      @@pablodemartini6318 Me alegra que pudieras solucionarlo.
      Saludos.

  • @AlexSilvera1
    @AlexSilvera1 5 років тому

    Se puede hacer ese mismo efecto con bootstrap4??

    • @FalconMasters
      @FalconMasters  5 років тому

      Se puede aunque es un poco diferente.

  • @diegovaler9860
    @diegovaler9860 3 роки тому

    11:23

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

  • @alancamarillo9325
    @alancamarillo9325 2 роки тому

    tome su like biejo* sabroz0

  • @camachomoralesluisantonio4209
    @camachomoralesluisantonio4209 5 років тому

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

    • @FalconMasters
      @FalconMasters  5 років тому

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

    • @camachomoralesluisantonio4209
      @camachomoralesluisantonio4209 5 років тому

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

    • @FalconMasters
      @FalconMasters  5 років тому

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

  • @jesicamorel6725
    @jesicamorel6725 3 роки тому

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

  • @khabron
    @khabron 3 роки тому

    Se puede hacer este efecto pero que sean videos

  • @yacolca2007
    @yacolca2007 2 роки тому

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

    • @lukafialhox3423
      @lukafialhox3423 2 роки тому

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

  • @javirulibriz1734
    @javirulibriz1734 Рік тому

    Display Grid.

  • @HUGOSILVA-ee1vo
    @HUGOSILVA-ee1vo 5 років тому

    Y habra con flechita a la siguiente foto?

    • @FalconMasters
      @FalconMasters  5 років тому +1

      En este caso materialize no tiene esa opción.

    • @HUGOSILVA-ee1vo
      @HUGOSILVA-ee1vo 5 років тому

      Y se pidrias hacer una galeria de imagenes con flechita?

  • @thanoscom
    @thanoscom 5 років тому

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