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:
- data-target=”internal”
Show content from the div hidden in the same page. - data-target=”video”
Open a video from any of the third party site like:youtube.com
orvimeo.com
etc… - data-target=”external”
Display content from third-party page in theapLightBox
window. - 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 }
4 comments On jQuery Lightbox Plugin: jQuery.apLightBox
Great Ashish,
Could you please share a demo link?
Thanks.
Sure Kushal, I will share a demo link shortly.
Hi Kushal,
Here is the demo – http://demos.ashishuideveloper.in/aplightbox/.
Woah! I’m really digging the template/theme of this blog. It’s simple, yet effective. A lot of times it’s challenging to get that “perfect balance” between user friendliness and appearance. I must say you have done a amazing job with this. Additionally, the blog loads very fast for me on Chrome. Superb Blog!