Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

readme.md

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.

Animated Example

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

About

Yo Thumbnail Gallery creates a Google Images like thumbnail grid.

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.