Creating a polaroid photo viewer with CSS3 and jQuery http://www.marcofolio.net Sat, 21 Nov 2009 08:32:17 +0100 FeedCreator 1.7.2 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc4720 Looks good Marco =D, really nice use of Javascript. I hate the fact that not all browsers are implementing the rules, making it almost useless to put on your website as a nice rich application. Damn the browsers. It would be so easy for us if there was 1 good standard which HAD to be implemented, or else the browser wouldn\'t be allowed online. We can only dream. Gaya Mon, 16 Mar 2009 21:38:13 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc4721 Thanks for the reply mate! Also check the JavaScript file in the demo and search for the following: [quote]// Internet Explorer doesn\'t have the \"window.innerWidth\" and \"window.innerHeight\" properties [/quote] I\'m really sorry for that mega-ugly \"fix\", but IE only allows checking the browser width & height [b]after[/b] the BODY tag. Damn you Microsoft! Marco Mon, 16 Mar 2009 21:45:03 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc4722 Works like a charm in Opera 9.6x of course :) Remco Tue, 17 Mar 2009 00:11:05 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc4726 Hi Remco, Thanks for checking it with Opera - Didn\'t test that browser. Didn\'t expect to \"not work\" in that one ;) . I do have one question: Is it because I added the \"box-shadow\" (plain) CSS3 property in the JavaScript file, or is it because of the \"-webkit-\" prefix (which means that Opera is using the Webkit engine too)? Marco Tue, 17 Mar 2009 07:16:41 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc4728 very good, but they are not clickable :( Vladimir Tue, 17 Mar 2009 09:23:46 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc4729 [size=large]very very nice![/size] Remco - you rock! Hezi Tue, 17 Mar 2009 09:43:10 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc4730 Awesome example, Marco. Good idea to make an example video. Janko Tue, 17 Mar 2009 13:28:12 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc4731 Actually, they are. Check the article and read the JavaScript examples from [quote]$(\".polaroid\").mouseup(function(e){[/quote] Currently, \"zooming in\" isn\'t added, but can be if you just modify that function ;). Now, when you click a polaroid, it just rotates back to zero degrees and placed on top :) . Marco Tue, 17 Mar 2009 13:32:21 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc4732 Thanks Janko! Yeah - The example vid is for IE and FF users (FF will have to wait a while, IE even longer). Like you said in the email: You could also retrieve your FlickR API using JSON to fill in the polaroids using your FlickR images ;) ! Marco Tue, 17 Mar 2009 13:33:52 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc4733 Thanks for the compliment Hezi ;) ! I assume that you complemented me (my name is Marco)? Or did you compliment Remco for testing in Opera? Marco Tue, 17 Mar 2009 13:45:33 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc4756 Great tutorial :) Will definitely have a play around with this later! Tom Sinclair Wed, 18 Mar 2009 16:15:05 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc4763 This is gah-hhhreat! Loving the drag n drop images. Thanks for a great post! ben smithson Thu, 19 Mar 2009 01:59:21 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc4965 Didn\'t quite figure out how to rotate the images, though. Will B. Mon, 30 Mar 2009 21:56:20 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc4966 The CSS \"transform\" property allows you to rotate elements. [quote]img { \'-webkit-transform\' : \'rotate(100deg)\' }[/quote] This will rotate all images with 100 degrees. This only works for browsers supporting the -webkit- prefix (Safari & Chrome). Hope this helps! Marco Mon, 30 Mar 2009 22:23:59 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc4970 Eventhough CSS3 isn\'t fully supported by some browser, I found myself unable to stop playing with CSS3. And this one is totally [b]Awesome... [/b] Great Work. and thanks for sharing. not2comply Tue, 31 Mar 2009 10:08:59 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc4985 The same counts for me - CSS3 has way to many awesome feautures to be put to the side. Hopefully that CSS3 will be the standard \"soon\" so Flash website will be completely obsolete and codes will have more ease in creating fancy stuff on a website. Thanks for your comment! Marco Tue, 31 Mar 2009 16:56:00 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc4989 This is one of the best JavaScript examples I have ever seen. Thanks Anthony Tue, 31 Mar 2009 21:01:25 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc5016 for a better shadow, stack transparent layer and for each moveto x+10 and y+10 ! know what i mean ? stack Thu, 02 Apr 2009 17:45:49 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc5020 Yeah - you\'re right. You could append another div with a transparent background image that would move to x+10 and y+10. This solution will make it cross-browser compatible. But that wasn\'t where this article was aiming to - It was about the awesomeness of CSS3 and what you can do with it ;) . That\'s why I choose the CSS3 box-shadow property. Anyway, thanks for your input - Always appreciated! Marco Thu, 02 Apr 2009 18:19:10 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc5023 Really I like it. Congratulations. Henry Thu, 02 Apr 2009 21:08:29 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc5056 The ui is nice. Can anyone help me out how to fix the width and height up to which a specific picture is expandable. I tried using background:no-repeat. but didn\'t seem to work for me. Thanks. Cyrus Sun, 05 Apr 2009 11:08:14 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc5064 Hi Cyrus, Thank you for your comment. What do you mean with \"specific picture is expandable\"? If you can\'t explain it in the comments, please contact me so we can discuss this further. Marco Sun, 05 Apr 2009 21:11:58 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc5195 Background was fixed by adding this two property to polaroid draggable containment: \'#containment-wrapper\', scroll: false, Thanks. Cyrus Sun, 12 Apr 2009 16:38:12 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc5209 Will there be a version with flickr integrated into it? Cody Tue, 14 Apr 2009 04:45:45 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc5222 Hi Cody, Thanks for your comment. I don\'t know if there will be a FlickR version, but thanks for the idea. Just keep on checking this website for more updates and I might give it a shot! Greetings,, Marco Thu, 16 Apr 2009 07:43:22 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc5293 :woohoo: Increible, pero en Explorer 8 si que funciona la galeria.. Gracias por el aporte ... Saludos Dbarrera Blog Seo Mon, 20 Apr 2009 12:09:55 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc5907 See very beautyful very cool thank Tran Ngoc Hieu Wed, 06 May 2009 08:50:10 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc6025 :angry: Firefox 3 ... \"The best web browser .. lol \" ... does not gives scroll bars also when running this example.. IE atleast provide the scroll bars.. Pawan Tue, 12 May 2009 12:07:05 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc6026 :) but.. ya.. amazing example... and that should be the point of discussion... thanks Pawan Tue, 12 May 2009 12:08:18 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc7050 Very nice script, compliment! But, is it somehow possible to reduce it into a div and not to have it allways fullscreen? Tom Thu, 04 Jun 2009 18:33:51 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc8883 nice tutorial. thx for sharing robb Sat, 18 Jul 2009 22:05:54 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc9144 thank you for sharing. i like this tutorial and the effects are great! good work! martin Mon, 27 Jul 2009 17:52:34 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc9528 thanx , good work! Efe Sat, 01 Aug 2009 13:07:43 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc9898 I want to know the same thing. Josh Fri, 07 Aug 2009 22:38:32 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc10121 May I use this script in comertial project? What caind of license this script is? Arrow Mon, 10 Aug 2009 17:29:19 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc10124 Everything that is released on Marcofolio.net is released under a [url=http://creativecommons.org/licenses/by-sa/3.0/]CC3.0 license.[/url] This means you can use this work when and where-ever you want it, as long as you tell who the original author was (Marcofolio.net). Marco Tue, 11 Aug 2009 02:07:47 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc10127 Hi - Great script - I\'m also trying to container the gallery in a div - has anyone worked a solution? JAMES Gray Tue, 11 Aug 2009 05:40:48 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc10132 nice:P but what will be when I will change some code? (css, html, another design??) Is it no problem when I still leave message in css, javascript file that Marcofolio.net is original author?? Arrow Tue, 11 Aug 2009 12:29:42 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc10135 Yup - you\'re correct. Simply leave a message in the CSS/JS etc. that looks something like \"original author..\" and \"modified by..\" Good luck! Marco Wed, 12 Aug 2009 01:50:46 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc10136 Hi people, Thanks for the comments. I\'m currently working on a version \"inside\" a div-container. Simply keep an eye on the homepage of Marcofolio, since it\'ll be released there. Greetings,, Marco Wed, 12 Aug 2009 01:51:30 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc10138 Nice app. I\'m not sure though that a Creative Commons licence is the best choice for software. From what I understand it is more or less meant for things like pictures or text. Wouldn\'t GPL or LGPL be more appropriate in this case? Ytrog Wed, 12 Aug 2009 12:22:22 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc10139 I forgot to mention it works on Firefox 3.5 ;) Ytrog Wed, 12 Aug 2009 12:23:44 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc10143 Done! The [url=http://www.marcofolio.net/webdesign/the_polaroid_photo_viewer_non-full_screen.html]new script[/url] has been placed online. Good luck with that folks! Marco Wed, 12 Aug 2009 16:14:52 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc10153 Thank you so much Marco - where do we donate! James Gray Thu, 13 Aug 2009 02:34:58 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc10156 No problem - glad I could help some people out. You don\'t need to donate - simply visit Marcofolio.net a couple of times / leave some comments and feedback, that\'s all I need. Marco Thu, 13 Aug 2009 06:01:59 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc10345 Hey Man, I Found your Works, Nice Works, Good.. Thanks Arun Arun V Thu, 20 Aug 2009 08:13:53 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc11162 I was able to add new photos to the DOM but it makes the polaroids undraggable. I first put all the polaroids in one parent \"polaroids\" div, then used the following simple DOM addition: [code] function addPolaroid(polaroidName,imageURL) { top.window.document.getElementById(\'polaroids\').innerHTML+=\"\"+polaroidName+\"\"; }[/code] I think it\'s probably something to do with innerHTML putting HTML on the page but not actually into the DOM... maybe we need to use createElement + appendChild? Will dig into the code more but just thought I\'d check if you know offhand why adding one more polaroid renders every polaroid undraggable. Thanks for a wicked JS image gallery! BCmoney Wed, 16 Sep 2009 03:00:43 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc11239 We liked it very much. We were looking for integrating the same in our website selva comments Mon, 21 Sep 2009 12:28:24 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc11477 Hi, it\'s amazing! I like this. :shock: bTop Mon, 28 Sep 2009 21:34:00 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc11478 :shock: Hi, it\'s amazing! I like this. bTop Mon, 28 Sep 2009 21:34:49 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc12340 Works great in Safari. However this blog page doesn\'t. The text runs off the edge of the white area. Lurker Thu, 22 Oct 2009 00:09:45 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc13097 Oh my god. I just know that Safari colud do this. Thank you for your share. Mon, 09 Nov 2009 09:46:52 +0100 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html#josc13142 it is good and interesting.. tuna Tue, 10 Nov 2009 23:15:56 +0100