Gallery
From BC$ MobileTV Wiki
A gallery is a component for sorting and visualizing content, particularly images, videos or even snapshots of a webpage.
Contents
Types/Effects
HighSlide
HighSlide is like the "kleenex" of gallery effects, it is one of the first major commercial/successful and widely used in-page DHTML-style popup galleries, and has grown to a large user base and enjoys a robust feature set. It is free for non-commercial, personal or academic use but requires a license to be purchased for use on commercial sites.
- Highslide DEMO - Picasa Photogallery - A trip to bhutan in 2006: http://www.paulvanroekel.nl/picasa/highslidedemo/
- Highslide Project page: http://highslide.com/
- Highslide Photo Gallery and Slideshow for Picasa: http://www.paulvanroekel.nl/picasa/highslide/
- HighSlide Documentation: http://highslide.com/doc.php
Coverflow
Probably coming up a close 2nd place in terms of gallery effects is the Coverflow, made famous by Apple's iTunes. Since there are so many ways of achieving this effect (from server-side image manipulation in PHP to Javascript/AJAX/jQuery and even CSS3 animations/transforms) I've ranked the best ones I could find in terms of look/feel, scalability (mobile support), controls and customizability.
- Coulisse: https://github.com/elmerbulthuis/Coulisse | EXAMPLE (HTML5, fullscreen, keyboard controls)
- jQuery UI coverflow: http://addyosmani.com/blog/jqueryuicoverflow/ (implemented using jQuery's $.widget extension, nice features, synched playlist, keyboard/mousewheel controls)
- xFlow: http://xflow.pwhitrow.com/ | EXAMPLE (commercial, excellent features, scalability)
- ImageFlow: http://finnrudolph.de/ImageFlow (simple code, nice features, keyboard controls + mousewheel... closed license but free for non-commercial use)
- ContentFlow: http://www.jacksasylum.eu/ContentFlow/ (one of the original JS implementations, customizable, keyboard/mousewheel navigation, JS-reflection effect)
- protoFlow: http://blog.deensoft.com/2008/03/13/protoflow-updated-better-captions-image-reflection/[1] (used for BC$ Freebase Music search demo, reflection, keyboard/mousewheel navigation)
- cFlow: http://www.blarnee.com/projects/cflow/ (scroll events, associated content update on image switch)
- Coverflow using CSS 3D Transforms: http://scottgale.com/blog/coverflow-css-3d-transforms/2011/05/24/ (basic functions in all browsers, effects in Chrome/Safari only)
- jCoverFlow: http://www.jcoverflip.com/ | EXAMPLE (no keyboard controls, nice transition effect done in jQuery)
- Momoflow: http://flow.momolog.info/ (jQuery UI-powered, basic click controls only, less scalable)
- jQuery Cover Flow like iTunes: http://www.codeproject.com/Articles/298106/jQuery-Cover-Flow-like-iTunes
- MooFlow v0.2: http://www.outcut.de/MooFlow/ | EXAMPLE
Other
- Galleria: http://galleria.io/ (probably the best all-around gallery I've come across)
- Space Gallery: http://www.eyecon.ro/spacegallery/ (take off into orbit)
- 3D Image Gallery (museum panorama effect): http://tympanus.net/codrops/2013/01/15/3d-image-gallery-room/
- CSSPlay - CSS Sliding Photo Gallery: http://www.cssplay.co.uk/menu/gallery3l.html
- Amazing CSS Slideshows and PhotoGalleries: http://www.cssplay.co.uk/menu/
- GALLERY (PHP-based photo gallery): http://sourceforge.net/projects/gallery
- Free PHP Photo Gallery Script (Lightbox): http://www.badeziner.com/2008/05/13/free-php-lightbox-photo-gallery-script/
- Thickbox Gallery: http://sourceforge.net/projects/tbg/
- Rich Ajax slide shows with DHTML and XML: http://www.ibm.com/developerworks/library/x-ajaxslideshow/
Resources
- SnowStack - 3D Wall: http://code.google.com/p/css-vfx/wiki/SnowStack[2]
- 3D Wall Gallery: http://tympanus.net/codrops/2011/02/02/3d-wall-gallery/
- jQuery "Sponsor Flip Wall": http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/
- jQuery Mosaicflow: http://sapegin.github.io/jquery.mosaicflow/ | DEMO (Pinterest-like responsive image grid that doesn’t suck)
- nanoGallery -- image galleries, simplified: https://github.com/Kris-B/nanoGALLERY (lightweight, yet supports pulling in Flickr, Picasa and Google+ photo albums among others) | nanoGallery
- Card Deck Slideshow: http://www.dynamicdrive.com/dynamicindex17/carddeckslideshow.htm
Tutorials
- Create an iTunes-like banner rotator slideshow with jQuery: http://youhack.me/2011/08/11/create-an-itunes-like-banner-rotatorslideshow-with-jquery/
- CSS filmstrip: http://www.ashita.org/css-and-javascript-filmstrip/
- Javascript controls on CSS filmstrip: http://www.ashita.org/javascript-controls-on-filmstrip/
- How to Create a Responsive Image Gallery with Flexbox: https://www.developerdrive.com/responsive-image-gallery-flexbox/
External Links
- wikipedia: Photo Gallery
- hanuman - A collection of things I find that interest me: http://tellurianmonkey.blogspot.com/
- Best Open Source Web Image Galleries: http://ustadz.net/best-open-source-web-image-galleries.htm
References
- ↑ Protoflow Coverflow prototype: http://ajaxian.com/archives/protoflow-coverflow-for-prototype
- ↑ Snow Stack is Here: http://www.satine.org/archives/2009/07/11/snow-stack-is-here/
