Simple Dynamic Tiled Photo Gallery Plugin with jQuery - jLastic

jLastic is a simple fast jQuery plugin that enables you to display a group of photos in a neat tiled gallery layout. Hover over the gallery to see how the images expand by the pixel values you specified.

How to use it:

1. Load jQuery JavaScript library and the jQuery jLastic plugin in the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jLastic.js"></script>

2. Wrap your images into a container element.

<div class="jLastic">
  <img src="1.jpg">
  <img src="2.jpg">
  ...
</div>

3. The custom CSS styles for each tile.

.jLastic .tile{
  background-color:white;
  display:block;
  border-radius:5px;
  position:absolute;
  background-size:auto;
  border:5px solid white;
  cursor:pointer;
  box-shadow:1px 1px 20px #000;
  background-repeat:no-repeat;
  background-position:center;
}

4. Call the plugin to organize the images into a tiled gallery.

$(document).ready(function() {
  $('.jLastic').jLastic({
  // Options
  });
});

5. Available settings.

// The number of images to be displayed per row.
tilesPerRow: 5,  

// The width of the image in minimised state.
tileWidth:   100,

// The height of the image in minimised state. 
tileHeight:  100,

// The space between images. 
tileMargin:  10, 

// The extra width by which a minimised image will expand
// In portrait mode. 
portraitExpandWidth:   220 , 

// The extra height by which a minimised image will expand
// In portrait mode. 
portraitExpandHeight:  320 , 

// The extra width by which a minimised image will expand
// In landscape mode.  
landscapeExpandWidth:330 , 

// The extra height by which a minimised image will expand
// In landscape mode. 
landscapeExpandHeight:   220 , 

// The time taken to animate the images when a minimised image is expanded. 
animationDurationExpand:300 , 

// The time taken to animate the images to the default (minimised) state. 
animationDurationCompress: 300 , 

// The event by which an image is expanded. 
// By default on mouse hover the tiles expand.
// Use (event: "click") to expand images on mouse click.
event: "default" 

---

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