jQuery Lightbox with Caption to Show Image, Video & iframe

The Poptrox is a lightweight, AJAX ready, responsive and flat design jQuery lightbox with caption. It helps you to create gallery to show images, video (YouTube, Vimeo, Wistia, Brightcove), Soundcloud tracks and iframe in popup lightbox.

It can be highly customize with CSS & its available options.

Plugin Overview

Plugin: poptrox
Author: Ajlkn
Licence: MIT Licence
Published: June 7, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 406 KB

How to Make jQuery Lightbox with Caption

1. Load the jQuery and poptrox‘s JavaScript file into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<!-- Poptrox JS -->
<script src="js/jquery.poptrox.min.js"></script>

2. Build HTML structure for a basic gallery and put your images in it.

<div id="gallery">
   <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>			

3. If you want to add videos & iframe contents, similarly use the following structure.

<div id="gallery">
   <a href="http://youtu.be/loGm3vT8EAQ" data-poptrox="youtube,800x480"><img src="images/youtube.png" alt="" title="A YouTube Video" /></a>
   <a href="http://vimeo.com/22439234" data-poptrox="vimeo,800x480"><img src="images/vimeo.png" alt="" title="A Vimeo Video" /></a>
   <a href="http://api.soundcloud.com/tracks/93549370" data-poptrox="soundcloud"><img src="images/soundcloud.png" alt="" title="A Soundcloud Track" /></a>
   <a href="http://bcove.me/qly3wjdw" data-poptrox="bcove,636x360"><img src="images/brightcove.png" alt="" title="A Brightcove Video" /></a>
   <a href="http://fast.wistia.net/embed/iframe/fe8t32e27x" data-poptrox="wistia,800x480"><img src="images/wistia.png" alt="" title="A Wistia Video" /></a>
   <a href="iframe.html" data-poptrox="iframe,600x400"><img src="images/iframe.png" alt="" title="An IFRAME" /></a>

4. Finally, initialize the plugin in jQuery document ready function.



5. The popup lightbox doesn’t require any CSS style, it will generate styles dynamically. However, if you want to style your gallery, then the basic CSS styles for gallery layout.

#wrapper {
	max-width: 600px;
	margin: 0 auto;
	text-align: center;

#gallery {
	overflow: hidden;

#gallery a {
	display: block;
	float: left;

#gallery a img {
	display: block;
	border: 0;

Advance Configuration Options for Poptrox Lightbox with Caption

The following are advance configuration options to create / customize “poptrox lightbox”.

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
	caption:					null,			// Caption settings (see docs)
	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
	usePopupForceClose:			false,			// If true, popup can be closed even while content
												// is loading
	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:				null			// Called when popup opens

Be the first to comment

Leave a Reply

Your email address will not be published.


This site uses Akismet to reduce spam. Learn how your comment data is processed.