Tweet
imageCloud |
|
|---|---|
| Table of Contents: | |
| Current version Latest update | 2.0 02/05/2011 |
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:
I saw it and I said to myself "Wow! This is pretty cool"... and it seems that I was not the only thinking that (You can watch a video of it working here). I also thought, it would be great to have something like that on my Web site, so I started looking for it online, but I didn't find anything. So I decided to do it myself :)
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!
Although it is fully functional and working, it is far from finished yet (I wished it looked exactly like the Google Doodle). There are still a lot of things to develop, so if you decide to use it, I will really appreciate if you send me a message with any bug or thing that you notice.
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. 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. 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, oesn't work in IE). Default value: 0.
$(document).ready(function() {
$("#Div1").imageCloud({
width: 600,
height: 400,
color: '#aabb44',
link: true,
speed: 150,
borderSize: 3,
borderStyle: "groove",
borderRadius: 3
});
});
</script>
<div id="Div1">
<img src="..." width="..." height="..." title="http://www.alvaromontoro.com" />
<img src="..." width="..." height="..." title="http://www.muzaw.com" />
...
</div>
As a picture says a thousand words, you can see a working example here. You can use imageCloud in different ways:
|
<div class="imageCloud">
<img src="..." width="..." height="..." /> <img src="..." width="..." height="..." /> ... </div> |
<script type="text/javascript">
$(document).ready(function() { $("#Div1").imageCloud({ ...options... }); }); </script> <div id="Div1"> <img src="..." width="..." height="..." /> <img src="..." width="..." height="..." /> ... </div> |
IMPORTANT NOTICE: Webkit powered browsers (ie: Chrome and Safari) need the images to have the width and height attributes set for imageCloud to work.
Click here to download the JavaScript files of imageCloud.
Click here to download the JavaScript files of imageCloud with the images and a demo.
Here there is a list of the different updates and versions that the imageCloud has gone through since I started developing it in January 2011:
| Date | Version | Changes and comments |
|---|---|---|
| 02/05/2011 | v2.0 |
|
| 01/22/2011 | v1.0 |
|
| 01/21/2011 | v0.2 |
|
| 12/29/2010 | v0.1 |
|