Yo Thumbnail Gallery

Version .01 | By Chris Johnson | https://github.com/ChrisLTD/yo_thumbnail_gallery

Yo Thumbnail Gallery creates a Google Images like thumbnail grid. When you click an image, you get a bigger version in the row beneath where you clicked. The current image is stored in the URL hash so you can bookmark specific open images.

You can also use the left and right arrows on your keyboard to navigate the gallery.

Just activate the plugin on a properly formatted wrapper element and pass in an array of images, thumbnails and captions.

Usage Examples

Simple example

<link rel="stylesheet" href="yothumbnailgallery.css">

<div id="gallery">
  <div class="thumbnails"></div>
  <div class="thumbnail_viewer">
    <a href="#" class="thumbnail_left"></a>
    <a href="#" class="thumbnail_right"></a>
    <a href="#" class="thumbnail_close">&times;</a>
    <div class="thumbnail_img">
      <div class="thumbnail_caption"></div>
    </div>
  </div>
</div>

<!-- Include jQuery Core above this line -->
<script src="jquery.yosimplefilter.js"></script>
<script>
	$('#gallery').gallery(
    [
      { url: "http://placekitten.com/800/570", thumb_url: "http://placekitten.com/800/570", caption: 'Dolor sit amet' },
      { url: "http://placekitten.com/g/350/200", thumb_url: "http://placekitten.com/g/350/200", caption: 'Numquam scripserit in sea' },
      { url: "http://placekitten.com/800/600", thumb_url: "http://placekitten.com/800/600", caption: 'Lorem ipsum dolor sit amet' },
      { url: "http://placekitten.com/g/350/150", thumb_url: "http://placekitten.com/g/350/150", caption: 'Pri ne autil' }
    ],
    {
    'thumbnail_width': 200,   // pixels
    'thumbnail_height': 200,  // pixels
    'thumbnail_margin': 5     // pixels
    }
  );
</script>

Options

'thumbnail_width': 200,   // pixels
'thumbnail_height': 200,  // pixels
'thumbnail_margin': 5     // pixels

To do

• Link to larger images
• Create option to disable the keyboard shortcuts
• Add some init callbacks