Photo Stack Gallery Using jQuery, PHP & CSS3
28
Jun
Codrops, a creative blog on web design/development (mostly jQuery), is sharing a beautiful photo stack gallery that is built with jQuery & PHP.
The gallery can display multiple albums and with the help of prev-next buttons, can paginate within them easily.
Once an album is clicked, it shows the images inside that album with a stack interface that is powered with CSS3's rotate property.
The gallery doesn't require a database. Rather, it scans the "albums" folder (using PHP) and automatically finds the albums and images inside them.
The reflections used only work in Webkit browsers but the overall functionality is compatible with all the major ones.
Requirements: PHP (jQuery is included with the download)
Compatibility: All Major Browsers
Website: http://tympanus.net/codrops/2010/06/27/beautiful-pho...
Demo: http://tympanus.net/Tutorials/PhotoStack/
Compatibility: All Major Browsers
Website: http://tympanus.net/codrops/2010/06/27/beautiful-pho...
Demo: http://tympanus.net/Tutorials/PhotoStack/
- Tags:
CSS3 Javascript Php
- Filed under: Gallery, Goodies, Other License
- 9 Comments
9 Responses for "Photo Stack Gallery Using jQuery, PHP & CSS3"
wonderful gallery!
I love it!
uff Excelent….
I found the performance to be a bit slow / spotty on the iPad, which should be an ideal target given that it’s webkit.
This might be an issue with the limited RAM. Perhaps trying it with lower-res images would speed things up.
This gallery has a bug as I tested on FireFox and Chrome.
That is… When you click on flip icon continuously, all photos finally disappeared.
In FireFox, the motion performance is slower than Chrome.
Solution for the bug: stop clicking continuously
.
anyhow awesome gallery. hope they improve it.
This is a nice gallery. I used chrome.
This has to be one of the most elegant gallery scripts I’ve ever scene!! Well done mate!!
There seems to be an IE bug..
Its really frustrating, because its working amazing in all other browsers, i’m fine with IE not doing the rotation, but in IE the
“stack view” works only the very first time you click on a album, clicking an other album afterwards, the mask opacity is ignored and clicking the same album a second time it does nothing..just a spinning loader..
I know its the ajax $.get method because if you clear the browser cache it works again(only one time).
Hope some body knows the fix!!
thnx
Based on this great tutorial, I’ve created a Drupal modules and fix the IE glitches (except the rotating images).
Also now it can have other than 5 photo per viewable windows and jQuery will auto resize the album width based on how many album shown at once.
you can checkout the demo at :
http://www.victheme.com/product/photo-stack-drupal-7-modules
and click the demo button