Created
October 19, 2013 21:22
-
-
Save bchumney/7061748 to your computer and use it in GitHub Desktop.
jQuery imJQMosaic Plugin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* imJQMosaic: a jQuery plugin | |
* | |
* imJQMosaic is a simple jQuery plugin for creating mosaic effect on an image | |
* using JavaScript. It also allows user to put menu links on top of tiles. | |
* | |
* For usage and examples, visit: | |
* http://imanish.co.in/demo/imjqmosaic | |
* | |
* Licensed under the MIT: | |
* http://www.opensource.org/licenses/mit-license.php | |
* | |
* Copyright (c) 2009 iManish.co.in (http://imanish.co.in) | |
* | |
* @author Manish Gupta (manish - dawt- msgupta -at- gmail -dawt- com) | |
* @requires jQuery v1.2 or later | |
* @version 0.1 | |
*/ | |
(function ($) { | |
$.extend($, { | |
mosaicO: '', | |
imJQMosaic: function (imageoptions, menuoptions) { | |
var t = this; | |
var image = new Image(); | |
image.src = imageoptions.image; | |
mosaicO = { | |
image:image, | |
target: imageoptions.target, | |
frameWidth: imageoptions.frameWidth?parseInt(imageoptions.frameWidth):image.width, | |
frameHeight: imageoptions.frameHeight?parseInt(imageoptions.frameHeight):image.height, | |
imageOffsetX: 0, | |
imageOffsetY: 0, | |
numberOfTilesX: imageoptions.numberOfTilesX?parseInt(imageoptions.numberOfTilesX):-1, | |
numberOfTilesY: imageoptions.numberOfTilesY?parseInt(imageoptions.numberOfTilesY):-1, | |
tileMargin: imageoptions.tileMargin?parseInt(imageoptions.tileMargin):0, | |
tileBorder: imageoptions.tileBorder?parseInt(imageoptions.tileBorder):0, | |
tileBorderColor: imageoptions.tileBorderColor, | |
tileBorderRadius: parseInt(imageoptions.tileBorderRadius), | |
effect: imageoptions.effect?imageoptions.effect:'flash', | |
effectIntensity:(imageoptions.effectIntensity && parseFloat(imageoptions.effectIntensity)<1)?imageoptions.effectIntensity:'show', | |
effectColor: imageoptions.effectColor?imageoptions.effectColor:'#fff', | |
menuFont: (menuoptions && menuoptions.menuStyle && menuoptions.menuStyle.font)?menuoptions.menuStyle.font:'Lucida Grande', | |
menuFontSize: (menuoptions && menuoptions.menuStyle && menuoptions.menuStyle.fontSize)?menuoptions.menuStyle.fontSize:'1.0em', | |
menuBackground: (menuoptions && menuoptions.menuStyle && menuoptions.menuStyle.background)?menuoptions.menuStyle.background:'none', | |
menuFontColor: (menuoptions && menuoptions.menuStyle && menuoptions.menuStyle.fontColor)?menuoptions.menuStyle.fontColor:'#000', | |
menuEffect: (menuoptions && menuoptions.menuEffect)?menuoptions.menuEffect:'zoom', | |
menuItems: (menuoptions && menuoptions.menu)?menuoptions.menu:'' | |
}; | |
if(mosaicO.numberOfTilesX==-1){mosaicO.numberOfTilesX=10} | |
t.renderMosaic(); | |
if(menuoptions) t.renderMenu(); | |
t.postRender(); | |
}, | |
renderMosaic: function(){ | |
var t = this; | |
var html = '<div id="imjqmosaic" style="' | |
+ 'width:' + mosaicO.frameWidth + 'px;' | |
+ 'height:' + mosaicO.frameHeight + 'px;' | |
+ 'position:relative;clear:both;' | |
+ '"></div>';$('#'+ mosaicO.target).append(html); | |
var cc = 0, tx, ty, stepX, stepY; | |
var ix = mosaicO.frameWidth - (mosaicO.numberOfTilesX*2*(mosaicO.tileMargin + mosaicO.tileBorder)); | |
if (ix<0) {return false;} | |
var iy = mosaicO.frameHeight - (mosaicO.numberOfTilesY*2*(mosaicO.tileMargin + mosaicO.tileBorder)); | |
if (iy<0) {return false;} | |
tx = Math.floor(ix/mosaicO.numberOfTilesX); | |
stepX = 3*(mosaicO.tileMargin + mosaicO.tileBorder) + tx; | |
ty = tx; | |
stepY = stepX; | |
if(mosaicO.numberOfTilesY!=-1){ | |
ty = Math.floor(iy/mosaicO.numberOfTilesY); | |
stepY = 3*(mosaicO.tileMargin + mosaicO.tileBorder) + ty; | |
} | |
for ( var y = mosaicO.imageOffsetY; y < mosaicO.frameHeight; y += stepY) { | |
for ( var x = mosaicO.imageOffsetX; x < mosaicO.frameWidth; x += stepX) { | |
cc++; | |
var html_f = ''; | |
html_f += '<div id="imjqmosaic_tile_' + cc | |
+ '" class="imjqmosaic_tile" style="background-image:url('+ mosaicO.image.src +');background-repeat:no-repeat;background-position:' + (-1 * x) | |
+ 'px ' + (-1 * y) + 'px;width:' + tx + 'px;height:' + ty | |
+ 'px;float:left;' | |
+ 'border:'+ mosaicO.tileBorder +'px solid '+ mosaicO.tileBorderColor +';margin:'+ mosaicO.tileMargin +'px;' | |
+ '-moz-border-radius:' + mosaicO.tileBorderRadius + 'px;-webkit-border-radius:' + mosaicO.tileBorderRadius + 'px;' | |
+ '"><div class="e" style="background-color:'+ mosaicO.effectColor +';text-align:center;vertical-align:middle;width:100%;height:100%;opacity:0.0;filter:alpha(opacity=0);' | |
+ 'width:' + tx + 'px;height:' + ty + 'px;' | |
+ '-moz-border-radius:' + mosaicO.tileBorderRadius + 'px;-webkit-border-radius:' + mosaicO.tileBorderRadius + 'px;' | |
+ '"></div></div>'; | |
$('#'+mosaicO.target).find('#imjqmosaic').append(html_f); | |
} | |
} | |
}, | |
renderMenu: function(){ | |
var t = this; | |
for(i = 0;i<mosaicO.menuItems.length;i++){ | |
var tileNumber = mosaicO.menuItems[i].tileNumber; | |
var title = mosaicO.menuItems[i].title; | |
var href = mosaicO.menuItems[i].href; | |
var alt = mosaicO.menuItems[i].alt; | |
var html = ''; | |
var el = $('#'+mosaicO.target + ' #imjqmosaic #imjqmosaic_tile_' + tileNumber).find('.e'); | |
if (typeof(href)!='undefined') el.attr('title',alt); | |
if(typeof(href)!='undefined') { | |
html = '<a href="' + href + '" style="text-decoration:none;color:'+ mosaicO.menuFontColor +';font-family:'+ mosaicO.menuFont +';font-size:'+ mosaicO.menuFontSize +'">' + '</a>'; | |
el.html(title).css({"opacity":"0.6","cursor":"pointer", "background":mosaicO.menuBackground}).wrap(html); | |
} else { | |
el.html(title).css({"opacity":"0.6","background":mosaicO.menuBackground, "color":mosaicO.menuFontColor, "fontSize": mosaicO.menuFontSize, "fontFamily":mosaicO.menuFont}); | |
} | |
} | |
}, | |
postRender: function(){ | |
var t = this; | |
$('#'+mosaicO.target + ' #imjqmosaic .imjqmosaic_tile').hover(function(){ | |
if($(this).find('.e').html()==''){ | |
if(mosaicO.effect == 'flash'){ | |
$(this).find('.e').animate({"opacity": mosaicO.effectIntensity}, "fast").animate({"opacity": "0.0"}, "fast"); | |
} | |
} else { | |
if(mosaicO.menuEffect == 'zoom'){ | |
$(this).find('.e').animate({"opacity": mosaicO.effectIntensity}, "fast").animate({"opacity": "0.6"}, "fast"); | |
} | |
} | |
},function(){} | |
); | |
} | |
}); | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment