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

how to make a simple responsive lightbox image gallery using html css and vanilla javascript.
create a image popup gallery on click using vanilla javascript.
images are from unsplash:
unsplash.com/
New To My Channel Subscribe Now And See More Stuff Like This:
/ @mrwebdesigneranas
#ImageGallery
#LightboxGallery
#Javascript

[@tenc6491]

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

[@MrWebDesignerAnas]

Glad it helped!

[@julioarmandoramires6218]

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

[@nuraktar7815]

Simple Easy Fast Forward... so nice tutorial

[@rafaelmariano3195]

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

[@toma1610]

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

[@stwarrior9983]

Nice one again, keep it up

[@mosesimmanuel1591]

Nice Sir This Video Very Useful Sir Thank You Sir🤩

[@delforjf]

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

[@JPiXeL]

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?

[@sachinpunpher3967]

thanks for this amazing tutorial

[@sanketbhoyar2496]

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

[@RCO6]

fantastic 😊

[@tomaco7310]

Thank you! Very helpful, subbed!

[@MrWebDesignerAnas]

Awesome, thank you!

[@guillaumevandeville5741]

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

[@MrWebDesignerAnas]

Glad it helped!

[@keroppisapo]

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.

[@kinglucky5122]

Very efficiently explained. Thanks for help, Subscribed❣

[@MrWebDesignerAnas]

Glad it was helpful!

[@ashujain5853]

Helped a lot....thank you so much

[@pepey003]

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

[@adhamclerc589]

perfect ♥

[@otmanebel4744]

Awesome 😃

[@nuraktar7815]

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

[@MahaLakshmi-xs4sf]

💥💯💥💯💥💯💥💯awesome

[@Noritoshi-r8m]

Fantastic. Good guide, ty.

[@MrWebDesignerAnas]

Glad it was helpful!

[@SamuelSilva-tz2ks]

Thanks very much for this video. Awesome

[@MrWebDesignerAnas]

My pleasure!

[@serazummunir790]

Life saver.

[@fahrulikhsanhidayatullah]

great vid mate

[@leonardotorres6267]

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

[@sabamta1723]

thanks a lot!

[@cesarmolina95]

Thanx a lot!!

[@hestranho]

excellent!

[@sulmansah3622]

Nice,

[@pichitiem205]

thank you so much good code;

[@abbosjonanvarov9272]

i like it

[@MuraliKrishna-wn2bf]

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

[@muhammadfaiznorepohan3019]

this what i looking forrrr

[@daelymusings]

thank youuu!!

[@janithjayasinghe9462]

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

[@fatimaabobaker173]

👌☘

[@BogdanSimionDev]

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

[@haryoolule5690]

thank you very much, still have some issue to ADDRESS

[@adarshagrahari902]

Thanks for this video🥰

[@MrWebDesignerAnas]

You’re welcome 😊

[@RoastedMalo]

great video, thanks

[@MrWebDesignerAnas]

You are welcome!

[@pallavipradhan156]

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

[@abdelilahhasnaoui7943]

thanks man

[@whossvero]

gracias bro

[@animelibrary1256]

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

[@praveenandrew]

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

[@fakeyejoshua781]

Thanks

[@UFOMatriX]

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

[@MrWebDesignerAnas]

you have to use swiper.js library then!

[@fredriksundgren2326]

Thank you SO SO SO SO much ❤️

[@MrWebDesignerAnas]

You're so welcome!

[@hinkum8253]

Thank you :)

[@MrWebDesignerAnas]

You're welcome!

[@lithembasolontsi7174]

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

[@omegaraoul]

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

[@mohammedminhaz8]

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

[@icaliquid6245]

Nice

[@MrWebDesignerAnas]

Thanks

[@compmadman]

great!code pls

[@cameronfletcher6506]

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

[@tusharsharma4534]

why that popup is showed when I refresh my webpage

[@sscalerts]

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

[@fernandoaguirre8359]

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]

check your javascript code!

[@fernandoaguirre8359]

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

[@hafezagina]

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

[@srinivaslavudiya9171]

how do i download source code?

[@jisthergaming]

what editor did you use?

[@MrWebDesignerAnas]

vs code editor

[@jisthergaming]

@@MrWebDesignerAnas can you drop down the source code

[@Yaboyajpad]

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

[@MrWebDesignerAnas]

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

[@Yaboyajpad]

@@MrWebDesignerAnas how? what should i put?

[@MrWebDesignerAnas]

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

[@erob9446]

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]

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

[@manastewari311]

* { 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]

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

[@gustavogarces3454]

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

[@fernandoaguirre8359]

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

[@gustavogarces3454]

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

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

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

[@nisachaerunnissa1356]

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

[@MrWebDesignerAnas]

might this help you : kzbin.info/www/bejne/aoa9lYambrWAf5Y

[@deniscountryboy]

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

[@MrWebDesignerAnas]

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

[@zain564]

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

[@AnjuGupta-jy6lj]

You are using which code editor?

[@MrWebDesignerAnas]

vs code editor

[@user-ud8cs8hu6e]

i want with indicator right and left

[@gmaservicios3826]

puedes pasarme el codigo!

[@pranshusati5818]

Where do I call the Java script function?

[@MrWebDesignerAnas]

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]

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

[@stephanusveri8134]

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

[@MrWebDesignerAnas]

you the evenListener 'click' for each videos

[@DanielBlecha]

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

[@CODEZAYED]

code please

[@xmenky]

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

[@natashapramodsawant6157]

I want the source code is avaiable....

[@brindhalakshmanan6532]

This video source code upload please

[@pranshusati5818]

the java script did not work

[@thinleywangdo3086]

Pop up not working

[@-MrHow-]

Can you give us the source code?

[@candrasniper3404]

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]

Github link😢 needed its called reuse

[@-MrHow-]

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

[@anshikadubey6098]

code?

[@ayushbro6988]

pls source code

[@media7588]

source codes?

[@MrWebDesignerAnas]

in the description!

[@CODEZAYED]

code please😅😅😅

[@syediqbalahmed3176]

vulu ... ocay ...

[@media7588]

don't work

[@ldtig8099]

thanks

[@manastewari311]

* { 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!!

[@JJ-nv6nl]

Life saver