jQuery Lightbox Plugin: jQuery.apLightBox

Lightbox is a JavaScript technique. Normally used to display images and other web content using modal dialog. Image/content is shown up at center filling most of the screen, and the rest of the window is dimmed out. Lightbox was originally the name of a specific JavaScript plugin, written by Lokesh Dhakar. However, here is the plugin developed using jQuery framework with different options to display content.

Why should I use apLighBox slider?

apLighBox slider is a light weight and easy to understand. It’s very easy to customize and to integrate in project.

How to install?

To install jQuery.apLightBox plugin in the project, just include the “jquery-aplightbox-plugin” file in your project directory with one of the jQuery 1.7.1+ file.

I have used HTML5’s data attribute to integrate different behavior of the jQuery.apLightBox plugin, so you don’t need to worry about the W3C validation of extra unnecessary elements in your HTML.

<a class="overlay" href="#example1">Div from same page</a>

There are 4 options available to use with the data-target attribute:

1. data-target=”internal”
   Show content from the div hidden in the same page.
2. data-target=”video”
   Open a video from any of the third party site like: youtube.com or vimeo.com etc…
3. data-target=”external”
   Display content from third-party page in the apLightBox window.
4. data-target=”external-div”
   Display content from any specific div of third-party page in the apLightBox window.

View Demo

HTML Code:

<ul>
	<li><a href="javascript:;" data-href="#example1" data-target="internal" class="overlay" title="Div from same page">Div from same page</a></li>
	<li><a href="javascript:;" data-href=".example2" title="Internal Video" class="overlay1" data-target="internal">Internal Video</a></li>
	<li><a href="javascript:;" data-href="mfY1NKrzqi0" title="Youtube Video" class="overlay2" data-target="video">YouTube video</a></li>
	<li><a href="javascript:;" data-href="other-page.html" target="_blank" title="Page from Same/External domain" class="overlay3" data-target="external">Page from Same/External domain</a></li>
	<li><a href="javascript:;" data-href="other-page.html#slide-1" target="_blank" title="Div from another page" class="overlay" data-target="external-div">Div from another page</a></li>
</ul>

JavaScript Code:

<script src="../siteware/js/jquery-1.11.2.min.js"></script>
<script src="jquery-aplightbox-plugin.js"></script>
<script>
	$(".overlay").apLightBox();
	$(".overlay1").apLightBox({
		animation:true,
		direction:'left',
		customClass:'vdowidth'
	});
	$(".overlay2").apLightBox({title:true, titlePos:'top', display:'fade'});
	$(".overlay3").apLightBox({animation:true, direction:'bottom'});
</script>

Defaults & Options

The default values and options are as below; you can override them at the time of implementation.

AP.defaults = {
	height: '60%',				// Height of the lightbox window can be in px, % or em etc...
	width: '60%',				// Width of the lightbox window can be in px, % or em etc...
	animation: false,			// DEFAULT = false, OPTION = true & false
		direction: 'top',		// IF ANIMATION = true, DEFAULT = top, OTHER OPTIONS = top, bottom, left & right
		time: 700,				// IF ANIMATION = true, DEFAULT = 700, YOU CAN SET TIME IN MILISECONDS
	display: 'show',			// DEFAULT = show, OPTION = fade & show
		duration: 500,			// IF DISPLAY = fade, YOU CAN SET DURATION IN MILISECONDS, DEFAULT = 500
	top: '',					// DEFAULT = center, OPTION = postion from top in pixel
	left: '',					// DEFAULT = center, OPTION = postion from left in pixel
	title: false,				// DEFAULT = false, OPTION = true & false
		titlePos: 'bottom',		// IF TITLE = true, YOU CAN SET POSITION OF TITLE, DEFAULT = bottom, OPTIONS = top & bottom
	customClass: '',			// DEFAULT = blank, YOU CAN SET ONE OR MORE CLASS FOR SPECIFIC CSS
}