JavaScript & CSS

Include JavaScript and CSS files in HEAD tag.
Note: Only include the hammer.js when swipe support is required.

                <head>
                    <link rel="stylesheet" type="text/css" href="css/metro_gallery.css" />
                    <script type="text/javascript" src="javascript/jquery.js"></script>
                    <script type="text/javascript" src="javascript/jquery.masonry.min.js"></script>
                    <script type="text/javascript" src="javascript/hammer.js"></script>
                    <script type="text/javascript" src="javascript/metro_gallery.min.js"></script>
                </head>

HTML Code

Include the following code to your HTML code

                
                    
                        <img src="image_001.jpg" data-caption="xxxx" />
                        <img src="image_002.jpg" data-caption="xxxx" />
                    
                    
                        <img src="image_003.jpg" data-caption="xxxx" />
                    
                    
                        <img src="image_004.jpg" data-caption="xxxx" />
                        <img src="image_005.jpg" data-caption="xxxx" />
                    
                    
                        <img src="image_006.jpg" data-caption="xxxx" />
                        <img src="image_007.jpg" data-caption="xxxx" />

Global Options

Use setOptions() to change the global settings. Each setting is optional.

                <script type="text/javascript">
                    Metro_Gallery.setOptions({
                        base_size: 100,
                        gutter:    10,
                        scale:     1.4
                    });
                </script>

base_sizeInt

Default values: 100. The pixel size of a 1x1 tile. When the size of a 1x1 tile is defined, all the other sizes will be calculated automatically.
gutterInt

Default values: 10. The gutter size in pixel value.
scaleFloat

Default values: 1.4. Defines the scaling value when a tile is hovered.
delayInt

Default values: 1000. Defines the delay (ms) between 2 animations.
directionString

Default values: vertical. Defines the animation direction.

Configurations

animationString

Possible values: flip, fade and scale. Add animation type as a class to the gallery container DIV. If you don't need any animatinos, simple do not add an animatino class.

...

directionString

Possible values: vertical, horizontal. Add direction as a class to the gallery container DIV. Default value: vertical.

...

colourString

Pre-defined values: blue, orange, red, green, yellow, purple, darkblue, darkred, darkgreen. To set a colour to a tile, add the colour name as a class to the tile DIV.

...

There are 9 pre-defined colours, they can be changed/added/removed in metro_gallery.css. Below is an example of adding a new colour named black:

                    div.tile.black,
                    div.tile.black div.caption {
                        background: #000000;
                    }

sizeString

Possible values: 1x1, 1x2, 1x3, 1x4, 2x1, 2x2, 2x3 ,2x4, 3x1, 3x2, 3x3, 3x4, 4x1, 4x2, 4x3, 4x4. To set tile size, add the size with a prefix "tile_" as a class to the tile DIV.

...

LightboxString

Adding lightbox as a class to the gallery container DIV turns lightbox on.

...

Black and WhiteString

Adding bw as a class to the gallery container DIV turns black and white mode on.

...

Image CaptionString

Caption is optional. To add a caption, use data-caption attribue in IMG tag.

                        <img src="image_006.jpg" data-caption="xxxx" />

Caption LinkString

Caption is optional. To add a caption, use data-caption attribue in IMG tag.

                        <img src="image_006.jpg" data-caption="xxxx" data-captionlink="http://www.example.com" />

Different images in LightboxString

When data-preview is set, it will be used in lightbox instead of the img src itself.

                        <img src="image_006.jpg" data-preview="image_006_big.jpg" />

External LinkString

When data-link is set, clicking the image opens the link in a new window.

                        <img src="image_006.jpg" data-link="http://www.google.com" />

VideoString

Use data-iframe to embed an iframe video(youtube...etc). Use data-iframewidth and data-iframeheight to set video width and height.
```
                        
                    
```

Fluid vs Fixed widthString

To make the gallery become fixed width, set width on the gallery container DIV.

...