Create A Responsive Popup Image Gallery Using HTML CSS And Vanilla Javascript

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

КОМЕНТАРІ • 130

  • @tenc6491
    @tenc6491 2 роки тому +13

    Awesome and very efficiently explained. This was exactly the video I was looking for. Thanks a ton for the help. Subscribed happily!

  • @nuraktar7815
    @nuraktar7815 3 роки тому +2

    Simple Easy Fast Forward... so nice tutorial

  • @toma1610
    @toma1610 2 роки тому +7

    Nice; however, I‘d like to also see the prev and next ARROWS, especially for mobile devices.

  • @pepey003
    @pepey003 7 місяців тому +1

    exclente vidio, it´s so usefull, sorry for mi writing im from argentina
    tremendo muchas gracias

  • @MahaLakshmi-xs4sf
    @MahaLakshmi-xs4sf Рік тому

    💥💯💥💯💥💯💥💯awesome

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

    Cool man!! I'm stuck with a circular gallery but this video really opens my a path 👌

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

    This video very help ful for...😍😍🔥

  • @ashujain5853
    @ashujain5853 5 місяців тому

    Helped a lot....thank you so much

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

    It's beautiful Mr. Web Designer. Very well explained e easy entendment. Please continue in the videos!!
    Thanks and sucess ever

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

    fantastic 😊

  • @tomaco7310
    @tomaco7310 3 роки тому +2

    Thank you! Very helpful, subbed!

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

    Awesome 😃

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

    excellent!

  • @manastewari311
    @manastewari311 Рік тому +5

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    .container {
    position: relative;
    min-height: 100vh;
    background: white;
    }
    .container .image-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    padding: 10px;
    }
    .container .image-container .image {
    height: 250px;
    width: 350px;
    border: 10px solid white;
    box-shadow: 0 5px 15px black;
    overflow: hidden;
    cursor: pointer;
    }
    .container .image-container .image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: 0.2s linear;
    }
    .container .image-container .image:hover img {
    transform: scale(1.1);
    }
    .container .popup-image {
    position: fixed;
    top: 0;
    left: 0;
    background: black;
    height: 100%;
    width: 100%;
    z-index: 100;
    display: none;
    }
    .container .popup-image span {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 40px;
    font-weight: bolder;
    color: white;
    cursor: pointer;
    z-index: 100;
    }
    .container .popup-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 5px solid white;
    border-radius: 5px;
    width: 750px;
    object-fit: cover;
    }
    @media (max-width: 768px) {
    .container .popup-image img {
    width: 95%;
    }
    }















    ×




    document.querySelectorAll(".image img").forEach(image => {
    image.onclick = () => {
    document.querySelector(".popup-image").style.display = "block";
    document.querySelector(".popup-image img").src =
    image.getAttribute("src");
    };
    });
    document.querySelector(".popup-image span").onclick = () => {
    document.querySelector(".popup-image").style.display = "none";
    };


    Code!!

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

    Thank you, it allowed me to understand and to adapt the code to my website.🛠

  • @adhamcode
    @adhamcode 2 роки тому +1

    perfect ♥

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

    Very efficiently explained. Thanks for help, Subscribed❣

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

    Nice one again, keep it up

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

    Thanks for this video🥰

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

    Life saver.

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

    great vid mate

  • @SamuelSilva-tz2ks
    @SamuelSilva-tz2ks 2 роки тому

    Thanks very much for this video. Awesome

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

    Nice,

  • @nuraktar7815
    @nuraktar7815 3 роки тому +4

    Here is a new request for upcoming video: make a pop up image viewer with next and previous img button using css, vanilla js

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

    You're awesome! Thank you very very much!!

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

    this what i looking forrrr

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

    Nice

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

    thanks for this amazing tutorial

  • @Noritoshi-r8m
    @Noritoshi-r8m 2 роки тому

    Fantastic. Good guide, ty.

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

    thank you so much good code;

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

    i like it

  • @fredriksundgren2326
    @fredriksundgren2326 3 роки тому +2

    Thank you SO SO SO SO much ❤️

  • @daelymusings
    @daelymusings 8 місяців тому

    thank youuu!!

  • @loveableairhead8249
    @loveableairhead8249 22 дні тому

    by the way, doea it adapt? like every picture sizes, gets the same size, and can it hold around 50 pictures?

  • @MuraliKrishna-wn2bf
    @MuraliKrishna-wn2bf 2 роки тому +4

    after refreshing or reloading the popup image is not collapsing...

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

    great video, thanks

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

    Thanx a lot!!

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

    thanks a lot!

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

    thanks man

  • @janithjayasinghe9462
    @janithjayasinghe9462 Рік тому +1

    How to use this method to view specific product details of ecommerce website?

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

    👌☘

  • @whossvero
    @whossvero 4 місяці тому

    gracias bro

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

    Thanks

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

    From unsplash website at what resolution we have to download for image gallery

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

    Thank you :)

  • @keroppisapo
    @keroppisapo Рік тому +3

    Thank you for your tutorial it worked like a charm!
    I don't want to bother but do you know how to add caption for every image in the popup view? I'm trying to use figcaption to pass through the .popup-image but I'm not getting it. I also made a Stack Overflow's post but they marked as a duplicate (and the marked previously post didn't respond my question).
    Please if you could help me I'd be so glad.

  • @hussnainhaider001
    @hussnainhaider001 Місяць тому

    plz attach your github with your videos ...
    and make public repo ...

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

    i know i'm 2 years late to this video, but i coded an area underneath the pop-up images where a title, date and description would appear, pulling from the hidden h4 and p tags in the square with the id function
    problem is, i can only have the title and description of the first image appear, and it'll display that same title and description under all the images
    i was wondering if there's a certain way to have it so that the title and description changes independently for each image?

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

    thank you very much, still have some issue to ADDRESS

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

    Bro how to create fab icon on bottom corner when scroll down example: icon with text when scroll down only icon will be appear in bottom corner

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

    Thank you for this!
    How can i make the images swap with the keyboard arrows?

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

    I want to write descriptions at the pop up images,how do l do it

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

    Why wont my x button work when an image pops up i cant find the error? i placed it on a section of the website

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

    How can I add captions with every image when it pos-open?

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

    what editor did you use?

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

    Any idea why its moving all my images to the right when it pops up ?

  • @cameronfletcher6506
    @cameronfletcher6506 Рік тому +1

    When I click on the 2nd image the 1st image popup shows up anyone else have this issue ?

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

    How to add "view more images" below the gallery?

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

      might this help you : ua-cam.com/video/4UZdSp9PMI4/v-deo.html

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

    It seem every time I load the page it will automatically show the popup image, is there something I' missed

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

    How to add download button,
    This download button should be every image bottom.

  • @ajnonymous.p
    @ajnonymous.p 2 роки тому

    Can you help me? the exit button on my image is not showing, how to fix?

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

      did you use position property for exit button and zindex as well?

    • @ajnonymous.p
      @ajnonymous.p 2 роки тому

      @@MrWebDesignerAnas how? what should i put?

    • @MrWebDesignerAnas
      @MrWebDesignerAnas  2 роки тому +1

      use this code for close button :
      position:absolute;
      top:20px; right:20px;
      and position:relative; for its parent element

  • @AnjuGupta-jy6lj
    @AnjuGupta-jy6lj 3 роки тому +1

    You are using which code editor?

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

    bro... how you make the cross icon without any i tag

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

    Hello! My cross don't work.. I create this, but my X don't close the image 😟

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

      did you write the exact code in the tutorial? or gave the exact class / id name in the javascript?

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

      @@MrWebDesignerAnas Yes i did and i have the same problem.

  • @erob9446
    @erob9446 2 роки тому +1

    did I do it right? (empty img srcs)

    * {
    margin:0; padding:0;
    box-sizing: border-box;
    }
    .container{
    position: relative;
    min-height: 100vh;
    background: white;
    }
    .container .image-container{
    display: flex;
    flex-wrap: wrap;
    gap:15px;
    justify-content: center;
    padding: 10px;
    }
    .container .image-container .image{
    height: 250px;
    width: 350px;
    border:10px solid white;
    box-shadow: 0 5px 15px black;
    overflow:hidden;
    cursor: pointer;
    }
    .container .image-container .image img{
    height:100%;
    width:100%;
    object-fit: cover;
    transition: .2s linear;
    }
    .container .image-container .image:hover img{
    transform: scale(1.1);
    }
    .container .popup-image{
    position: fixed;
    top:0; left:0;
    background: black;
    height:100%;
    width:100%;
    z-index:100
    }
    .container .popup-image span{
    position: absolute;
    top:0; right:10px;
    font-size: 40px;
    font-weight: bolder;
    color: white;
    cursor: pointer;
    z-index: 100;
    }

    .container .popup-image img{
    position: absolute;
    top: 50%; left:50%;
    transform: translate(-50%, -50%);
    border:5px solid white;
    border-radius: 5px;
    width:750px;
    object-fit: cover;
    }
    @media (max-width:768px){
    .container .popup-image img{
    width:95%;
    }









    ×


    document.queryselectorall('.image-container img').foreach(image =>{
    image.onclick = () =>{}
    document.queryselector('.popup-image').style.display = 'block';
    document.queryselector('.popup-image img').src = image.getattribute('src');
    }
    });
    document.queryselector('popup-image span').onclick = () =>{
    document.queryselector('.popup-image').style.display = 'none';
    }

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

      You is the GOAT !!! Thank you very very very very very very very very much !

    • @manastewari311
      @manastewari311 Рік тому +1

      * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      }
      .container {
      position: relative;
      min-height: 100vh;
      background: white;
      }
      .container .image-container {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      justify-content: center;
      padding: 10px;
      }
      .container .image-container .image {
      height: 250px;
      width: 350px;
      border: 10px solid white;
      box-shadow: 0 5px 15px black;
      overflow: hidden;
      cursor: pointer;
      }
      .container .image-container .image img {
      height: 100%;
      width: 100%;
      object-fit: cover;
      transition: 0.2s linear;
      }
      .container .image-container .image:hover img {
      transform: scale(1.1);
      }
      .container .popup-image {
      position: fixed;
      top: 0;
      left: 0;
      background: black;
      height: 100%;
      width: 100%;
      z-index: 100;
      display: none;
      }
      .container .popup-image span {
      position: absolute;
      top: 0;
      right: 10px;
      font-size: 40px;
      font-weight: bolder;
      color: white;
      cursor: pointer;
      z-index: 100;
      }
      .container .popup-image img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 5px solid white;
      border-radius: 5px;
      width: 750px;
      object-fit: cover;
      }
      @media (max-width: 768px) {
      .container .popup-image img {
      width: 95%;
      }
      }















      ×




      document.querySelectorAll(".image img").forEach(image => {
      image.onclick = () => {
      document.querySelector(".popup-image").style.display = "block";
      document.querySelector(".popup-image img").src =
      image.getAttribute("src");
      };
      });
      document.querySelector(".popup-image span").onclick = () => {
      document.querySelector(".popup-image").style.display = "none";
      };


      Corrected Code...!!

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

      @@manastewari311 THANK YOU VERRY MUCH!!!!!!!!!!!!! I needed it for my project thank you very much

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

    help!! I cant close de popup image with cross! i cant find the error. i have to use some script to use this code? Help!!!!!

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

      check your javascript code!

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

      @@MrWebDesignerAnas its the same! I have to use some script to make it works? I didnt see in the video. Can i try changing classes names?

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

    why that popup is showed when I refresh my webpage

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

    why every i refresh the web the popup image always show?

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

      you the evenListener 'click' for each videos

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

      @@MrWebDesignerAnas what do you mean? you didn't use evenListener... I have the same problem with the default image

  • @احمدمحمد-ش9ذ5ر
    @احمدمحمد-ش9ذ5ر Рік тому

    i want with indicator right and left

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

    Hi, Mr. Shaikh Anas. I would like to have the code please. Could you please upload it to buy me a coffee?

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

    Where do I call the Java script function?

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

      you can create a different file for javascript or you can write javascript at the bottom before the closing of body tag in html file!

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

      @@MrWebDesignerAnas thankyou it's working now turns out I did not select the query

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

    great!code pls

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

    saludos buen video como podría agregarle texto a cada imagen a la hora de visualizar el popup

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

      no puedo cerrar la imagen dle popup, tengo que refrescar la pagina, sabes como repararlo?

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

      @@fernandoaguirre8359 cuando visualizas la imagen te sale el boton de cerrar si no es asi valida esta linea de codigo × dentro del si te sale el boton pero no te funciona valida el js diractamente en el evento onclick del span
      si no es eso enviame el codigo y miramos

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

      @@gustavogarces3454 te paso el script:
      document.querySelectorAll('.image-container img').forEach(image=>{image.onclick = () =>
      {document.querySelector('.popup-image').style.display= 'block';
      document.querySelector('.popup-image img').src = image.getAttribute('src');
      }});
      document.querySelector('.poppup-image span').onclick = () =>{document.querySelector('.popup-image').style.display = 'none';
      }

    • @gustavogarces3454
      @gustavogarces3454 2 роки тому +1

      @@fernandoaguirre8359 valida ("poppup-image" es diferente de popup-image") estas llamando el evento onclick a una clase con otro nombre valida eso.

  • @xmenky
    @xmenky 8 місяців тому

    Sorry man but the Js isn't working in my code

  • @-MrHow-
    @-MrHow- 2 роки тому +7

    Can you give us the source code?

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

      Can you follow this tutorial step by step, so you can understand it. He make this video with effort to share the knowledge to other people. Not to the people like you who want copy paste it for no shame at all.

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

      Github link😢 needed its called reuse

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

      @@candrasniper3404 its not copy paste ,i understand the code he written iam software engineering ,but instead of rewrite something i understood it ,put link code will be so helpful for people

  • @gmaservicios3826
    @gmaservicios3826 2 роки тому +1

    puedes pasarme el codigo!

  • @natashapramodsawant6157
    @natashapramodsawant6157 4 місяці тому

    I want the source code is avaiable....

  • @CODEZAYED
    @CODEZAYED 2 роки тому +1

    code please

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

    how do i download source code?

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

    Pop up not working

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

    the java script did not work

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

    code?

  • @media7588
    @media7588 2 роки тому +1

    don't work

  • @ayushbro6988
    @ayushbro6988 8 місяців тому

    pls source code

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

    This video source code upload please

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

    thanks

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

    source codes?

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

    code please😅😅😅

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

    vulu ... ocay ...