defectus / picogal

Smallest possible gallery for your website

picoGal

Smallest possible gallery for your website

1. Usage
2. Reference
3. 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

Go to me and my wife for having the crazy idea of settings up our website :-) Randomize array alghorithm found somewhere on stackoverflow, then forgotten and then reinvented myself.

picogal's Issues

Better way showing thumbnails

Don't let the browser scale down images, use functions (or intelligent filters etc.) to figure out thumbnail location

Finish documentation

A must, documentation needs to be completed

Display titles if there are any associated with the image

Use preferable title attribute to get a title and then display it on hover over the thumbnail.

Implement other ways of building galleries

Galleries could be built from a list of images.

Add more display transformations

Currently only randomize supported, implement reveal and more