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, it get’s “picked […]
photodesk

From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.

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!!

Tagged with:

ML 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.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 40

Comments are closed.
  1. Wow, this is pretty cool. Now I just ask if it is possible with normal text instead of photographs. Thanks for developing always awesome stuff. You are one of my favourites 🙂

  2. Awesome. I wish i could do something like that myself. Where i could learn these?

  3. Simply amazing. I would like to see the images come from a folder in the future instead of calling each image.

    • @alphaproductions Thank you! We usually do that with a PHP script that pulls the pictures from the folder structure. We used it in some other galleries and it should be easy to integrate. Cheers, ML

  4. With the new technologies such as HTML5 and CSS3 we have to see many thinks ! 🙂

  5. Hi Mary Lou,

    I always great development but i have see 2 or 3 mist… heeuu “remarques”.

    – First, Many div with non reference, i thinks you can use HTML5 balise like header for the “title” of yours tutos or dev.
    – 2, I thinks Html need to be Hierarchic, and I’m sick when I see too many div in div in div.
    I see, pearhaps , something like this :

    – 3, Criticism is easy, the Art Harder

    I hope I write good english …
    I’m always french guy 😉

  6. I took the effort to rewrite this demo to a real JQuery-Plugin. I also found a way to combine it with FancyBox – a lightbox clone – for full size image view.

    Will provide and post a download soon.
    Just one question: Are you fine with providing it under MIT- and GPL-Licence?

  7. is there a fix for this on the IE browser? there is no rotation effect in the IE 8

  8. No. This is not supported by the browser. It’s planned for IE9, which is scheduled for autumn this year.

    IE 7 and 8 have a mechanism capable of rotating exactly 90, 180 and 270 degree. But it is unable to use any other angles (not even 45).

    It cannot be fixed.

  9. Alright! I “remixed” the demo above.

    New:
    – now is standard JQuery plugin.
    – much less HTML needed
    – separate JS-Files + minimized version
    – integrates FancyBox (a LightBox-clone capable of playing even video and flash files).

    Now takes 5 optional arguments:

    photoW (width in pixel)
    photoH (height in pixel)
    showShuffle (en-/disable “shuffle” button)
    showView (en-/disable “view all” button)
    onDelete (callback function)

    I also fixed a bug where the boundaries of the container were not calculated correctly on init and when using “shuffle”.

    How to use the plugin:
    $(‘.myContainer’).photoDesk()

    That’s it! Hope you like it and THANKS to Mary Lou for creating the awesome photodesk demo.

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

    @Mary Lou you may want to copy this and possibly add your logo / author details. Drop me a line if I missed something.