Skip to content

Instantly share code, notes, and snippets.

@bchumney
Created October 19, 2013 21:22
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save bchumney/7061748 to your computer and use it in GitHub Desktop.
Save bchumney/7061748 to your computer and use it in GitHub Desktop.
jQuery imJQMosaic Plugin
/*
* 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