Nova Gallery – Responsive HTML5 Multimedia Gallery

Nova Gallery is a HTML5 multimedia gallery enabling you to showcase your pictures/audio/video in an exquisite and smooth interface. You’ve the choice of presenting your gadgets in two totally different modes, that are a Thumbnail Grid and Full-width view, and also you even have the choice of switching between the 2 modes. You’ll be able to have a number of units/albums of things and may filter the gallery gadgets primarily based on file kind or primarily based on customized classes. The gallery permits you to showcase your Youtube/Vimeo movies and Flickr/Picasa pictures from teams/units/albums/collections. The gallery contains a fluid responsive design and may slot in any display dimension starting from cell phones to desktop browsers. The gallery additionally options touch-screen assist and makes use of {hardware} accelerated CSS primarily based animations wherever doable which ends up in easy animations, that’s particularly noticeable in cellular units.

Attempt the gallery demos and resize your browser to see the responsive design of the gallery in motion. Additionally try the demos in your cellular units akin to iPad/iPhone or Android units.

The important thing options are:

Show pictures, audio and video
All gallery knowledge is handed in a easy XML file.
Two show modes – Thumbnail Grid & Full-width. You may as well swap between the 2 modes.
The Thumbnail Grid mode contains a Masonry structure and you’ll management the spacing between gadgets by making use of margins via css,
The Full-width mode permits you to present the pictures/movies stretched throughout your entire container or to shrink the merchandise in order that it may be considered solely with none cropping.
You may as well have a slideshow of the gadgets within the Full-width mode. This slideshow stops at any time when the browser tab through which the gallery is displayed, goes out of focus (this function solely works in browsers that helps the HTML5 Web page Visibility Api and you’ve got the choice to disable this function).
Performs audio and video natively in fashionable HTML5 browsers and switches over to Flash/Silverlight for older browsers through the use of Mediaelement.js.
Filter gadgets, by file kind or customized classes.
Helps a number of gallery units or albums.
True HTML5 Fullscreen choice in supported browsers.
Can embed Youtube and Vimeo Movies.
Present pictures from Flickr and Picasa. A number of choices are offered to tug pictures from Flickr/Picasa together with the choice to cache the API knowledge. No XML file is required when displaying pictures from Flickr/Picasa.
The gallery contains a fluid responsive design to account for varied screens sizes starting from cell phones to desktop browsers and can be positioned in a container of any width.
The gallery is cellular gadget pleasant with contact display assist.
{Hardware} accelerated CSS animations have been used wherever doable leading to easy animations, which is most noticeable in cellular units.
Helpful keyboard shortcuts have been offered for simpler navigation of the gallery.
The gallery gadgets may act as hyperlinks to exterior pages
Two color schemes – Darkish & Mild.

Configurable choices are:

When you present Youtube/Vimeo movies then you possibly can select to make use of the thumbnails offered by Youtube/Vimeo.
You’ll be able to pull pictures from Flickr by trying to find a textual content string or tags. You’ll be able to even pull pictures from a selected consumer or a bunch, or a set or a set of units. You even have the choice of selecting what number of pictures can be proven, how they are going to be ordered and in addition the sizes of the pictures which can be pulled from Flickr.
You’ll be able to pull pictures from Picasa by trying to find a textual content string. You’ll be able to even pull pictures from a selected consumer or an album, or a set of albums. You even have the choice of selecting what number of pictures can be proven, how they are going to be ordered and in addition the sizes of the pictures which can be puled from Picasa.
Choice to allow caching of Flickr/Picasa API response knowledge to stop crossing the restrict set by these providers. You’ll be able to even set for a way lengthy the info can be cached.
Can point out a customized thumbnail picture for the gallery units. By default the thumbnail for the primary merchandise within the set is used to characterize the set.
Autoplay audio and video when Lightbox opens in Thumbnail Grid mode.
Play audio and video recordsdata in a loop.
Retailer the quantity degree when participant is closed, which is restored when participant opens once more.
Set the mode, i.e Thumbnail Grid or Full-width, which can be proven when the gallery first masses. May also work with a single mode.
Possibility to point out a selected class of things when the gallery first masses.
Shrink photographs in Full-width mode to suit the container when the gallery first masses.
Select to point out the thumbnails in Full-width mode when the gallery first masses.
Select the animated impact for the gadgets in Thumbnail Grid mode when it first reveals. Obtainable results are fade, slide, fadeSeq, slidSeq and flipSeq.
Select the animated impact for displaying merchandise captions/descriptions in Thumbnail Grid mode. Obtainable results are flip and fade.
Select to make the merchandise titles in Thumbnail Grid mode all the time seen.
Select the animated impact for transition between gadgets in Full-width mode. Obtainable results are fade, slide and flip.
Select to proceed the slideshow in Fullwidth mode even when the web page loses focus.
Select the animated impact for displaying/hiding the Gallery Units display (house display). Obtainable results are scale, fade and slide.
Present the gallery both spanning your entire width of the browser or the width of its mum or dad container.
The gallery gadgets may act as hyperlinks to exterior pages. You’ll be able to select to open the hyperlinks in a brand new tab/window.
You’ve the choice to shuffle or randomly order the gallery gadgets every time the web page is refreshed.
The gallery helps preloading of photographs in Full-width mode for smoother viewing. You’ll be able to select what number of gadgets at a time will load within the background.
You can begin the slideshow in Full-width mode when the gallery first masses.
The time interval for which a selected merchandise is seen throughout slideshow might be set.
Choice to set the trail for the gallery configuration XML file.
Choice to detect cellular units and serve them a separate XML file.

Particular Notes

Appropriate jQuery primarily based fallbacks have been offered for all CSS primarily based animated results for older browsers.
Additionally a number of the fashionable HTML5 options akin to Fullscreen and Web page Visibility will solely work in fashionable browsers.
The gallery script has been examined and is absolutely suitable with jQuery 1.9+. and in addition jquery 2.0+. and three.0+

Critiques

Changelog

Model 1.4.3 (7 February, 2022)

• Fastened a difficulty with parsing the response from the Vimeo API

Model 1.4.2 (3 March, 2016)

• Fastened a difficulty the place closing the overlay for audio/video made the gallery exit from fullscreen state.

Model 1.4.1 (9 July, 2015)

    • Fastened a bug with picture resizing in Fullwidth mode.

Model 1.4 (31 July, 2014)

    • Added the choice of selecting the variety of albums to point out in a Flickr/Picasa assortment.
    • As per Flickr's new API necessities the gallery now makes use of "https" in all API request url's.
    • Fastened merchandise show points, together with the difficulty of small photographs, contained in the modal field in thumbnails grid mode for telephone sized screens.
    • Fastened video participant's fullscreen button problem in iPad.
    •  Just a few small styling tweaks to the gallery.

Model 1.3 (15 January, 2014)

    • Fastened a IE bug the place the thumbnail hyperlinks weren't clickable. 
    • Fastened a small bug the place the overlay button appeared over thumbnails with hyperlink enabled.
    • Fastened the max-height setting and the positioning of the Fullwidth mode caption overlay.
    • Added the choice of creating the merchandise titles in Thumbnail Grid mode all the time seen.
    • Added the choice of creating the Fullwidth mode slideshow proceed even when the web page loses focus.

Model 1.2 (15 August, 2013)

    • Fastened a bug within the thumbnail grid structure when margins had been set on the gadgets.
    • Fastened the resizing of photographs within the overlay when the browser was in panorama mode. 
    • Fastened a bug in iOS the place after scrolling the clicks/faucets on the thumbnails grew to become unresponsive.
    • Improved the closing/opening of the gallery menu in touch-screen units.
    • Fastened a bug the place the inclusion of photographs within the merchandise captions interfered with the thumbnail grid structure.
    • Modified the code to account for escaping of characters within the cached xml file (when pulling photographs from Flickr/Picasa) if magic quotes within the server had been turned on.

Model 1.1 (8 June, 2013)

    • Fastened downside with positioning of the gallery overlay/lightbox when there have been different content material within the web page together with the gallery.
    • The filter dropdown menu opens a lot faster now in touch-screen units and in addition closes when tapping elsewhere on the display.
    • Up to date the jquery masonry plugin in order that it's suitable with jquery v1.9+. The gallery now could be absolutely suitable with jquery 1.9+ together with jquery 2.0.
    • Different small bug fixes.