Highly Configurable & Responsive Content Lightbox Plugin For jQuery - poptrox

poptrox is another simple yet fully customizable jQuery lightbox plugin for displaying html content (image, youtube/vimeo video, ajax content, iframe, URL, ...) in a responsive popup window.

Basic Usage:

1. Load the jQuery library and jQuery poptrox plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.poptrox.min.js"></script>

2. Wrap the html content in a wrapper and add a link to the thumbnail image that you want to open its large version in the popup window. Use img's title attribute for the image caption.

<div id="gallery"> 

<!-- Regular images --> 
<a href="images/1.jpg"><img src="images/1_thumb.jpg" alt="" title="Just an image (#1)" /></a> 
<a href="images/2.jpg"><img src="images/2_thumb.jpg" alt="" title="Just an image (#2)" /></a> 
<a href="images/3.jpg"><img src="images/3_thumb.jpg" alt="" title="Just an image (#3)" /></a> 

<!-- YouTube: Must be in share format (http://youtu.be/xxxxxxxxxxx) --> 
<a href="http://youtu.be/loGm3vT8EAQ" data-poptrox="youtube,800x480"><img src="images/youtube.jpg" alt="" title="A YouTube Video" /></a> 

<!-- Vimeo: Must be in share format (http://vimeo.com/xxxxxxxx) --> 
<a href="http://vimeo.com/22439234" data-poptrox="vimeo,800x480"><img src="images/vimeo.jpg" alt="" title="A Vimeo Video" /></a> 

<!-- Soundcloud: Must be in share format (https://api.soundcloud.com/tracks/xxxxxxxx) --> 
<a href="http://api.soundcloud.com/tracks/93549370" data-poptrox="soundcloud"><img src="images/soundcloud.jpg" alt="" title="A Soundcloud Track" /></a> 

<!-- IFRAME: Link straight to whatever page you want to open --> 
<a href="iframe.html" data-poptrox="iframe,600x400"><img src="images/iframe.jpg" alt="" title="An IFRAME" /></a> 

<!-- AJAX: Link to whatever content you want to pull in (must be on the same domain)  --> 
<!--<a href="path/to/whatever.html" data-poptrox="ajax,600x400"><img src="path/to/thumbnail.jpg" alt="" title="AJAX content" /></a>
			
<!-- Ignore: Use this if you want a particular thumbnail to just link out to something --> 
<a href="https://www.jqueryscript.net" data-poptrox="ignore"><img src="images/ignore.jpg" alt="" /></a> 

</div>

3. Call the plugin on the wrapper and you're done.

<script>
$(function() {
$('#gallery').poptrox({
usePopupCaption: true
});
});
</script>

4. Available options and callback functions to customize the plugin.

• preload:false: If true, preload fullsize images in the background
• baseZIndex: 1000: Base Z-Index
• fadeSpeed:  300: Global fade speed
• overlayColor:   '#000000': Overlay color
• overlayOpacity: 0.6: Overlay opacity
• windowMargin:   50: Window margin size (in pixels; only comes into play when an image is larger than the viewport)
• windowHeightPad:0: Window height pad
• selector:   'a': Anchor tag selector
• popupSpeed: 300: Popup (resize) speed
• popupWidth: 200: Popup width
• popupHeight:100: Popup height
• popupIsFixed:   false: If true, popup won't resize to fit images
• useBodyOverflow:true: If true, the BODY tag is set to overflow: hidden when the popup is visible
• usePopupEasyClose:  true: If true, popup can be closed by clicking on it anywhere
• usePopupLoader: true: If true, show the popup loader
• usePopupCloser: true: If true, show the popup closer button/link
• usePopupCaption:false: If true, show the popup image caption
• usePopupNav:false: If true, show (and use) popup navigation
• usePopupDefaultStyling: true: If true, default popup styling will be applied (background color, text color, etc)
• popupBackgroundColor:   '#FFFFFF': (Default Style) Popup background color (when usePopupStyling = true)
• popupTextColor: '#000000': (Default Style) Popup text color (when usePopupStyling = true)
• popupLoaderTextSize:'2em': (Default Style) Popup loader text size
• popupCloserBackgroundColor: '#000000': (Default Style) Popup closer background color (when usePopupStyling = true)
• popupCloserTextColor:   '#FFFFFF': (Default Style) Popup closer text color (when usePopupStyling = true)
• popupCloserTextSize:'20px': (Default Style) Popup closer text size
• popupPadding:   10: (Default Style) Popup padding (when usePopupStyling = true)
• popupCaptionHeight: 60: (Default Style) Popup height of caption area
• popupCaptionTextSize:   null: (Default Style) Popup caption text size
• popupBlankCaptionText:  '(untitled)': Applied to images that don't have captions (when captions are enabled)
• popupCloserText:'×': Popup closer text
• popupLoaderText:'••': Popup loader text
• popupClass: 'poptrox-popup': Popup class
• popupSelector:  null: (Advanced) Popup selector (use this if you  want to replace the built-in popup)
• popupLoaderSelector:'.loader': (Advanced) Popup Loader selector
• popupCloserSelector:'.closer': (Advanced) Popup Closer selector
• popupCaptionSelector:   '.caption': (Advanced) Popup Caption selector
• popupNavPreviousSelector:   '.nav-previous': (Advanced) Popup Nav Previous selector
• popupNavNextSelector:   '.nav-next': (Advanced) Popup Nav Next selector
• onPopupClose:   null: Called when popup closes
• onPopupOpen:nulll: Called when popup opens

Change logs:

v2.5.1 (2015-04-23)

• update.

v2.5 (2014-11-13)

• update.

v2.4 (2014-08-02)

• Partial rewrite to fix bugs (including orientation and Vimeo fullscreen bug);

v2.3.3 (2014-03-17)

• Fixed issue with multiple galleries;

v2.3.2 (2014-03-13)

• Fixed issue with multiple galleries;

---

This awesome jQuery plugin is developed by n33. For more Advanced Usages, please check the demo page or visit the official website.