Interactive Photo Desk with jQuery and CSS3

In this little experiment we created an interactive photo desk that provides some “realistic” interaction possibilities for the user. The idea is to have some photos on a surface that can be dragged and dropped, stacked and deleted, each action resembling the real world act. For example, if we drag a picture, […]

View demoDownload source

In this little experiment we created an interactive photo desk that provides some “realistic” interaction possibilities for the user. The idea is to have some photos on a surface that can be dragged and dropped, stacked and deleted, each action resembling the real world act.

For example, if we drag a picture, it get’s “picked up” first, making it appear a little bit bigger, since it would be closer to us. Dropping it results in the picture being “thrown back” to the table, in a random rotation. Viewing all photos mirrors the action of collecting all images into a pile and viewing the first one in a none rotated way. Clicking to see the next one then, makes the previous one being thrown back to the surface. Deleting an image will make it appear as a crumpled paper ball.
When using the shuffle function, the photos get rotated and spread over the desk randomly.

You can download the source code of this and experiment with it, there are many more possibilities to discover and integrate.

We are using two important jQuery plugins: 2D Transform for animating rotations and Shadow Animation for animating the box shadow.

The images are taken from the amazing photostream of tibchris on Flickr.

The rotation did not work well with IE (although in principle it should) so we don’t rotate when IE is used.

We hope you enjoy this little experiment!!

View demoDownload source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 40

Comments are closed.
  1. 1

    Please let me know hoe to add next and previous link in the bigger images …..

    Thanks

  2. 2

    How simple/difficult would it be to add a rotate feature?
    Therefore enabling us to rotate to any angle by click+drag on an icon.
    Thank you! :D

  3. 3

    @Chris It’s quite simple – but it won’t be saved to the pic and thus would not be permanent.

    You may use JQuery Dragable to achieve and the already existing CSS3-Code snippet to achieve that.

    To save your chances, you would need server-side scripting, too. Like a PHP script to which you would send the new angle via AJAX and then save it somewhere (unless you wish to rotate the image itself).

  4. 6

    Your tutorial is great but I have a couple questions regarding code. I have one group of photos on my site and I want to make a second group. I copied and pasted all of the css and html, but I’ve having some difficulties in the java script. For instance here is a snippet of the code i’m using:

    var windowsH = $(window).height();
    $container.find(‘.pd_photo’).each(function(i){
    var $photo = $(this);

    OR HERE:

    var $photo = $container.find(‘.pd_photo:nth-child(‘+idx+’)');

    So where it says .pd_photo, I also want there to be a .pd_movid. I’ve tried adding it by saying (‘.pd_photo’,’.pd_movid”) but that doesn’t work. I’ve tried it with and without the apostrophes, with and without the commas, but nothing seems to work. if i just have the ‘.pd_movid’ than everything works fine, but if i have both objects together than the code doesn’t work… hopefully this made some sense… help please!

  5. 7

    Great script. Is it at all possible to modify it, so that I can set where each photo first appears? If I was able to specify x,y co-ords for each photo, it would be fantastic. Users could still drag them wherever they like, I’d just like a set starting layout instead of a randomly generated one. Ta!

  6. 8

    i love those in beautiful smiles on the Gallery Images :-)

    nice pictures…

  7. 9

    I took Dane’s advice and implemented image rotation in IE6-8. It should work now.

    You may download the updated file here: http://yanaframework.net/download/photodesk.zip

    Rotation is limited to -/+45 degrees though, but I guess this should be okay.

    @Sean sure you can. Just search for:

    ‘top’ : (Math.floor(Math.random() * (maxH – minH + 1)) + minH) +’px’,
    ‘left’ : (Math.floor(Math.random() * (maxW – minW + 1)) + minW) +’px’,

    Comment it out and set your start-up position via the style-attribute instead. (line 94 in my edit of Mary’s script)

    @Lauren I understand that, you want two galleries on one site, right? There is a bug in the original version that prevents you from having 2 photo desks on the same page. I fixed it a while ago. If this is what you want, try using my patch above, it should be working.

    Like this:

    $(‘#image_pane1′).photoDesk();
    $(‘#image_pane2′).photoDesk();

    Remember to set a fixed size for your image panes or it won’t work.

  8. 10

    How to decrease the initial image sizes (being almost like an icon) and how to make the images bigger when you hilight them?

    Nice job, by the way!

  9. 11

    I wrote something similar for Mootools forge called PhotoSurface.

    http://mootools.net/forge/p/photosurface

    It handles advanced options like dynamic loading of high res images on selection to keep large numbers of photos responsive. Might be worth a look if just for reference.

  10. 12

    Hello, sorry my English is not very good.

    It’s really good the photo desk you have created. I thank you for the contribution you’ve made.
    I implemented a module for drupal for personal use (http://www.promotoraroca.com/cargar-tu-imagen). I am developing a cleaner version to be published as a drupal module.

  11. 14

    Hey Mary, I’m using this for my school project and i have a question. In your codes you said that

    /* for now we hardcode the values of our thumb containers*/
    var photoW = 184;
    var photoH = 205;

    can you teach me how to not hardcode? Because i have different sizes photos.

    Thankyou.

  12. 16

    Tom your update is great but it does not seem to work with IE9. I am unable to manually move the photos around. Not the end of the world until one is covering a button.
    If I make any progress with getting it to work in IE 9, I’ll share but its a little beyond me I wager.

    Any one have any tips on inserting links to other pages into the either the title or long description? I’ll work it out but I bet there are some more elegant solutions around.
    Regards
    Brian

Comments are closed.