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

Glad it helped!

Awesome, thank you!

Glad it was helpful!

Glad it helped!

Glad it was helpful!

My pleasure!

You are welcome!

You’re welcome 😊

Thanks

You're so welcome!

you have to use swiper.js library then!

You're welcome!

vs code editor

@@MrWebDesignerAnas can you drop down the source code

vs code editor

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

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

@@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'; }

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

check your javascript code!

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

might this help you : ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-4UZdSp9PMI4.html

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

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

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

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

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

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

@@MrWebDesignerAnas how? what should i put?

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

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!

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

you the evenListener 'click' for each videos

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

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.

Github link😢 needed its called reuse

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

in the description!

Life saver