Responsive Multimedia Gallery Popup Plugin With jQuery - Galpop

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.