Manish Gupta | iManish.co.in - imJQMosaic Plugin

imJQMosaic Plugin

Overview

imJQMosaic is a simple jQuery plugin that creates mosaic pattern using an image.

This is a pure JavaScript based jQuery plugin. Apart of just creating the mosaic pattern on an image, it also facilitates the user to put menus on top of the mosaic tile(s). Hence, it can be beautifully used as navigation menu. It can also serve as a substitute to the popular Flash based navigations on the home pages of a website or application which unfortunately don't work on mobile phones not supporting Flash content.

This plugin is based on the technique of CSS sprites and also uses some of the new features introduced in CSS3. The plugin requires latest browsers that support HTML5 and CSS3. In absence of adequate browser, the plugin gracefully degrades and still works! Ideal behavior of this plugin can be viewed in Safari 4 or Firefox 3.5. But it works with Chrome and IE 8 also.

Don't feel shy to appreciate, if you like the plugin. I will be happy and encouraged in case you like it and use it in your application(s). Use the links below for your feedback or issues.

Examples


				$.imJQMosaic({
					image:'example_03.png',
					target: 'sample_3',
					frameWidth: '890',
					frameHeight:'300',
					numberOfTilesX: '4',
					numberOfTilesY: '3',
					tileMargin: '2',
					tileBorderRadius: '5',
					effectIntensity: '0.4',
					effectColor: '#cccccc'
			   		},{
			   		menuStyle:{font:"Lucida Grande", fontColor:"#ff0", fontSize:"4.2em", background:"#f00" },
			   		menu:[
			   			{tileNumber: '7', title: 'n e w'},
			   			{tileNumber: '8', title: 'y o r k'} 
			   		]
			   	});


			$.imJQMosaic({
				image:'example_03.png',
				target: 'sample_4',
				frameWidth: '850',
				frameHeight:'300',
				numberOfTilesX: '4',
				numberOfTilesY: '1',
				tileMargin: '20',
				tileBorder: '1',
				tileBorderColor: '#222',
				tileBorderRadius: '100',
				effectIntensity: '0.8',
				effectColor: '#0599dd'
		   		},{
		   		menuStyle:{font:"Lucida Grande", fontColor:"#234562", fontSize:"1.2em"},
		   		menu:[
		   			{tileNumber: '1', title: '<br/><br/><br/><br/><br/><br/><br/><br/>home', href: 'http://imanish.co.in', alt: 'Click here to checkout my website'},
		   			{tileNumber: '3', title: '<br/><br/><br/><br/><br/>profile', href: 'http://imanish.co.in/profile.html', alt: 'Click here to see my profile'},
		   			{tileNumber: '4', title: '<br/>contact', href: 'http://imanish.co.in/contact.html', alt: 'Click here to see my contact details'} 
		   		]
		   		});


			$.imJQMosaic({
				image:'example_01.jpg',
				target: 'sample_1',
				frameWidth: '720',
				frameHeight:'300',
				numberOfTilesX: '20',
				numberOfTilesY: '9',
				tileBorder: '1',
				tileBorderColor: '#609731',
				tileBorderRadius: '3',
				effectIntensity: '0.4',
				effectColor: '#c6e346'
		   		});


			$.imJQMosaic({
				image:'me.png',
				target: 'sample_2',
				frameWidth: '748',
				frameHeight:'590',
				numberOfTilesX: '6',
				numberOfTilesY: '5',
				tileMargin: '1',
				tileBorderRadius: '5',
				effectIntensity: '0.4',
				effectColor: '#ccc'
		   		});

Options

jQuery.imJQMosaic( imageOptions )

jQuery.imJQMosaic( imageOptions, menuOptions )

imageOptions:

image	String	Required
The image that needs to be rendered as mosaic pattern. The string value can either be a relative or absolute URL of the image. It is a required field.
target	String	Required
Id of the container where the mosaic needs to be appended. Need to make sure that the id uniquely identifies the container element. It is a required field.
frameWidth	Integer	Required
Width of the mosaic frame. Ideally this width should match the image width. It is a required field and should be a valid number greater than zero.
frameHeight	Integer	Required
Height of the mosaic frame. Ideally this height should match the image height. It is a required field and should be a valid number greater than zero.
numberOfTilesX	Integer	Required
Number of tiles required along the width of the mosaic frame. This value should be a number greater than zero. This is also a required field.
numberOfTilesY	Integer	Optional
Number of tiles required along the height of the mosaic frame. This value should be a number greater than zero. This is an optional field. If the parameter is not specified, the tile will be a square tile.
tileMargin	Integer	Optional
Width of the margin along the four sides of a tile. This should be a numeric value greater than zero. It is an optional field. If not specified, it will take a margin of 0px.
tileBorder	Integer	Optional
Width of the border along the four sides of a tile. This also should be a numeric value greater than zero. It is an optional field. If not specified, it will show no borders.
tileBorderColor	String	Optional
Color value for the border color of the tile, along its four sides. It can be a hexadecimal string containing the color code or color name as used in CSS. It is an optional field. This is applicable only if a border is specified.
tileBorderRadius	Integer	Optional
Radius of the tile at four corners. It is a numeric value greater than zero. It is an optional field. Please note that this parameter will take effect only if the client browser supports CSS3.
effectIntensity	Float	Optional
Intensity of the hover effect over each tile. This should be a float value between 0 and 0.99. It is an optional field.
effectColor	String	Required
Color value of the hover effect over each tile. Color can either be a hexadecimal color code or color name as used in CSS. It is an optional field.

menuOptions:

menuStyle	Object	Optional
Styling options for the menu display. It should be an object with following supported values, font, fontSize, fontColor, and background. font - the font family for the menu text. Value should be similar to that specified in CSS. fontSize - font size for the menu text. This should be a string value either in em or px units. fontColor - color of the menu text. This should be either a hexadecimal color code or color name as specified in CSS. background - background style for the menu. This attribute can except values similar to that specified in CSS.
menu	Object, Array	Optional
Object to hold menu details. The object should be an array and can have following attributes. tileNumber - index value of the tile where this menu should be displayed. The value must be an integer value greater than zero and less than total number of tiles. The index starts from 1 and increases from left to right, i.e., horizontally. It is a required field. title - title of the menu or text to be displayed. The value should normally be a text but in order to position the text vertically in the tile, <br/> can be used. It is also required field. href - the URL which should be invoked on click of this menu tile. Please note that the menu will open in the same window. This is an optional field. alt - alt text which should be displayed on hover over this menu tile. The value should be plain text without any styling. This is an optional field.