Search code examples
jqueryimagepicturegallery

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


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)?

Solution

  • 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