How to create the effect of pictures thrown in a table?

Question

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:

Load pictures from folder (this part I already did)
Display them randomly on the browser (I don't know how to make the images appear as if they were a bunch of pictures thrown into a table, unorganized, some on top of others, rotated in different angles) this is where I have more trouble.
Have the images grow to a large size on hover. (I can do this)
If clicked, the image displays some extra info (this I am unsure, but I'm guessing I'll be adding a div and just dynamically filling it up with info of the clicked image)?

What exactly do you have problems with? You should break the project down to parts and ask specific questions if you're stuck with any of them. — JJJ, Aug 29 '11 at 13:46
Sounds like you have some ideas floating around your head on how to get started. For the randomness of the images you can try looping through each image and getting the random position, rotation angle, and z-index. I would suggest diving in and trying different things, it's the best way to learn. — Jack, Aug 29 '11 at 13:54
Do you mean something like this http://demo.marcofolio.net/polaroid_photo_viewer/ — Simon Arnold, Aug 29 '11 at 13:57
@Jack thanks, that's exactly what I intend to do (dive in and learn) and let me check that. — Tsundoku, Aug 29 '11 at 14:02
@Simon that's EXACTLY what I want to do, well a little different but the overall idea — Tsundoku, Aug 29 '11 at 14:03

Teneff · Accepted Answer · 2011-08-29T14:21:30.753

This is my version of the "thrown" effect:

HTML:

<ul id="x">
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</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;
}

jsFiddle Demo

How to create the effect of pictures thrown in a table?

1 Answers1