Skip to content

ChrisLTD/yo_thumbnail_gallery

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

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

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

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published