Features

  • Responsive

    A fluid layout that smoothly builds a new layout when you resize the browser

  • Retina

    You can use normal or doubled size images, so they will be sharp on retina devices

  • Infinite scroll

    Do you like picture walls? Use infinite scroll to dynamically load tons of images

  • Video

    Embedded content can now be used, like YouTube or Vimeo videos

  • Complex grids

    Create much more interesting layouts than the usual multi-row or multi-column layouts

  • No crop (almost)

    You can control the maximum crop size. A higher value will increase the likelihood of getting aligned borders.

  • Filters

    Add as many filters you like. Click a filter, and see the images build a new layout

  • Scroll effects

    Add special effects when scrolling down the gallery

  • Social sharing

    Boost connections to your site using social sharing on each image

  • Captions

    Each image can have a caption, which you can easily customize with CSS

  • Custom links

    Choose to link images to other pages or even use some super-cool lightbox to show them in a bigger version

  • CSS3 animations

    Animations are made with powerful CSS3 functions so that they're smooth and fast on any device

Get started

Step 1 - Include scripts

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 and in case you wanted to use icons and/or social icons we're adding the FontAwesome stylesheet.

						  
							<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
							<script src="/js/jquery.finaltilesgallery.js"></script>
							<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
							<link rel="stylesheet" href="css/finaltilesgallery.css">
						

Step 2 - 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 lazy loads the images, so 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.

							<div id="gallery" 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>
						

IMPORTANT: The CSS classes used in this example are all mandatory.

Step 3 - Activate the gallery

Lastly, add the following lines of Javascript into the <head> of your document, below the links from Step 1. 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() {
									$('#gallery').finalTilesGallery();
								});
								</script>
						

Step 4 - Customize it

Parameters

If you want to do some fine tuning, then refer to the following list:

Parameter Default value Description
margin 10 Margin between tiles (images)
minTileWidth 200 Minimum tile width; to get the real width, you must multiply this value by the current image size factor (see below)
imageSizeFactor [[4000, .9],[1024, .8],[800, .7],[600, .6],[480, .5]] Array of arrays. Each array is made up of two parts: a browser width and a float value. The float value is the factor the real image size is multiplied by. For example, the default values mean:

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.
gridSize 10 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.
layout final Choose between final or columns layout.
allowEnlargement true 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.
onComplete function Function to call when the gallery has completed the build.
onUpdate function Function to call when the gallery has completed adding new items.
autoLoadURL null URL for Ajax requests, it automatically activates infinite scrolling.
autoLoadOffset 50 Pixels from bottom: when the scrollbar reaches this value, the plugin does the Ajax call.
CSS

Final Tiles Grid Gallery is highly customizable with CSS. The plugin provides a set of styles you can use in your site, but you're free to add custom CSS rules on these elements:

.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 .title Caption title
.final-tiles-gallery .tile .tile-inner .item .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 .hover Container of the hover icon (see this example)
.final-tiles-gallery .tile .hover .icon Hover icon (see this example)
.final-tiles-gallery .ftg-filters Filters container
.final-tiles-gallery .ftg-filters a Filters
.final-tiles-gallery .ftg-filters a.selected Selected filter
Bundled styles

Although Final Tiles Grid Gallery can be extremely customisable with CSS (using the above selectors), it's bundled with some ready-to-use styles. This is a list of styles and effects you can use. Just add the class to the same element with the final-tiles-gallery class.

Class Description
.effect-fade-out Fade out the image on mouse hover.
See an example.
.effect-dezoom Zoom out the image on mouse hover.
See an example.
.effect-frame Add an animated rectangle inside the picture.
See an example.
.caption-top Place captions on top of the image.
See an example.
.caption-bottom Place captions on bottom of the image.
See an example.
.caption-bg Add a background to the caption.
See an example.
.social-icons-bg Add a background to the social icons.
See an example.
.social-icons-bg-dark.social-icons-bg Add a background to the social icons.
See an example.
.social-icons-right Place social icons on the right side.
See an example.
.social-icons-bottom Place social icons at bottom.
See an example.
.social-icons-circle Make a circle around each social icon.
See an example.
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() {
									$('#gallery').finalTilesGallery({
										autoLoadURL: "get-images.php",
										autoLoadOffset: 100
									});
								});
								</script>
							

Now, when the user scrolls over 100px from 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.

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.