Highly Configurable & Responsive Content Lightbox Plugin For jQuery - poptrox

File Size: 407 KB
Views Total: 21530
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:'&#215;': Popup closer text
  • popupLoaderText:'&bull;&bull;': 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)

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.