ImageCloud

Download Demo

ImageCloud is a jQuery plug-in based on Google’s Doodle designed for the Christmas holidays on 2010. “Basically” it was a bunch of frames with images that, when you mouse over, grow to their real size:

ImageCloud, takes all the images within a DIV tag (it could be any other though) and creates random smaller frames that grow when the mouse goes over them, and shrink when the mouse goes out. This frames are randomly positioned so you get a different imageCloud every time that you reload the page!

1. INCLUDE JS FILES

<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/jquery.imageCloud.mini.js"></script>

2. HTML

<div id="ic1" class="imagecloud">
	<img src="./upload/cloud1.jpg" width="350" height="250" alt="1" />
	<img src="./upload/cloud2.jpg" width="200" height="300" alt="2" />
	<img src="./upload/cloud3.jpg" width="300" height="200" alt="3" />
	<img src="./upload/cloud4.jpg" width="200" height="300" alt="4" />
	<img src="./upload/cloud5.jpg" width="250" height="175" alt="5" />
	<img src="./upload/cloud6.jpg" width="250" height="200" alt="6" />
	<img src="./upload/jaen2.jpg" width="145" height="196" alt="13" />
	<img src="./upload/cloud7.jpg" width="300" height="225" alt="7" />
	<img src="./upload/cloud8.jpg" width="300" height="200" alt="8" />
	<img src="./upload/cloud9.jpg" width="300" height="200" alt="9" />
	<img src="./upload/cloud10.jpg" width="300" height="225" alt="10" />
	<img src="./upload/cloud11.jpg" width="300" height="225" alt="11" />
	<img src="./upload/cloud12.jpg" width="250" height="150" alt="12" />
</div>

3. JAVASCRIPT

$(document).ready(function() 
	$("#ic1").imageCloud(
		width: 600,
		height: 400,
		color: '#aabb44',
		link: true,
		speed: 150,
		borderSize: 3,
		borderStyle: "groove",
		borderRadius: 3
	);
);

4. OPTIONS

The imageCLoud plug-in is highly customizable. You can provide different parameters:

• Width: Number. It sets the width of the area where the image will be displayed. Default value: 600px.


• Height: Number. It sets the height of the area where the image will be displayed. Default value: 400px.


• Color: Color type. This is the border color for the images, it can be any color format (i.e.: #444, #304050, rgb(100,150,200), etc). Default value: #800000 (dark red).


• Link: true|false. If sets to true, then the images will link to the page indicated in the title. Default value: false.


• Speed: Number. It indicated the speed of the effect; a lower value means a faster effect, a higher value will result in a slower effect. Default value: 200.


• BorderSize: Number. It is the size of the border in pixels. Default value: 6.


• BorderStyle: Border-style type (solid|dotted|dashed|inset|…). Default value: “solid”.


• BorderRadius: Number. Makes the frame border round (similar to border-radius, doesn’t work in all versions of IE). Default value: 0.

 

ImageCloud