Responsive Image Lightbox using HTML CSS & JavaScript | Lightbox Gallery in JavaScript

Подписаться 226 тыс.

Просмотров 49 тыс.

50% 1

Responsive Image Lightbox using HTML CSS & JavaScript | Lightbox Gallery in JavaScript
Download Codes From Here - www.codingnepalweb.com/2021/0...
Responsive Filterable Image Gallery
➤ • Responsive Filterable ...
Second Channel - bit.ly/3aHNkru
Facebook - / coding.np
Instagram - / coding.np
Timestamps:
0:00 Intro of image lightbox
2:03 HTML & CSS start
4:43 Making gallery responsive
5:27 Creating img preview box
11:17 JavaScript start
12:18 Showing user clicked image in preview box
16:39 Making previous and next buttons working
Music Credit:
Track: BEAUZ & JVNA - Crazy [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • BEAUZ & JVNA - Crazy |...
Track: Jordan Schor & Harley Bird - Home [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • Jordan Schor & Harley ...
Track: Jimmy Hardwind - Want Me (feat. Mike Archangelo)
➤ Watch: • Jimmy Hardwind - Want ...
Track: Lost Sky - Vision [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • Lost Sky - Vision | Du...

Опубликовано:

4 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 87

@CodingNepal 3 года назад

Remember to Like & Subscribe 💙

@itsokay007 3 года назад

♥️

@sankaranarayanan7847 3 года назад

♥♥

@user-nq2js8ng4t 3 года назад

@media (max width :700px) That's the perfect size

@rabindragupta8019 3 года назад

Great to see this amazing talent from Nepal. May you always rise 👌😍

@CodingNepal 3 года назад

Thank you 💙

@herbertflick8843 3 года назад

Hello Prakash, your tutorial is very well structured. Your instructions and explanations are clear and I could understand them well. Now I have a nice gallery - "programmed myself". Many Thanks!

@CodingNepal 3 года назад

You are most welcome

@jayshim3302 Год назад

Many Thanks for your kind instruction!

@jaypatel2580 Год назад

Your videos are very helpful for developing skills and knowledge for new learners 🫂🫂🫂, Thank you 🙏❤️

@stefaniacristini Год назад

Thank you very much it helped a lot and thank you for the playlist music, was an amazing choice.

@romuloalves9349 3 года назад

Ótimo vídeo parabéns ✌.

@karimnassir5207 3 года назад

You are great man , thank you very mutch , since 3 month I search like this toturial

@CodingNepal 3 года назад

Glad I could help

@TheCodingOdyssey 3 года назад

Nice work! Keep up with the good content.

@CodingNepal 3 года назад

Thank you 💙

@sankaranarayanan7847 3 года назад

actually, you deserve more subs 51.3k is really low for the quality of content you make

@CodingNepal 3 года назад

Thank you so much.. Really appreciate it and keep supporting 💙

@Jovem-Padawan 2 года назад

To click outside the preview-box and close it I did it like this, I hope it's useful shadow.addEventListener("click", function (e) { if (e.target == this) { previewBox.classList.remove("show"); shadow.style.display = "none"; }; }); or this shadow.onclick = () => { previewBox.classList.remove("show"); shadow.style.display = "none"; }

@rathaheng7263 2 года назад

Thank you so much !

@ellem1125 Год назад

would this be difficult to combine with a responsive slider, so that you could hit the left or right arrow and another 6 images would come up but have this same effect?

@toma1610 Год назад

Really nice. Now, how can I add a caption to every single picture dinamically, using variables or for loops. Something like, for every [ i ], 0, 1, 2, 3... belongs a particular description?

@ujenbasi9495 3 года назад

really enjoyed this video keep making love it

@CodingNepal 3 года назад

Sure.. Stay tuned 💙

@bluebridge9849 3 года назад

Amazing an very helpful 💙

@CodingNepal 3 года назад

Thanks man.. Stay tuned 😁

@julijanaljevar2235 3 года назад

Thank you, this is great.

@CodingNepal 3 года назад

Glad you liked it!

@zemozemac7137 3 года назад

This is great work, so glad I found this chanel! Can you make tutorial on how to make scrolling tabs with html, css, javascript?

@CodingNepal 3 года назад

I already made it... Please visit channel

@kiddhkane 2 года назад

This is very useful, thank you!

@CodingNepal 2 года назад

Glad it was helpful!

@yubiroaster6285 3 года назад

Thank you brother ❤️........ This video is very helpful for me🤗💯🇳🇵

@CodingNepal 3 года назад

Thank you 💙

@harrylacey Год назад

Hello! Thank you for your video! I'm only learning how to code and this was very helpful. I'm just trying to figure it out how to make a loop, once I get to the last image I have to go all the way back to the first, would like to know how to keep clicking "next" to go to the first image again. Thanks for your help! :)

@noortaqi2996 3 года назад

hi i have a problem with the const it is on the second line of java script and there is an error saying that it is reserved what should i do i need this for a project ):

@raihankhan5728 3 года назад

great and amazing talent...just wow

@CodingNepal 3 года назад

Thank you so much

@aryandoifode4192 2 года назад

hii i have a question where can we put the headline in the html code as f i put one it goes in the side

@magiccode3396 3 года назад

awesome bro

@CodingNepal 3 года назад

Thank you bro 💙

@coralnichols5878 2 года назад

I wish I saw this a year ago. I would have less greys. I might just scrap the Lightbox I have now. But one question, how do you add a footer to the image?

@itsokay007 3 года назад

Osm bro😍

@CodingNepal 3 года назад

Thanks bro 💙

@itsokay007 3 года назад

@@CodingNepal my pleasure ♥️

@toluolaifa4745 3 года назад

Hello, great job, The site you directed us to is under construction where can we download the source code

@neeleshsharma6170 2 года назад

hi Team, Please help me i am struck in a bug that is whenever I click the images and and press cross btn to return to my web the x-axis shows scroll bar and I tried every possible way that I knew. Please help

@shivamdubey4783 Год назад

Sir just one doubt how can we make two images when in mobile while doing g responsive

@UncutGenre 2 года назад

Is it open source and can be used for development?

@AureliaLofi 10 месяцев назад

thank you for that bro

@sharathsasidharan3125 3 года назад

Hi, this is really amazing sweet, and simple . However currently, the only way to close the modal is using the 'X' button in the top right-hand corner, What I would like, is to be able to close the modal by clicking anywhere off the image. i.e. on the black background around the image, Any help would be greatly appreciated thanks!

@CodingNepal 3 года назад

Simple I select the close icon to close modal but if you want to close it on body click then select the body also and the codes are same as close button click

@robertsuarez3661 2 года назад

Hi, there’s a problem. The close button and next and previous arrow button is not showing.

@zyulaikhaerhad Год назад

same! did u manage to fix it?

@toma1610 Год назад

Looks that is what I look for. Just want to make smaller the thumbnails.

@subzerosongs9562 3 года назад

Can you pls make a video about Popup RU-vid video design in HTML & CSS 'cause I find your videos very helpful

@CodingNepal 3 года назад

Sure.. Stay tuned 💙

@AnjuGupta-jy6lj 2 года назад

hey when i am putting display:flex; , it is not working

@EZHEVNKA 2 года назад

a scroll appears at the bottom of the screen after the image is closed, how to fix it?

@phpmysql2518 3 года назад

how add some transition broo??

@tharunvenkat2 3 года назад

Dude, can you please provide the direct download link, not able to find in your site.

@CodingNepal 3 года назад

Sorry still I haven't uploaded the codes of this tutorial.. Once I upload I'll inform you.

@mateusmachado7099 3 года назад

Hello, your site is not working for me, it is online?

@CodingNepal 3 года назад

Yes it's online... Please check again and if you're going to my website for this tutorial codes then codes aren't uploaded yet but there you can get many other tutorials code which are definitely helpful for you. I'll upload the codes of this tutorial soon.

@andreiene8695 3 года назад

Why my image quality decreased so much after i made the preview-box?

@CodingNepal 3 года назад

It's because the image width is resized to fit in the preview box

@rabindragupta8019 3 года назад

It would be great if you make videos in Nepali 🇳🇵

@CodingNepal 3 года назад

Yes bro but as we know still there are no more viewers in Nepal who are interest to watch this type of videos.

@SankizTime 3 года назад

1st

@CodingNepal 3 года назад

Great man 💙

@SankizTime 3 года назад

@@CodingNepal 🤗

@vincentyap6376 4 месяца назад

5 star

@toma1610 Год назад

HELLO!!! Nice tool. You know...? I implemented some extra code to give a particular description or caption to every single picture, DYNAMICALLY, using the “data-xxx” attribute. ¿Where can I share it?