picoGal

Smallest possible gallery for your website

Usage
Reference
Credit

Usage

The simplest possible way to create a gallery is to list your images in a tag and then refer to that tag is picoGal.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="/picoGal.js"></script>
<div>
    <img src="1" title="title1"/>
    ...
    <img src="10" title="title10"/>
</div>

Given this html you can do:

$('div').picoGal({}).picoGal('show');

or (even simpler)

$('div').picoGal('show');

And that's it. Really. Give it a try!

Reference

Settings

effect [none|randomize|reveal]: display effect (how thumbnails are displayed)
thumbWidth: thumbnail width
thumbHeight: thumbnail height
height: image hight (the full size one)
width: image width (the full size one)
displayTitle: if true then title is displayed when mouse hover over the thumbnail
thumbTransform: function that returns thumbnail url based on full size image url (usefull with picasa)

Methods

init ('init', settings): takes settings structure and initializes gallery
build ('build'): build the gallery
show ('show'): shows the gallery (reveals it)
hide ('hide'): hides gallery, but the underlying dom is still there
destroy ('destroy'): clears out the dom so the gallery is completely removed

Credits