I'd like to create the effect of having a bunch of pictures in the table (thrown out, no specific order, pieces of pictures covering other pictures, vertical, horizontal, skewed, etc) and also when the user hovers over an image it gets big, but I have no idea how to get started. What I've got so far is an image list automatically generated (in a ul) out of a folder in the server. Could anyone please give me some pointers as to how to get this done?
My question is how to do this? I've never done any effect remotely like this or always searched for plugins but I'd like to do this one myself.
EDIT
Breaking down the project:
This is my version of the "thrown" effect:
HTML:
<ul id="x">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
Javascript:
var list = document.getElementById('x');
var elements = list.getElementsByTagName('li');
for (var i=0; i<elements.length; i++) {
// random positon between 0px and 300px
elements[i].style.left = Math.ceil(Math.random()*300) + 'px';
elements[i].style.top = Math.ceil(Math.random()*300)+ 'px';
// random angle between -90 and 90 degrees
var rot = 'rotate(' + (Math.ceil(Math.random()*180) - 90) + 'deg)';
elements[i].innerHTML = rot;
// Firefox rotation
elements[i].style.MozTransform = rot;
// Safari/Chrome rotation
elements[i].style.WebkitTransform = rot;
// Opera Rotation
elements[i].style.OTransform = rot;
// all the rest
elements[i].style.roration = Math.ceil(Math.random()*180) - 90;
}