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 […]

By in Playground on
Demo Download

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

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Experimental CSS-Only Carousels with Scroll-Driven Animations

Ideas for Image Motion Trail Animations

Interactive 3D Device Showcase with Threepipe

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 40

Comments are closed.

  3. 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 🙂

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

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

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

  10. 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 😉

  17. 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?

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

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

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

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

    Thanks

  22. 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! 😀

  23. @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).

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

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

  27. i love those in beautiful smiles on the Gallery Images 🙂

    nice pictures…

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

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

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

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

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

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