How we can create a grid layout based image gallery using HTML and CSS? Solution: See this CSS Grid Image Gallery With Lightbox, Tiled Layout Image Gallery.
Previously I have shared a masonry image grid program, this is also like that but it has a lightbox feature that makes it a gallery. Basically, this type of gallery contains many images in a grid-based layout like Pinterest. Most of the image hosting website using this type of grid or tiled layout showing the images.
Today you will learn to create Tiled Layout Image Gallery. Basically, there are some images which are divided and placed in 3 columns like gird. When you will click on any image then the image will expand with an overlay effect. On the second click on the image, that will become small as normal like a toggle.
So, Today I am sharing CSS Grid Image Gallery With Lightbox. There I have used pure HTML and CSS for creating the program, but there is little bit jQuery for the toggle feature. For the lightbox feature in the gallery, I have used the jQuery toggle function otherwise it is completely based on CSS. You can see this program on the website in the portfolio section.
If you are thinking now how this grid gallery actually is, then see the preview given below.
Preview Of Tiled Layout Gallery
See this video preview to getting an idea of how this tiled image gallery looks like.
Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- HTML CSS Responsive Pagination
- Moving Text Mask Hover Effect
- CSS Multi Layer Navigation
- Before and After Image Slider
CSS Grid Image Gallery With Lightbox Source Code
Before sharing source code, let’s talk about it. First, I have placed all the images inside a div using HTML <img src=""> tag. After that, I have created some other divs for creating the lightbox feature. And also in the HTML file, I have linked external files like jQuery, Bootstrap, Fonts, etc.
Now using CSS I have placed all the elements in the right place, as you can see in the preview. There I have used CSS column-count command to create the grid layout (info). Basically, The column-count CSS property breaks an element’s content into the specified number of columns. And there are some other column commands for define width and margin etc.
jQuery handling the toggle feature of the program, which is using in the lightbox feature. JS inserting the image in the modal box and makes the overlay effect. Left all other things you will learn after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files for that. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>Grid Image Gallery | Webdevtrick.com</title> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="gallery"> <img src="https://images.pexels.com/photos/2559175/pexels-photo-2559175.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="single-image" /> <img src="https://images.pexels.com/photos/3133685/pexels-photo-3133685.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="single-image" /> <img src="https://images.pexels.com/photos/3099358/pexels-photo-3099358.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="single-image" /> <img src="https://images.pexels.com/photos/2977304/pexels-photo-2977304.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="single-image" /> <img src="https://images.pexels.com/photos/3082313/pexels-photo-3082313.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="single-image" /> <img src="https://images.pexels.com/photos/3115006/pexels-photo-3115006.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="single-image" /> <img src="https://images.pexels.com/photos/2859169/pexels-photo-2859169.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="single-image" /> <img src="https://images.pexels.com/photos/3031075/pexels-photo-3031075.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="single-image" /> <img src="https://images.pexels.com/photos/2832039/pexels-photo-2832039.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="single-image" /> <img src="https://images.pexels.com/photos/2868223/pexels-photo-2868223.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="single-image" /> <img src="https://images.pexels.com/photos/2705755/pexels-photo-2705755.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="single-image" /> <img src="https://images.pexels.com/photos/2157166/pexels-photo-2157166.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="single-image" /> </div> </div> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> </div> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ .gallery { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; margin-top: 10px; overflow: hidden; } .gallery img { width: 100%; height: auto; transition: 500ms; margin-bottom: 10px; opacity: 0.8; page-break-inside: avoid; -webkit-column-break-inside: avoid; break-inside: avoid; } .gallery img:hover { opacity: 1; } .modal-img,.model-vid{ margin: 0; padding: 0; width: 100%; height: 100%; display: table } .modal-body{ padding: 0px; } .modal-dialog { height: 100%; position: relative; margin: auto; display: flex; align-items: center; justify-content: center; } .modal-content { border: none; } @media screen and (max-width: 767px) { .gallery { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .gallery div { margin: 0; width: 200px; } .modal-dialog { margin: 0 8vw; } } @media screen and (max-width: 479px) { .gallery { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } .gallery div { margin: 0; width: 200px; } } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 |
// Code By Webdevtrick ( https://webdevtrick.com ) $(document).ready(function () { $(".single-image").click(function(){ var t = $(this).attr("src"); $(".modal-body").html("<img src='"+t+"' class='modal-img'>"); $("#myModal").modal(); }); }); |
That’s It. Now you have successfully created CSS Grid Image Gallery With Lightbox, Tiled Layout Image Gallery. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
