Responsive Multimedia Gallery Popup Plugin With jQuery - Galpop
File Size: | 902 KB |
---|---|
Views Total: | 3112 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Galpop is a lightweight, configurable, responsive, multimedia gallery lightbox plugin that can be used to showcase your images, HTML, iframe, ajax content and much more.
More features:
- Left and right arrow keys for controls, Esc to close.
- Navigation arrows.
- Loops back to the beginning when reaching the last item.
- Auto updates on window resize.
- Prevents page scrolling when the gallery popup is opened.
- Loading spinner.
How to use it:
1. To get started, include jQuery library and the jQuery Galpop plugin's file on the page.
<link rel="stylesheet" href="css/jquery.galpop.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script> <script src="js/jquery.galpop.min.js"></script>
2. Create a basic image lightbox.
<a class="galpop-single" href="1.jpg"> <img src="1.jpg" alt="image 1"> </a>
$('.galpop-single').galpop();
3. Create gallery lighbox from a group of images. Note that the image's links must have the save classname.
<a class="galpop-multiple" data-galpop-group="multiple" href="1.jpg"> <img src="1.jpg"> </a> <a class="galpop-multiple" data-galpop-group="multiple" href="2.jpg"> <img src="3.jpg"> </a> <a class="galpop-multiple" data-galpop-group="multiple" href="3.jpg"> <img src="3.jpg"> </a> ...
$('.galpop-multiple').galpop();
4. Add more information to the gallery lightbox using the following attributes.
- data-galpop-link: custom link
- data-galpop-link-title: link title
- data-galpop-link-target: target attribute of the link
- title: image caption text
<a class="galpop-multiple" data-galpop-group="multiple" data-galpop-link="1.jpg" data-galpop-link-title="Click Here For More Info" data-galpop-link-target="_blank" title="Image Caption" href="1.jpg"> <img src="1.jpg"> </a> <a class="galpop-multiple" data-galpop-group="multiple" data-galpop-link="2.jpg" data-galpop-link-title="Click Here For More Info" data-galpop-link-target="_blank" title="Image Caption" href="2.jpg"> <img src="2.jpg"> </a> <a class="galpop-multiple" data-galpop-group="multiple" data-galpop-link="3.jpg" data-galpop-link-title="Click Here For More Info" data-galpop-link-target="_blank" title="Image Caption" href="3.jpg"> <img src="3.jpg"> </a>
5. Load an iframe into the lightbox popup.
<a href="ajax-content.html" class="click-open-iframe"> Click here to open iframe </a>
$('.click-open-iframe').galpop({ contentType: 'iframe' });
6. Load a specific part of an external file into the lightbox popup via AJAX.
<a href="ajax-content.html" data-galpop-container=".text-content" class="click-open-ajax"> Click here to open ajax </a>
$('.click-open-ajax').galpop({ contentType: 'AJAX', });
7. All default settings to customize the gallery popup plugin.
$('.trigger-element').galpop({ // Left and right arrow keys for controls, Esc to close arrowKeys: true, // Display next / prev controls controls: true, // Loop back to the beginning loop: true, // Maximum amount of pixels for width maxWidth: null, // Maximum amount of pixels for height maxHeight: null, // Percentage of screen size (overrides maxWidth and maxHeight) maxScreen: 90, // Update on window resize updateRsz: true, // Callback function after every panel load callback: null, // Prevent scrolling when pop-up is open lockScroll: true, // Type of content to load contentType: 'image', // HTML element to laod into AJAX AJAXContainer: 'body > *' });
8. You can also open the gallery popup manually:
$.fn.galpop('openBox',settings,images);
Change log:
2018-05-14
- v1.0.9: fix settings functions with no target
This awesome jQuery plugin is developed by Richard1320. For more Advanced Usages, please check the demo page or visit the official website.