Gallery

From BC$ MobileTV Wiki
Jump to: navigation, search

A gallery is a component for sorting and visualizing content, particularly images, videos or even snapshots of a webpage.


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.

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.

  1. Coulisse: https://github.com/elmerbulthuis/Coulisse | EXAMPLE (HTML5, fullscreen, keyboard controls)
  2. jQuery UI coverflow: http://addyosmani.com/blog/jqueryuicoverflow/ (implemented using jQuery's $.widget extension, nice features, synched playlist, keyboard/mousewheel controls)
  3. xFlow: http://xflow.pwhitrow.com/ | EXAMPLE (commercial, excellent features, scalability)
  4. ImageFlow: http://finnrudolph.de/ImageFlow (simple code, nice features, keyboard controls + mousewheel... closed license but free for non-commercial use)
  5. ContentFlow: http://www.jacksasylum.eu/ContentFlow/ (one of the original JS implementations, customizable, keyboard/mousewheel navigation, JS-reflection effect)
  6. 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)
  7. cFlow: http://www.blarnee.com/projects/cflow/ (scroll events, associated content update on image switch)
  8. 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)
  9. jCoverFlow: http://www.jcoverflip.com/ | EXAMPLE (no keyboard controls, nice transition effect done in jQuery)
  10. Momoflow: http://flow.momolog.info/ (jQuery UI-powered, basic click controls only, less scalable)
  11. jQuery Cover Flow like iTunes: http://www.codeproject.com/Articles/298106/jQuery-Cover-Flow-like-iTunes
  12. MooFlow v0.2: http://www.outcut.de/MooFlow/ | EXAMPLE


Other


Resources


Tutorials

External Links

References

  1. Protoflow Coverflow prototype: http://ajaxian.com/archives/protoflow-coverflow-for-prototype
  2. Snow Stack is Here: http://www.satine.org/archives/2009/07/11/snow-stack-is-here/

See Also

Image | Photo | jQuery | CSS3 | Tag Cloud