How to Create Image Lightbox Gallery using HTML CSS and JavaScript ? - GeeksforGeeks

15 Dec, 2021
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 sill add som CSS for our own purpose. In the last section, we will link the downloaded JS snd CSS files.We have to download the lightbox, we can download that from the link: https://github.com/lokesh/lightbox2/releases
Creating 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:
sumitgumber28
sweetyty
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property