Interactive Photo Desk with jQuery and CSS3
Development July 1, 2010 by Mary Lou 25 Comments
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!!
You might also like
-
Minimalistic Slideshow Gallery with jQuery
-
Beautiful Photo Stack Gallery with jQuery and CSS3
-
Multimedia Gallery for Images, Video and Audio
-
Flickr Photobar Gallery
-
Fresh Sliding Thumbnails Gallery with jQuery and PHP
-
Sliding Panel Photo Wall Gallery with jQuery
-
Thumbnails Navigation Gallery with jQuery
-
Awesome Mobile Image Gallery Web App
-
Interactive Image Vamp up with jQuery, CSS3 and PHP
-
Music Portfolio Template with HTML5 and jQuery
awesome
Amazing! I really like it! Thank you very much!
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 :)
This is absolutely amazing may I post on my site in German translated?
hihihihi :-bd
Awesome. I wish i could do something like that myself. Where i could learn these?
@Cristian Thank you! You could start learning here: http://tympanus.net/codrops/category/tutorials/ :) Cheers, ML
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
Wonderfull! Damage whatsoever css 3.0 (rotate)
With the new technologies such as HTML5 and CSS3 we have to see many thinks ! :)
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 ;-)
damned code has disappeart
Pretty cool,
Thank you for sharing…
thanks buddy
excelente información esta sitio tiene buen contenido.
gracias
That’s really really awesome! Excellent job!
Excellent job..!!!
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?
is there a fix for this on the IE browser? there is no rotation effect in the IE 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.
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.
Please let me know hoe to add next and previous link in the bigger images …..
Thanks
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
@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).