How to Create Image Lightbox Gallery using HTML CSS and JavaScript ? Last Updated : 26 Jul, 2024 Comments Improve Suggest changes Like Article Like Report A lightbox gallery is basically used to view the gallery images in detail specifically. You can code the JavaScript to do so but also we can use some downloaded JS and CSS. In this article, we will download the lightbox and attach the JS and CSS files into our code. For our own design satisfaction, we can also use the CSS code as we want. We will divide the task into three sections. In the first section, we will create the structure in the second section we will add some CSS for our own purpose. In the last section, we will link the downloaded JS and CSS files.We have to download the lightbox, we can download that from the link: https://github.com/lokesh/lightbox2/releasesCreating Structure: In this section, we will code only in HTML to create a normal HTML gallery. HTML Code: HTML <!DOCTYPE html> <html> <head> <title>Lightbox Gallery</title> </head> <body> <h2>GeeksforGeeks</h2> <b>A Computer Science Portal for Geeks</b> <div class="gallery"> <a href= "https://media.geeksforgeeks.org/wp-content/uploads/20200318142254/html9.png"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200318143104/html10.png"> </a> <a href= "https://media.geeksforgeeks.org/wp-content/uploads/20200318142245/CSS8.png"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200318143101/CSS9.png"> </a> <a href= "https://media.geeksforgeeks.org/wp-content/uploads/20200318142240/Bootstrap5.png"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200318143058/Bootstrap6.png"> </a> <a href= "https://media.geeksforgeeks.org/wp-content/uploads/20200318142257/JavaScript2.png"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200318143106/JavaScript3.png"> </a> <a href= "https://media.geeksforgeeks.org/wp-content/uploads/20200318142303/jquery.png"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200318143108/jquery4.png"> </a> <a href= "https://media.geeksforgeeks.org/wp-content/uploads/20200318142309/php7.png"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200318143112/php8.png"> </a> </div> </body> </html> Design Structure: In this section, we will add some CSS property to make image gallery attractive.CSS Code: CSS <style> body { text-align: center; } h2 { color: green; } .gallery { margin: 10px 40px; } .gallery img { width: 200px; height: 50px; transition: 1s; padding: 5px; } .gallery img:hover { filter: drop-shadow(4px 4px 6px gray); transform: scale(1.1); } </style> Final Solution: In this section you have to link the downloaded CSS and JS file into your code. You can simply link the downloaded file by unzipping the file. For the CSS file, use the <link> tag with href attribute for the address of CSS and for JS file use the <script> tag with src attribute for the code. At last we have to put data-lightbox="mygallery" attribute inside the <a> tag. Next and previous button will automatically attached during JS file attachment.Final Code: HTML <!DOCTYPE html> <html> <head> <title>Lightbox Gallery</title> <link rel="stylesheet" type="text/css" href="lightbox2/dist/css/lightbox.min.css"> <script src= "lightbox2/dist/js/lightbox-plus-jquery.min.js"> </script> <style> body { text-align: center; } h2 { color: green; } .gallery { margin: 10px 40px; } .gallery img { width: 200px; height: 50px; transition: 1s; padding: 5px; } .gallery img:hover { filter: drop-shadow(4px 4px 6px gray); transform: scale(1.1); } </style> </head> <body> <h2>GeeksforGeeks</h2> <b>A Computer Science Portal for Geeks</b> <div class="gallery"> <a href= "https://media.geeksforgeeks.org/wp-content/uploads/20200318142254/html9.png" data-lightbox="mygallery"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200318143104/html10.png"> </a> <a href= "https://media.geeksforgeeks.org/wp-content/uploads/20200318142245/CSS8.png" data-lightbox="mygallery"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200318143101/CSS9.png"> </a> <a href= "https://media.geeksforgeeks.org/wp-content/uploads/20200318142240/Bootstrap5.png" data-lightbox="mygallery"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200318143058/Bootstrap6.png"> </a> <a href= "https://media.geeksforgeeks.org/wp-content/uploads/20200318142257/JavaScript2.png" data-lightbox="mygallery"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200318143106/JavaScript3.png"> </a> <a href= "https://media.geeksforgeeks.org/wp-content/uploads/20200318142303/jquery.png" data-lightbox="mygallery"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200318143108/jquery4.png"> </a> <a href= "https://media.geeksforgeeks.org/wp-content/uploads/20200318142309/php7.png" data-lightbox="mygallery"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200318143112/php8.png"> </a> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Create Image Lightbox Gallery using HTML CSS and JavaScript ? S Sabya_Samadder Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to create image slider using HTML CSS and JavaScript ? An image slide, or slideshow, is a dynamic display of images that automatically transitions from one to the next, often with animations. To create an image slide, use HTML to structure the images, CSS for styling and animations, and JavaScript to control the timing and transitions between images.App 3 min read How to Create Image Magnifier using HTML CSS and JavaScript? An image magnifier is a feature that allows users to zoom into specific parts of an image, simulating a magnifying glass effect. Itâs created using HTML for structure, CSS for styling, and JavaScript to control the zoom functionality dynamically on hover or click.There are two methods to create an i 2 min read How to Create Image Gallery using JavaScript? An Image Gallery is a collection of images displayed in a grid or slideshow format on a webpage. To create an Image Gallery using JavaScript, you can dynamically load images, create HTML elements, and use CSS for styling. JavaScript can add interactivity, like transitions and navigation controls.Her 3 min read How to create a Portfolio Gallery using HTML and CSS ? The portfolio gallery is useful when your website contains different types of content or so much content. With the help of a portfolio gallery, you can easily display all the content on your front page to the user. To create a portfolio gallery we will need only HTML and CSS. We can use JavaScript a 4 min read How to create swinging Image Hanger using HTML and CSS ? In this article, we will learn how to create a type of Image Hanger that undergoes a swinging motion using HTML and CSS. This can be used to add interactivity to the page or highlight an image to draw attention.Approach:We will first create an HTML file in which we are going to add an image for our 3 min read How to preview Image on click in Gallery View using HTML, CSS and JavaScript ? In this article, we see how easily we can create an Image Gallery with a preview feature using HTML, CSS, and some JavaScript.ApproachCreate a div with a class container.Create two more div inside the first div one for the main view and the other for the side view with classes main_view and side_vie 2 min read How to create a Spotlight Effect using HTML and CSS ? In this article, we are going to create a spotlight effect over the image when we hover over it. This is mainly based on HTML, CSS and JavaScript. The below steps have to be followed to create this effect.HTML Section: In this section, we will create a container elements for the background image and 4 min read How to Create an Image Element using JavaScript? Creating an image element dynamically using JavaScript is a useful technique when you want to add images to a webpage without having to manually write the <img> tag in your HTML. This allows for more flexibility, as we can create and manipulate images based on user interactions or other condit 2 min read How to Create a Responsive Image Gallery using CSS? Creating a responsive image gallery using CSS is a common task in web development. A responsive gallery adjusts to different screen sizes and ensures that images look good on devices ranging from mobile phones to desktop monitors. In this article, we will explore different approaches to creating a r 3 min read How to create a Color Generator using HTML CSS and JavaScript ? In this article, we will develop a Color Generator application using HTML, CSS, and JavaScript.In this application, we have created the Multi Format color generator. Users can select Colour Types like RGB, HEX, and CMYK. Use the sliders to customize the color and Inout field in case of HEX and color 6 min read Like