Minimalist Image Lightbox Script - Wicked
File Size: | 4.45 KB |
---|---|
Views Total: | 1520 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A simple, minimal, responsive, animated lightbox script created for image gallery. Written in HTML, CSS/CSS3 and a little bit of jQuery.
How to use it:
1. Create the HTML template for the image lightbox.
<div id="gallery-lightbox-container"> <div id="gallery-lightbox"> <div id="lightbox-image-container"> <img id="lightbox-image" src="#"> <div> <p id="lightbox-text">**image description will be placed here by jQuery function**</p> <p id="exit-lightbox">✖</p> </div> </div> </div> </div>
2. Load the latest jQuery library in the document.
<script src="/path/to/jquery.min.js"></script>
3. Hide the lightbox container on page.
$('#gallery-lightbox-container').hide();
4. The main function to insert content to the lightbox.
function openLightbox() { $('#lightbox-text').html('<p>Description of Item</p>'); $('#lightbox-image').attr('src', 'image.jpg'); $('#gallery-lightbox-container').slideDown(200); }
5. The main CSS/CSS3 styles for the lightbox.
#gallery-lightbox-container { display: flex; position: fixed; width: 100%; height: 100%; top: 0; left: 0; align-items: center; justify-content: center; background-repeat: no-repeat; background-color: rgba(20, 10, 30, 0.88); overflow: auto; } #gallery-lightbox { position: relative; display: flex; justify-content: center; vertical-align: middle; align-items: center; flex-direction: column; /* margin: 120px auto 0 auto; */ width: 80%; height: 700px; } #lightbox-image-container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 100px 0 0 0; } /* less top margin on small devices */ @media screen and (max-width: 600px) { #lightbox-image-container { margin: 40px 0 0 0; } } #lightbox-image { width: 90vw; max-width: 700px; height: auto; margin: 15px; max-height: 500px; border-radius: 10px; box-shadow: 0 6px 20px 0 rgba(00, 00, 00, 0.6); } #lightbox-text { font-size: 1.2em; text-align: center; margin: 15px; width: 90vw; max-width: 400px; height: auto; color: #efd5d5; } #exit-lightbox { font-size: 2em; text-align: center; margin: 0 auto; line-height: 1; border: 1px solid #efd5d5; border-radius: 8px; padding: 8px 16px; width: 50px; color: #efd5d5; cursor: pointer; }
6. Open the image lightbox.
openLightbox();
Changelog:
2019-12-12
- JS updated
This awesome jQuery plugin is developed by tylerwoodcook. For more Advanced Usages, please check the demo page or visit the official website.