MelonHTML5 - Metro Gallery

MelonHTML5 - Metro Gallery

(35) 4.57 stars
449 Sales



Metro Gallery a flexible and easy to integrate photo gallery featured in Metro Design. It allows you to build your unique photo wall with your custom settings.

Please give it quick rating if you like this. If you have any suggestions/feature request or you find a bug, you are more than welcome to contact me and I’ll address them ASAP.

Live Demo


Unique Metro Design
Metro Gallery gives you the ability to easily create your own unique Metro Wall containing multiple tiles in various sizes with automatic rotations.

Touch device support (swiping)
You can swipe to navigate images on touch devices.

100 different tile sizes
Each tile could have it own size set which ranges from 1×1, 1×2 … 4×4 … to 10×10

CSS3 animations + jQuery fallback for IE
For mordern browsers, all animations are in pure CSS3. Old IEs will get jQuery Fallback.

A CSS3 lightbox is included, which can be turned on or off.

Embed Videos
Lightbox can be used to embed both images and videos.

Thumbnails in tiles and big images in lightbox
You can use thumbnials in small tiles and set big images to be used in lightbox.

Dynamic layout
You can use either fixed or fluid layout, both come with animations when layout is changed.

9 pre-defined themes
You can set different colours on each tile or make them all same. 9 pre-defined colours are included in the CSS and you can easily modify them to any other colours you like.

3 loading animations
Metro Gallery can be loaded with 3 different animations: flip, scale or fade. Animation can also be turned off.

Black & White mode
Chrome, Firfox, IE10+ will also get a Black & White mode which can be turned off and on.

Multiple Instances
One or more galleries can be displayed on one page

Fully Customizable
Plenty of API options are given, which allow you to configure it to suit your own needs. Tile size, gutter size and scale ratio can all be set via options, no manual CSS code changes are needed.


v1.12 @ 30 Aug 2013
BUGFIX: minor bug fixes and code improvements
v1.11 @ 23 June 2013
UPDATE: Added ability to embed videos
v1.10 @ 07 April 2013
UPDATE: Added ability to use custom DIV (along with HTML) in tiles
BUGFIX: Do not show caption div when data-caption is not defined
v1.09 @ 03 April 2013
UPDATE: Added ability to set animation delay. Default 1000ms.
UPDATE: Added ability to set animation direction: vertical or horizontal.
v1.08 @ 11 March 2013
UPDATE: Added ability to set tile size, gutter size and scale ratio via options.
v1.07 @ 19 Feb 2013
UPDATE: Updated code to set column width automatically so that people don't need to manually change it in JavaScript when using custom tile size.
v1.06 @ 07 Feb 2013
UPDATE: Added ability to use thumbnail in tiles, and big images in lightbox
UPDATE: Added ability to added links into caption
v1.05 @ 22 Jan 2013
UPDATE: Updated code to be fully compatible with jQuery 1.9
v1.04 @ 13 Jan 2013
UPDATE: Added support for swiping in touch devices
v1.03 @ 04 Jan 2013
UPDATE: Improved compatibility in IE7, 8
BUGFIX: Fix an issue so that the script tag can be added asynchronously
v1.02 @ 16 Dec 2012
UPDATE: New feature: Lightbox
v1.01 @ 12 Dec 2012
UPDATE: Added ability to set external links to images
v1.00 @ 05 Dec 2012
Initial release

Real World Usage:
If you wish (or don’t wish) your site to be listed here please send me an email.