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

No video

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

Рет қаралды 144,543

Күн бұрын

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

Пікірлер: 129

@tenc6491 2 жыл бұрын

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

@MrWebDesignerAnas 2 жыл бұрын

Glad it helped!

@toma1610 2 жыл бұрын

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

@pepey003 3 ай бұрын

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

@MuraliKrishna-wn2bf 2 жыл бұрын

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

@nuraktar7815 3 жыл бұрын

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

@nuraktar7815 3 жыл бұрын

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

@julioarmandoramires6218 Жыл бұрын

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

@ashujain5853 2 ай бұрын

Helped a lot....thank you so much

@mosesimmanuel1591 3 жыл бұрын

Nice Sir This Video Very Useful Sir Thank You Sir🤩

@guillaumevandeville5741 2 жыл бұрын

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

@MrWebDesignerAnas 2 жыл бұрын

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.

@tomaco7310 2 жыл бұрын

Thank you! Very helpful, subbed!

@MrWebDesignerAnas 2 жыл бұрын

Awesome, thank you!

@janithjayasinghe9462 Жыл бұрын

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

@sanketbhoyar2496 2 жыл бұрын

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

@JPiXeL 4 ай бұрын

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?

@RCO6 3 жыл бұрын

fantastic 😊

@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

@MahaLakshmi-xs4sf Жыл бұрын

💥💯💥💯💥💯💥💯awesome

@kinglucky5122 Жыл бұрын

Very efficiently explained. Thanks for help, Subscribed❣

@MrWebDesignerAnas Жыл бұрын

Glad it was helpful!

@whossvero Ай бұрын

gracias bro

@pallavipradhan156 3 ай бұрын

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

@SamuelSilva-tz2ks 2 жыл бұрын

Thanks very much for this video. Awesome

@MrWebDesignerAnas 2 жыл бұрын

My pleasure!

@sachinpunpher3967 2 жыл бұрын

thanks for this amazing tutorial

@delforjf 2 жыл бұрын

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

@serazummunirz 10 ай бұрын

Life saver.

@muhammadfaiznorepohan3019 5 ай бұрын

this what i looking forrrr

@abdelilahhasnaoui7943 4 ай бұрын

thanks man

@pichitiem205 4 ай бұрын

thank you so much good code;

@icaliquid6245 2 жыл бұрын

Nice

@MrWebDesignerAnas 2 жыл бұрын

Thanks

@otmanebel4744 Жыл бұрын

Awesome 😃

@hestranho Жыл бұрын

excellent!

@sulmansah3622 3 жыл бұрын

Nice,

@Noritoshi-r8m Жыл бұрын

Fantastic. Good guide, ty.

@MrWebDesignerAnas Жыл бұрын

Glad it was helpful!

@stwarrior9983 2 жыл бұрын

Nice one again, keep it up

@adarshagrahari902 Жыл бұрын

Thanks for this video🥰

@MrWebDesignerAnas Жыл бұрын

You’re welcome 😊

@fahrulikhsanhidayatullah 9 ай бұрын

great vid mate

@adhamclerc589 2 жыл бұрын

perfect ♥

@fredriksundgren2326 2 жыл бұрын

Thank you SO SO SO SO much ❤️

@MrWebDesignerAnas 2 жыл бұрын

You're so welcome!

@cesarmolina95 Жыл бұрын

Thanx a lot!!

@abbosjonanvarov9272 2 жыл бұрын

i like it

@cameronfletcher6506 Жыл бұрын

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

@fakeyejoshua781 11 ай бұрын

Thanks

@daelymusings 5 ай бұрын

thank youuu!!

@sabamta1723 Жыл бұрын

thanks a lot!

@RoastedMalo 2 жыл бұрын

great video, thanks

@MrWebDesignerAnas 2 жыл бұрын

You are welcome!

@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

@omegaraoul 7 ай бұрын

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

@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

@haryoolule5690 2 жыл бұрын

thank you very much, still have some issue to ADDRESS

@fatimaabobaker173 2 жыл бұрын

👌☘

@animelibrary1256 Жыл бұрын

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

@lithembasolontsi7174 7 ай бұрын

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

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

@hinkum8253 2 жыл бұрын

Thank you :)

@MrWebDesignerAnas 2 жыл бұрын

You're welcome!

@BogdanSimionDev 2 жыл бұрын

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

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

@tusharsharma4534 2 жыл бұрын

why that popup is showed when I refresh my webpage

@mohammedminhaz8 Жыл бұрын

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

@Nisaicanisa 2 жыл бұрын

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

@MrWebDesignerAnas 2 жыл бұрын

might this help you : kzfaq.info/get/bejne/aruKl7ahnraxeWg.html

@sscalerts 3 жыл бұрын

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

@xmenky 4 ай бұрын

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

@hafezagina Жыл бұрын

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

@deniscountryboy 2 жыл бұрын

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

@MrWebDesignerAnas 2 жыл бұрын

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

@zain564 2 жыл бұрын

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

@natashapramodsawant6157 Ай бұрын

I want the source code is avaiable....

@ajnonymous.p 2 жыл бұрын

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

@MrWebDesignerAnas 2 жыл бұрын

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

@ajnonymous.p 2 жыл бұрын

@@MrWebDesignerAnas how? what should i put?

@MrWebDesignerAnas 2 жыл бұрын

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

@AnjuGupta-jy6lj 2 жыл бұрын

You are using which code editor?

@MrWebDesignerAnas 2 жыл бұрын

vs code editor

@compmadman 3 жыл бұрын

great!code pls

@user-ud8cs8hu6e Жыл бұрын

i want with indicator right and left

@gmaservicios3826 2 жыл бұрын

puedes pasarme el codigo!

@stephanusveri8134 2 жыл бұрын

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

@MrWebDesignerAnas 2 жыл бұрын

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 2 жыл бұрын

code please

@manastewari311 Жыл бұрын

@JJ-nv6nl Жыл бұрын

Life saver

@pranshusati5818 2 жыл бұрын

Where do I call the Java script function?

@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 2 жыл бұрын

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

@-MrHow- 2 жыл бұрын

Can you give us the source code?

@candrasniper3404 6 ай бұрын

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 4 ай бұрын

Github link😢 needed its called reuse

@-MrHow- 4 ай бұрын

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

@jisthergaming 2 жыл бұрын

what editor did you use?

@MrWebDesignerAnas 2 жыл бұрын

vs code editor

@jisthergaming 2 жыл бұрын

@@MrWebDesignerAnas can you drop down the source code

@pranshusati5818 2 жыл бұрын

the java script did not work

@thinleywangdo3086 Жыл бұрын

Pop up not working

@srinivaslavudiya9171 3 жыл бұрын

how do i download source code?

@gustavogarces3454 2 жыл бұрын

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.