Codesnipp.it Social Code Sharing

Anirudh

Create onhover image lightbox plugin using jquery

by Anirudh on Dec 04, 2011

var leftval; var imagewidth; (function($){ //alert("plugin loaded"); jQuery.fn.hoverlightbox = function(options) { return this.each(function(index,element){ var targetelemnt = jQuery(element); //alert(targetelemnt.length); targetelemnt.each(function(){jQuery(this).hover( function(){ //alert(targetelemnt.length); //Check if modal background exist if(!document.getElementById('box_modal_lightbox')) { jQuery('body').append('<div id="box_modal_lightbox"></div>'); } else if(document.getElementById('box_modal_lightbox')) { jQuery('#box_modal_lightbox').fadeIn('fast') } var imageurl = $(this).attr('href'); var lightboximage = new Image(); lightboximage.src = imageurl; lightboximage.onload = function(){imagewidth = lightboximage.width;/*console.log(imagewidth);*/ leftval =(parseInt(jQuery(window).width())- parseInt(imagewidth))/2; console.log(leftval); ///Check if img tag exist within modal if(jQuery('#box_modal_lightbox img').length <= 0) { jQuery('#box_modal_lightbox').append(''+imageurl+'); } else { jQuery('#box_modal_lightbox img').attr('src',imageurl); //jQuery('#box_modal_lightbox img').css("left",leftval); } jQuery('#box_modal_lightbox img').css("margin-left",leftval); } }, function() { jQuery('#box_modal_lightbox').fadeOut('fast'); } ) }) }); } })(jQuery)

Can't see the comments? Please login first :)