CCGallery – HTML5 Multimedia Gallery

CCGallery is a HTML5 multimedia gallery. It is vitally easy to make use of and might be configured simply via a XML file. It acts as a template which shows all of your photographs, audio recordsdata and video recordsdata in a glossy and enticing interface. You get to browse the objects in Coverflow mode or in a Thumbnail grid mode. You’ll be able to simply change between the 2 show modes and might even filter the objects by displaying solely photographs, or audio recordsdata, or video recordsdata. CCGallery has been designed in such a means that this can be very simple to flick thru numerous objects and in addition with sufficient eye sweet!

The important thing options are:

Show photographs, audio and video.
Configure the gallery utilizing a easy XML file.
Two show modes – Coverflow and Thumbnail, with possibility to modify between the 2. It’s also possible to select which mode to load first.
CSS 3D Transforms are used for the coverflow in supported browsers, which is {hardware} accelerated and thus leading to smoother animations, which is very famous in cell units resembling iPad/iPhone. In unsupported browsers HTML5 Canvas is used.
Performs audio and video natively in fashionable HTML5 browsers and switches over to Flash/Silverlight for older browsers through the use of Mediaelement.js.
May also embed Youtube and Vimeo movies.
Filters objects based mostly on file kind or based mostly on customized classes, with a pleasant shuffling animation through the use of jQuery Quicksand plugin. It’s also possible to to decide on to show a specific class on web page load.
Choice to detect cell units in order that these units might be served low high quality movies that are declared in an alternate XML file.
The gallery includes a fluid responsive design to account for numerous screens sizes starting from cell phones to desktop browsers and can be positioned in a container of any width.
Choices to autoplay and loop audio and video recordsdata.
Numerous useful keyboard shortcuts for simpler searching of the gallery.
Scroll coverflow photographs utilizing contact swipe in contact display screen units.
Could make the thumbnail photographs in each the Thumbnails and Coverflow modes act as hyperlinks to exterior pages. Choice to open hyperlinks in new window/tab.
Two color schemes (darkish and light-weight) can be found.
Change the styling of the gallery in response to your wants by tweaking the CSS.

NOTE: The Coverflow mode makes use of a two step fallback mechanism. It first makes use of CSS 3D Transforms, and if it’s not supported then HTML5 Canvas is used, which is supported in Firefox 3.0+, Safari 3.0+, Chrome 3.0+, Opera 9.5+ and IE9+. Older browsers that don’t assist Canvas will see a fallback animated impact for searching recordsdata, so that they nonetheless get to see a properly working gallery.

Opinions

Changelog

Model 4.1.1 (24 April, 2013)

• Made the gallery appropriate with jQuery 1.9+ .
• Up to date all helper scripts.

Model 4.1 (25 October, 2012)

• Added the choice to retain the quantity setting of the participant when it's closed, in order that when it's opened once more the earlier quantity degree is about.    
• The caption space within the modal overlay now shows the whole caption, no matter its measurement, with out overflowing on the picture/video/audio.
• Fastened a bug the place the Coverflow photographs weren't positioned appropriately if the beginning mode was Thumbnails.
• Fastened a bug the place the thumbnail hyperlinks weren't working appropriately within the Coverflow mode after filtering.
• Fastened a bug the place the following/prev buttons had been exhibiting even when there was just one merchandise after filtering.
• Fastened a bug the place the presence of a picture within the caption was inflicting issues within the Thumbnails mode.
• Fastened a bug the place audio recordsdata had been being loaded twice when the Flash participant was lively.
• Fastened a quantity slider place bug within the Mediaelement.js participant.

Model 4.0 (25 September, 2012)

• The Coverflow mode now makes use of CSS 3d Transforms in browsers that assist it, thus leading to smoother animation, particularly in cell units. In unsupported browsers HTML5 Canvas is used.
• The contact swipe performance to browse the Coverflow photographs has been improved.
• The gallery now a options fluid responsive design thus enabling it to adapt to any browser window width and mum or dad container width.
• Numerous small bug fixes.

Model 3.1 (30 August, 2012)

• Added the choice to take away the reflection of the coverflow photographs.
• Added the choice to decide on whether or not hyperlinks added to gallery thumbnails will open in a brand new window or not.
• Coverflow photographs might be scrolled utilizing contact swipe in contact enabled units. 
• The coverflow slider can now be utilized in contact enabled units. 
• Fastened a bug the place the coverflow fade gradient, if disabled, was triggered when the browser window was resized.

Model 3.0.1 (25 Might, 2012)

• Fastened just a few keyboard shortcut bugs when both the Lightbox or the Thumbnails mode was seen.

Model 3.0 (21 Might, 2012)

• Added prev/subsequent buttons to the Lightbox with a view to navigate via the objects with out closing the Lightbox.
• Added the choice to show off the pale impact on the edges of the Coverflow photographs part, thus permitting the gallery to be positioned in any background.
• Added the choice to say the background color for the gallery which will likely be used to generate the pale impact within the Coverflow. By default the physique background color is learn.
• Added a brand new color scheme - Gentle.

Model 2.0 (11 February, 2012)

• Made the gallery design aware of account for numerous display screen sizes starting from cell phones to desktop browsers. 
• Improved the Coverflow impact considerably. The impact is extra easy when flipping photographs rapidly and in addition different optimizations have been made.
• Added the choice to say a beginning merchandise for the Coverflow mode.
•  Added the choice to play audio and video recordsdata in a loop.
• Added the choice to make the thumbnails behave as hyperlinks to exterior pages.
• Added extra keyboard shortcuts - urgent ENTER opens overlay modal field, and urgent ESC shut overlay.

Model 1.4 (13 November, 2011)

• Added the choice to allow autoplay of audio and video recordsdata as soon as the modal overlay field containing the media participant exhibits up. Youtube and Vimeo movies additionally get autoplayed.
• Added the choice to show solely a specific class of things when the web page first hundreds.
• Fastened a bug relating to filtering based mostly on customized classes.

Model 1.3 (28 July, 2011)

• Added the choice to filter objects based mostly on customized classes.   
• Fastened a bug that was stopping the loading of the alternate XML file for cell units, if the person selected that possibility.
• Elevated the scale of the video participant within the modal overlay.

Model 1.2 (10 June, 2011)

• Added the choice to detect cell units in order that these units might be served low high quality movies that are declared in an alternate XML file.
• Merchandise titles at the moment are displayed beneath lively Coverflow photographs.
• Fastened an IE9 bug which was inflicting Coverflow photographs to not show there if choice to load Thumbnail mode first was chosen.

Model 1.1 (29 Might, 2011)

• Added the choice to decide on whether or not CCGallery will load the Coverflow or Thumbnails mode first.
• Fastened a bug in IE9 that was inflicting audio/video recordsdata to not play there.
• Fastened a bug in IE8 that was brought about after an audio/video file was performed.