Difference between revisions of "Gallery"

From BC$ MobileTV Wiki
Jump to: navigation, search
(Tutorials)
 
(13 intermediate revisions by 3 users not shown)
Line 2: Line 2:
  
  
 +
== Types/Effects ==
  
== Resources ==
+
=== HighSlide ===
  
* Space Gallery: http://www.eyecon.ro/spacegallery/
+
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 | [http://coulisse.luvdasun.com/ 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/ | [http://xflow.pwhitrow.com/galleries/xflow/ 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/<ref>Protoflow Coverflow prototype: http://ajaxian.com/archives/protoflow-coverflow-for-prototype</ref> (used for [http://bcmoney-mobiletv.com/metaweb/freebase/sandbox/albumlist/ 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/ | [http://www.jcoverflip.com/demo 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/ | [http://www.outcut.de/MooFlow/example-ajax.html 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
 
* 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<ref>Snow Stack is Here: http://www.satine.org/archives/2009/07/11/snow-stack-is-here/</ref>
 +
* 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/ | [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) | [http://nanogallery.brisbois.fr/ 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 ==
 +
 +
<references />
 +
 +
== See Also ==
 +
 +
[[Image]] | [[Photo]] | [[jQuery]] | [[CSS3]] | [[Tag Cloud]]

Latest revision as of 18:58, 15 March 2020

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