jQuery plugins are a beautiful feature of jQuery, they offer easy and straight forward ways to import advanced jQuery into your project.
An example way to use a jQuery plugin in a web page is to use the code: $('#id').yourPlugin();
You must import the javascript file as well.
All functions and variables inside a jQuery plugin can not be used outside the plugin area.
To use the plugin functions you have to call the code with $('#id').yourPlugin();
So what are we going to build?
We are going to build a jQuery lightbox plugin.
The plugin will create two new divs to present the information.
One div is the background - this will enable a user to click on the body to close the light box.
And one div to present the image with a title.
Step one
First create two files,
- index.html
- lightBox.jQuery.js
It is important to have the file name format to be like pluginName.jQuery.js.
(function(jQuery){
jQuery.fn.lightBox = function(){
};
})(jQuery);
The javascript above if how you open and close a jQuery plugin.
Step three
Now we don't the link to go to the href location when clicked so we need some code to prevent the link from activating.
The format of the html for the lightbox is <a href="bigimage.jpg" class="lightItUp"><img src="smallimage"/></a>
Anyway here is the code to prevent the link from commencing:
Notice the jQuery.fn.lightBox, this declares the plugins name, in this case the plugin is called shine.
Next go to your html file and import this plugin eg. <script type="text/javascript" src="lightBox.jQuery.js"></script>
Call the plugin by adding $('.lightItUp').lightBox();
Notice the class lightItUp, this will only activate the plugin for images with the class lightItUp.
Step two
So lets start building the inside of the plugin.
First we will call a new variable and call it element, it will store $(this)
For the next bit of code I will be using jQuery instead of $, so it will be jQuery(this) instead of $(this).
$ does the exact same as jQuery.
So we will have to get the size of the browser window so we can center the lightbox.
We do this with:
var maskHeight = jQuery(document).height();
var maskWidth = jQuery(window).width();
The mask will be the background of the lightbox, you can colour the mask if you want but I have left it transparent.
Next we will get the scroll position so the lightbox will center the screen.
var placement = 0;
jQuery(window).scroll(function () {
placement = document.body.scrollTop
});
After we will need to prevent the click from commencing and instead get the contents in the link href
The html for this plugin is: <a href="bigimage.png" class="lightItUp'><img src="smallimage.png"/></a>
The code to prevent the link from commencing is:
jQuery(element).click(function() { return false; });
Step three
Next we need to have an event to trigger the lightbox and mask to appear, to do this add:
jQuery(element).click(function(){
});
Now we need to get the href and title content, to do this use:
var imageUrl = jQuery(this).attr("href");
var imageTitle = jQuery(this).attr("title");
Now we have the link to the big image and the title, we can display the image and the title inside the lightbox.
Below is the full code for the rest of this plugin, I will divide the following code into three sections.
Adding the mask and lightbox, animating the title and closing the lightbox.
jQuery(element).click(function(){
jQuery('body').append('<div style="position:absolute; top:0px;" id="mask"></div>');
jQuery('#mask').css({'width':maskWidth,'height':maskHeight});
jQuery('#mask').fadeIn(1000);
jQuery('#mask').fadeTo("slow",0.8);
var imageUrl = jQuery(this).attr("href");
var imageTitle = jQuery(this).attr("title");
jQuery('.lightbox').remove();
The above code creates a background mask and fades it in, before the plugin shows the lightbox, it removes any other lightboxes with .remove().
if(imageUrl.search(".png") != -1 || imageUrl.search(".jpg") != -1 || imageUrl.search(".gif") != -1 || imageUrl.search(".bmp") != -1 || imageUrl.search(".jpeg") != -1){
jQuery('body').append('
<div id="lightImage" class="lightbox" style="display: none; padding: 8px; width: 600px; height: 600px; background: #fff; overflow: hidden; color: #000; border: 1px solid #ccc;"><img style="width: 600px; height: 600px; margin-bottom: 8px;" src="'+imageUrl+'" alt="" />'+imageTitle+'<a id="lightClose" style="float: right; cursor: pointer; margin-right: 10px;">Close</a></div>');
}
jQuery('#lightImage').css({
"position" : "absolute",
"left" : windowWidth / 2 - '300',
"top" : placement + windowHeight /2 - '300'
});
jQuery('.lightbox').hide(function(){
jQuery('#lightImage').fadeIn().animate({ height: '630px' }, 300, function() {});
});
});
The code above creates the lightbox with .css() and then fades in the lightbox. The code also animates the lightbox to present the title.
jQuery("body").click(function(event) {
if(event.target.id == 'lightClose'){
jQuery('#lightImage').animate({height: '600px'}, 300, function() {jQuery('#lightImage').fadeOut(function(){jQuery('.lightbox').remove(); })});
jQuery('#mask').fadeOut(function(){jQuery('#mask').remove(); });
}
});
jQuery("body").click(function(event) {
if(event.target.id == 'mask'){
jQuery('#lightImage').animate({height: '600px'}, 300, function() {jQuery('#lightImage').fadeOut(function(){jQuery('.lightbox').remove(); })});
jQuery('#mask').fadeOut(function(){jQuery('#mask').remove(); });
}
});
The code above is used to close the box, the user can click on the background (the mask) or the close link in the lightbox.
The final plugin code
(function(jQuery){
jQuery.fn.shine = function(){
var element = this;
var windowWidth = jQuery(window).width();
var windowHeight = jQuery(window).height();
var imageHeight = jQuery(element).height();
var imageWidth = jQuery(element).width();
var maskHeight = jQuery(document).height();
var maskWidth = jQuery(window).width();
maskWidth = '95%';
var placement = 0;
jQuery(window).scroll(function () {
placement = document.body.scrollTop
});
jQuery('body').css({
"overflow-x" : "hidden"
});
jQuery(element).click(function() { return false; });
jQuery('#mask').click(function(){
});
jQuery(element).click(function(){
jQuery('body').append('<div style="position:absolute; top:0px;" id="mask" class="mask"></div>');
jQuery('#mask').css({'width':maskWidth,'height':maskHeight});
jQuery('#mask').fadeIn(1000);
jQuery('#mask').fadeTo("slow",0.8);
var imageUrl = jQuery(this).attr("href");
var imageTitle = jQuery(this).attr("title");
jQuery('.lightbox').remove();
if(imageUrl.search(".png") != -1 || imageUrl.search(".jpg") != -1 || imageUrl.search(".gif") != -1 || imageUrl.search(".bmp") != -1 || imageUrl.search(".jpeg") != -1){
jQuery('body').append('<div id="lightImage" class="lightbox" style="display:none; padding:8px;width:600px; height:600px; background:#fff; overflow:hidden; color:#000; border:1px solid #ccc;"><img src="'+imageUrl+'" style="width:600px; height:600px; margin-bottom:8px;">'+imageTitle+'<a id="lightClose" style="float:right; cursor:pointer; margin-right:10px;">Close</a></div>');
}
jQuery('#lightImage').css({
"position" : "absolute",
"left" : windowWidth / 2 - '300',
"top" : placement + windowHeight /2 - '300'
});
jQuery('.lightbox').hide(function(){
jQuery('#lightImage').fadeIn().animate({ height: '630px' }, 300, function() {});
});
});
jQuery("body").click(function(event) {
if(event.target.id == 'lightClose'){
jQuery('#lightImage').animate({height: '600px'}, 300, function() {jQuery('#lightImage').fadeOut(function(){jQuery('.lightbox').remove(); })}); jQuery('#mask').fadeOut(function(){jQuery('#mask').remove(); });
}
});
jQuery("body").click(function(event) {
if(event.target.id == 'mask'){
jQuery('#lightImage').animate({height: '600px'}, 300, function() {jQuery('#lightImage').fadeOut(function(){jQuery('.lightbox').remove(); })}); jQuery('#mask').fadeOut(function(){jQuery('#mask').remove(); });
}
});
};
})(jQuery);
