Author: | mcstudios |
---|---|
Views Total: | 1,706 |
Official Page: | Go to website |
Last Update: | February 17, 2019 |
License: | MIT |
Preview:

Description:
GLightbox is a simple yet powerful, mobile-friendly gallery lightbox plugin written in pure JavaScript and CSS/CSS3.
Features:
- Open/close animations: zoomIn, fade and zoom.
- Content slide animations: fade, slide, zoom.
- Support any content and even mixed content: images, HTML5 videos, Youtube/Vimeo videos, iframes, inline contents and much more.
- Lots of configuration options, callback functions, and API methods.
How to use it:
Import the ‘glightbox.css’ and ‘glightbox.js’ into the document.
<link href="dist/css/glightbox.css" rel="stylesheet"> <script src="dist/js/glightbox.js"></script>
Specify the content to be loaded in the gallery lightbox using ‘href’ attribute. Note that the grouped media content must have the same class.
<a href="https://vimeo.com/115041822" class="glightbox-demo"> <img src="https://picsum.photos/400/300/?random" alt="image"> </a> <a href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12085.977306439116!2d-73.96648875371474!3d40.77314541916876!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c258bf08488f6b%3A0x618706a9142daa0d!2sUpper+East+Side%2C+Nueva+York%2C+EE.+UU.!5e0!3m2!1ses-419!2smx!4v1511830027642" class="glightbox-demo"> <img src="https://picsum.photos/401/300/?random" alt="image"> </a> <a href="https://www.youtube.com/watch?v=Ga6RYejo6Hk" class="glightbox-demo"> <img src="https://picsum.photos/402/300/?random" alt="image"> </a>
To create Facebook like gallery lightbox with description boxes:
<a href="1.jpg" class="glightbox-demo" data-glightbox="title:Description Bottom; description: You can set the position of the desciption"> <img src="thumb.jpg" alt="image"> <div class="glightbox-desc"> <p>Description here</p> </div> </a>
Initialize the Glightbox library and done.
var myLightbox = GLightbox({ 'selector': 'glightbox-demo' });
Here is a list of all possible options and callback functions to customize the gallery lightbox.
selector: 'glightbox', skin: 'clean', closeButton: true, startAt: 0, autoplayVideos: true, descPosition: 'bottom', width: 900, height: 506, videosWidth: 900, videosHeight: 506, beforeSlideChange: null, afterSlideChange: null, beforeSlideLoad: null, afterSlideLoad: null, onOpen: null, onClose: null, loopAtEnd: false, jwplayer: { api: null, licenseKey: null, params: { width: '100%', aspectratio: '16:9', stretching: 'uniform' } }, vimeo: { api: 'https://player.vimeo.com/api/player.js', params: { api: 1, title: 0, byline: 0, portrait: 0 } }, youtube: { api: 'https://www.youtube.com/iframe_api', params: { enablejsapi: 1, showinfo: 0 } }, openEffect: 'zoomIn', // fade, zoom closeEffect: 'zoomOut', // fade, zoom slideEffect: 'slide', // fade, slide, zoom, moreText: 'See more', slideHtml: '', lightboxHtml: '', cssEfects: { fade: { in: 'fadeIn', out: 'fadeOut' }, zoom: { in: 'zoomIn', out: 'zoomOut' }, slide: { in: 'slideInRight', out: 'slideOutLeft' }, slide_back: { in: 'slideInLeft', out: 'slideOutRight' } }
API methods.
// Goto slide 3 myLightbox.goToSlide(3); // back to prev slide myLightbox.prevSlide(); // goto next slide myLightbox.nextSlide(); // get active slide myLightbox.getActiveSlide(); // close the gallery lightbox myLightbox.close();
Changelog:
02/17/2019
- Removed global body variable
02/15/2019
- delegate permissions to cross-origin iframes
02/07/2019
- Improved video autoplay
02/05/2019
- Bug fixes and improvements
v1.0.9 (12/06/2018)
- added svg to be displayed as an image
- Fixed error on IE11 – Multiple definitions of a property not allowed
v1.0.8 (10/16/2018)
- Fixes and improvements
v1.0.7 (09/02/2018)
- Fixes and improvements
v1.0.6 (06/08/2018)
- Bug fixes and improvements
Thanks a lot <3