Install

Add the items to the <head> of your document. This will link jQuery and the Final Tiles Gallery core JS files to your webpage. You can also choose to host jQuery on your own server, but CDN can be faster to download.

We're also adding stylesheets for Final Tiles Grid Gallery. If you want to use icons and/or social icons you'll need to include the icon stylesheet. In this example I'll add the FontAwesome stylesheet.

<!-- Include jQuery -->
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

<!-- Include Final Tiles Gallery script -->
<script src="/js/jquery.finaltilesgallery.js"></script>

<!-- Include Final Tiles Gallery stylesheet -->
<link rel="stylesheet" href="css/finaltilesgallery.css">

<!-- Include icons stylesheet (only if you need it) -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

HTML Markup

A basic gallery needs really few tags. The following example shows the code for a gallery with a link on each image.

As you can see we're using a weird code inside the src attribute. That's just a transparent 1x1 pixel. Why do we do it? Because Final Tiles Grid Gallery uses lazy loading. You place the real source of the image inside the data-src attribute. Lazy loading is a great way to boost performance, especially when you add many images.

NOTE: using lazy loading is great for saving bandwith but that way Google is unable to index your images. If you need Google indexing your images then simply uses the correct path inside the src attribute.

<!-- All CSS classes in this snippet are mandatory! -->
<div class="final-tiles-gallery">
  <div class="ftg-items">
    <div class="tile">
      <a class="tile-inner" href="photos/1.jpg">
        <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="photos/thumbs/1.jpg" />
      </a>
    </div>
    <div class="tile">
      <a class="tile-inner" href="photos/2.jpg">
        <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="photos/thumbs/2.jpg" />
      </a>
    </div>
    <div class="tile">
      <a class="tile-inner" href="photos/3.jpg">
        <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="photos/thumbs/3.jpg" />
      </a>
    </div>
  </div>
</div>

Activation

Lastly, add the following lines of Javascript into the <head> of your page. The $(document).ready() is required to ensure the page is ready before the plugin initializes.

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    $('.final-tiles-gallery').finalTilesGallery();
});
</script>

Options

Options should be passed to the initialization code and separated by comma, e.g.:

<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    $('.final-tiles-gallery').finalTilesGallery({
      margin: 20,
      gridSize: 40,
      layout: 'columns'
  });
});
</script>

List of available options:

Images can occasionally be enlarged to avoid blank spaces. You can turn this features on or off. If you want to turn it off because of quality loss you could try to use a smaller image size factor.

URL for Ajax requests, it automatically activates infinite scrolling. Example:

<script type="text/javascript" charset="utf-8"> 
  $(document).ready(function() {
    $('.final-tiles-gallery').finalTilesGallery({
    autoLoadURL: '/ajax/load-images.php'
  });
});
</script>

Read infinite scroll documentation.

This option is used only with layout: 'columns'. If the browser is at least 4000px wide then the gallery will have 5 columns. If the browser is at least 1024px wide then the gallery will have 4 columns. And so on.

Enable debug messages in console and print info labels on each tile.

Images can be vertically cropped to enhance the chance of being aligned on the bottom borders, which usually prevents the gallery from arrangeing in columns.

So a higher value could improve the overall layout, but it will crop images.

If you have small images at low screen resolutions, then you could want to disable image cropping to avoid even smaller images.

Use the disableGridSizeBelow to avoid automatically set the gridSize to 0 and avoid image cropping when the screen is under the resolution pointed by this parameter.

If the browser is at least 4000px wide then multiply the image size by 0.9, so that an image 400x300 is treated like if it was 360x270.

If the browser is at least 1024px wide then multiply the image size by 0.8, so that an image 400x300 is treated like if it was 320x240.
And so on.

Why do you need a size factor? For two reasons:
1) you can have higher quality images for retina devices;
2) when images are occasionally enlarged they won't be enlarged more than their original size, so you avoid loss of quality.

Accepted values: final, columns.

Final layout is the distinctive feature of this plugin. Activating this layout you can build galleries using a free grid, that means: no rows, no columns. The grid will be built using the real size of the images (multiplied by imageSizeFactor). The images will be placed in the most upper right free spot. Example of "final" layout.

The columns layout is the classic Masonry layout used by many sites like Pinterest. Example of "columns" layout.

Distance in pixels between the images.

Minimum tile width; to get the real width, you must multiply this value by the current image size factor.

There's NOT a maxTileWidth. There are mathematical reasons behind that. To sum up, we cannot have both a minimum tile width and a maximum tile width, we need to choose only one constraint. If we chose the maximum tile width we wouldn't have any control on the minimum tile width and the grid could generate, under some circumstances, very tiny tiles.
But it's far better having a tile too large than too small. That's why there's not a maxTileWidth.

Hover effects

Hover effects are controled by CSS classes applied on the main container. There are 2 sets of CSS classes, one for the effect type and another one for the effect speed. Example:

<div class="final-tiles-gallery effect-zoom-in effect-speed-medium">
  <div class="ftg-items">              
    ...
  </div>
</div>

In the previous code we have the classes effect-zoom-in and effect-speed-medium in order to have a zoom in effect with a medium speed.

CSS Class Effect
.effect-deep-zoom-in Deep zoom in
.effect-zoom-in Zoom in
.effect-zoom-out Zoom out
.effect-deep-zoom-out Deep zoom out
Speed
.effect-speed-very-slow 1s
.effect-speed-slow 0.5s
.effect-speed-medium 0.35s
.effect-speed-fast 0.2s
.effect-speed-very-fast 0.1s

See a demo here.

Captions

HTML markup is made by a main container with class .caption-block, an inner container with class .text-wrapper which contains a H4.title and a H5.subtitle tags. You are free to change the H4 and the H5 tags with other tags.

<div class="tile">
  <a class="tile-inner" href="...">
    <img class="item" data-src="..." />
    <div class="caption-block">
      <div class="text-wrapper">
      <h4 class='title'>Title here</h4>
      <h5 class='subtitle'>Subtitle here</h4>
    </div>
   </div>
  </a>
</div>

All caption behaviours are controlled by CSS classes on the container.

CSS Class Vertical position
.caption-top Top
.caption-middle Middle
.caption-bottom Bottom
Horizontal alignment
.caption-left Left
.caption-center Center
.caption-right Right
Animation
.caption-none None
.caption-fixed Fixed, always visible
.caption-fixed-bg Fixed with background
.caption-fixed-then-hidden Fixed with background, hide on mouse hover
.caption-fixed-bottom Fixed at bottom with gradient background
.caption-slide-from-top Slide from top
.caption-slide-from-bottom Slide from bottom
Color scheme
.caption-color-light Dark text on white background
.caption-color-dark Light text on dark background

See a demo here.

Filters

It's very easy to add filters to a Final Tiles Grid Gallery. The first step is adding a container for the filters with class .ftg-filters:

<div id="gallery">
  <div class="ftg-filters">
    <!-- we're going to place our filters here -->
  </div>
  <div class="ftg-items">
    <div class="tile">
      <a class="tile-inner" href="photos/1.jpg">
        <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="photos/thumbs/1.jpg" />
      </a>
    </div>
    <div class="tile">
      <a class="tile-inner" href="photos/2.jpg">
        <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="photos/thumbs/2.jpg" />
      </a>
    </div>
    <div class="tile">
      <a class="tile-inner" href="photos/3.jpg">
        <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="photos/thumbs/3.jpg" />
      </a>
    </div>
  </div>
</div>

Now we'll focus on our new container, so put a link (A tag) here for each filter plus a link for a "reset" filter:

<div class="ftg-filters">
  <a href="#ftg-set-ftgall">All</a>
  <a href="#ftg-set-filter-1">Filter 1</a>
  <a href="#ftg-set-filter-2">Filter 2</a>
  <a href="#ftg-set-filter-3">Filter 3</a>
</div>

As you can see, each link has a reference to a filter. Each filter groups all the tiles having the CSS class referenced by the href attribute of the filter.
So, here is how the tiles appear now:

<div class="tile ftg-set-filter-1">
  <a class="tile-inner" href="photos/1.jpg">
    <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="photos/thumbs/1.jpg" />
  </a>
</div>
<div class="tile ftg-set-filter-2">
  <a class="tile-inner" href="photos/2.jpg">
    <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="photos/thumbs/2.jpg" />
  </a>
</div>
<div class="tile ftg-set-filter-3">
  <a class="tile-inner" href="photos/3.jpg">
    <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="photos/thumbs/3.jpg" />
  </a>
</div>

And the result is:

<div id="gallery">
  <div class="ftg-filters">
    <a href="#ftg-set-ftgall">All</a>
    <a href="#ftg-set-filter-1">Filter 1</a>
    <a href="#ftg-set-filter-2">Filter 2</a>
    <a href="#ftg-set-filter-3">Filter 3</a>
  </div>
  <div class="ftg-items">
    <div class="tile ftg-set-filter-1">
      <a class="tile-inner" href="photos/1.jpg">
        <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="photos/thumbs/1.jpg" />
      </a>
    </div>
    <div class="tile ftg-set-filter-2">
      <a class="tile-inner" href="photos/2.jpg">
        <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="photos/thumbs/2.jpg" />
      </a>
    </div>
    <div class="tile ftg-set-filter-3">
      <a class="tile-inner" href="photos/3.jpg">
        <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="photos/thumbs/3.jpg" />
      </a>
    </div>
  </div>
</div>

See an example here.

Social sharing

Final Tiles Gallery has a native support to share images with text on Facebook, Twitter, Pinterest and Google+.
You choose which social network to use by simply adding or removing its markup:

<div class="tile">
  <a class="tile-inner" href="...">
    <img class="item" data-src="..." />
    <div class="caption-block">
      <div class="text-wrapper">
      <h4 class='title'>Title here</h4>
      <h5 class='subtitle'>Subtitle here</h4>
    </div>
   </div>
  </a>
  <div class="ftg-social">
    <a href="#" data-social="twitter"><i class="fa fa-twitter"></i></a>
    <a href="#" data-social="facebook"><i class="fa fa-facebook"></i></a>
    <a href="#" data-social="google-plus"><i class="fa fa-google"></i></a>
    <a href="#" data-social="pinterest"><i class="fa fa-pinterest"></i></a>
  </div>
</div>

In this example I used the FontAwesome icons but you're free to use the one you prefer.

Social sharing icons can be placed on the right side of the picture or on the bottom. There are also 2 further styles other than the default: round icons and icon bar.

CSS class Description
.social-icons-right Place social icons on the right side
.social-icons-bottom Place social icons on the bottom
.social-icons-circle Round icons
.social-icons-bar Icon bar

Infinite scroll

Infinite scroll is a useful feature when you have a lot of images and you don't want to load them all at once. The images are grouped in chunks and loaded only when the user reaches the bottom of the page. Let's see how to implement it.

First of all, you need a server-side page that outputs a chunk of the gallery in HTML format, for example: get-images.php

  <div class="tile">
    <a class="tile-inner" href="photos/1.jpg">
      <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="photos/thumbs/1.jpg" />
    </a>
  </div>
  <div class="tile">
    <a class="tile-inner" href="photos/2.jpg">
      <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="photos/thumbs/2.jpg" />
    </a>
  </div>
  <div class="tile">
    <a class="tile-inner" href="photos/3.jpg">
      <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="photos/thumbs/3.jpg" />
    </a>
  </div>

The server page that produces this HTML receives the "page" parameter in the GET method, so it knows how many images it has to skip.

Now we only need to add a couple of parameter when implementing Final Tiles Gallery:

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
  $('.final-tiles-gallery').finalTilesGallery({
    autoLoadURL: "get-images.php"
  });
});
</script>

Now, when the user scrolls reaching the bottom of the page the plugin will call get-images.php and it will append the new images to the gallery.

When the output of get-images.php is empty then the plugin will automatically stop to make further calls. See an example here.

Callbacks

Callback Description Example
onComplete Gallery has completed the build. This function is called only once, just after the plugin has build the grid.
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
  $('.final-tiles-gallery').finalTilesGallery({
    onComplete: function () {
      console.log("Gallery is ready");
    }
  });
});
</script>
onLoading Gallery is loading new images via ajax. Useful if you want to show loading animations.
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
  $('.final-tiles-gallery').finalTilesGallery({
    onLoading: function () {
      console.log("Gallery is loading new images");
      //code to show some loading animation
    }
  });
});
</script>
onUpdate Gallery has completed loading new images via ajax. Useful if you want to hide loading animations.
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
  $('.final-tiles-gallery').finalTilesGallery({
    onLoading: function () {
      console.log("Gallery is loading new images");
      //code to show some loading animation
    },
    onUpdate: function () {
      console.log("Gallery has loaded new images");
      //code to hide some loading animation
    }
  });
});
</script>

Customisation

Final Tiles Gallery can be customised easily. Each element has its own CSS class. If you want to change something you simply write your own CSS rule using the proper selectors and placing the new CSS after final-tiles-gallery.css.

CSS class Description
.final-tiles-gallery Gallery container
.final-tiles-gallery .tile Gallery item
.final-tiles-gallery .tile .tile-inner Image container
.final-tiles-gallery .tile .tile-inner .item Image or iframe
.final-tiles-gallery .tile .tile-inner .item .caption-block .title Caption title
.final-tiles-gallery .tile .tile-inner .item .caption-block .subtitle Caption subtitle
.final-tiles-gallery .tile .ftg-social Social icons container
.final-tiles-gallery .tile .ftg-social a Social icon
.final-tiles-gallery .tile .tile-inner:before Caption background
.final-tiles-gallery .ftg-filters Filters container
.final-tiles-gallery .ftg-filters a Filters
.final-tiles-gallery .ftg-filters a.selected Selected filter