jQuery Lightbox with Caption to Show Image, Video & iframe

jQuery Lightbox with Caption Text and Image
Code Snippet:poptrox
Author: Ajlkn
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 3,929
License: MIT
Edit Code online: View on CodePen
Read More

The Poptrox is a lightweight, AJAX-ready, responsive, and flat design jQuery lightbox with caption. It helps you to create a gallery to show images, videos (YouTube, Vimeo, Wistia, Brightcove), Soundcloud tracks, and iframe in a popup lightbox. It can be highly customized with CSS & its available options.

How to Create a Lightbox with Caption using jQuery

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. Create the 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>			
</div>

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>
</div>

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

$(document).ready(function(){

   $('#gallery').poptrox();
			
});

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;
}

Advanced Configuration Options

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

$('#gallery').poptrox({
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
});

That’s all! hopefully, you have successfully created a lightbox with a caption. If you have any questions or facing any issues, feel free to comment below.

Leave a Comment

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

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X