Responsive Tiled Thumbnail Gallery with jQuery and CSS3 - Tiles Gallery

Tiles Gallery is a jQuery plugin used to create a fully responsive, auto-rotating, tiled thumbnail gallery with image lightbox integrated.

How to use it:

1. Load the required stylesheet files in the head section of the document.

<link rel="stylesheet" href="square-gallery.css">
<link rel="stylesheet" href="image-lightbox.css">

2. Load jQuery library and other required resources in the document.

<script src="jquery-1.11.3.min.js"></script>
<script src="square-gallery.js"></script>
<script src="image-lightbox-like.js"></script>

3. Initialize all images in an array. Each item is an array with thumbnail url and big image url.

var squares = new Array(41);
for (var i=1;i<=41;i++){
  squares[i-1] = ['images/squares/face-'+i+'.jpg', 'images/face-'+i+'.jpg'];
}

4. Initialize the gallery. Note that we show 32 square tiles. It's not random, it's a multiple of 8, which is bind in the CSS. The wider screen will show 4 rows of 8 tiles. If you had used other multiples, then the last row wouldn't be filled. For using other multiples it's recommended to change the css accordingly.

var gallery1 = new TileAnimation('#gallery', squares, 0, 32, 0);

5. API.

//how many tiles rotate at the same time:
gallery.rotMany = 1; //(int) 0, 1, 2...

//frequency to apply a random rotation:
gallery.rotDelay = 250; //(int) milliseconds

//probability of rotation for each called tile (depends by <rotMany>)
gallery.probability = 0.85; //(int) milliseconds

//minimum delay before apply another rotation to same tile.
//MUST be at least long as the CSS transition (default 600ms)
gallery.rotDuration = 650; //(int) milliseconds

//stop tiles sliding:
gallery.stop();

//start tiles sliding:
gallery.rotate();

//toggle tiles sliding:
gallery.toggle();

//force a tile rotation
//index must exist, eg. 5th in the array <squares>
gallery.rotateTile(5);

Change log:

2015-06-25

• update JS & CSS

2015-06-21

• update JS.

---

This awesome jQuery plugin is developed by madebycambiamentico. For more Advanced Usages, please check the demo page or visit the official website.