Responsive Image Lightbox using HTML CSS & JavaScript

Hey friends, today in this blog you'll learn how to create Responsive Image Lightbox using HTML CSS & JavaScript. Earlier I have shared a blog on how to create Responsive Filterable Image Gallery in JavaScript and now it's time to create Image Lightbox.

You may have seen image lightbox on many websites. Lightbox showcases images and videos by filling the screen and dimming out the rest of the web page. In the image lightbox, there are slide controls so you can easily change the image to next or previous. There are many JavaScript libraries for lightbox but today in this blog I'll show you how to create lightbox without using the JavaScript library or jQuery plugin.


In this program [Responsive Image Lightbox], there are six images on the webpage and when you click on the particular image then the lightbox appears with the selected image. In the lightbox, there is a total image and current image number on the top left side and a cross icon to the top right side. There are also previous and next icons to change the image. When you click on the cross icon then the lightbox will disappear and after again clicking on the particular image, the lightbox appears.

This image gallery and lightbox are fully responsive for all devices. On the pc, there are 3 three images in the single row but on the mobile devices, there is only one image in the single row. If you're feeling difficulty to understanding what I'm saying then you can watch a full video tutorial of this responsive image lightbox.

Video Tutorial of Responsive Image Lightbox 



In the video, you have seen the preview or demo of the responsive image lightbox and how I created this. As you know, I didn't use any JavaScript library to create this image lightbox. If you're a beginner then you may have difficulties to understanding the JavaScript codes of this program but don't worry I've tried to explain each JavaScript line with writing comments so once you download the code files you'll easily understand the codes.

You might like this:



Responsive Image Lightbox [Source Codes]

To create this program [Responsive Image Lightbox]. First, you need to create three files, HTML File, CSS File, and JavaScript File. After creating these files just paste the following codes into your files. You can also download the source code files of this image lightbox from the given download button.

Note: If you copy the codes and paste them into your files then you won't get the images of this program and I've also commented the script and some other tags in the HTML file because I got multiple warnings while uploading this post. So download the source files of this program from the below download button and get all files, images that are used in this program. alert-info

HTML CODE:

CSS CODE:

JAVASCRIPT CODE:




7 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

  1. Hi, thanks for the tutorial! It worked perfectly and neat!

    I wonder if you could tell me how to add caption so people can know what my portfolio picture is about.

    Is it possible to combine the other tutorial to this one? I think the navigation from the other tutorial would be great on this one as well.

    Many thanks!

    ReplyDelete
    Replies
    1. Yes you can easily combine if you know little bit HTML & CSS

      Delete
  2. I tried to mix both tutorials (this and gallery filtering) and scripts are conflicting, do you know how to fix it? I think is something with window onload. Thanks!

    ReplyDelete
  3. Thank you! I have send you an email! I have also asked for help here but nobody helped:

    https://stackoverflow.com/questions/65753102/how-to-find-and-solve-two-javascript-conflicts

    ReplyDelete
  4. thanks for really nice work . .

    ReplyDelete
  5. I've entered them all and the x is only displayed the first time or not at all when I click on a picture

    ReplyDelete

Post a Comment

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Previous Post Next Post
CodingNepal
Subscribe our YouTube Channel