jsllyfish

jsllyfish is a revolutionary lightweight drop-in gallery for portfolio sites written in JavaScript. Pronounced 'jay-ess-elly-fish'. Why is it revolutionary? It's so easy to use!

Simple & Easy

This script does not require PHP, MySQL, or any other software to be installed on the server, but it does require an HTTP server.

The index has an editor which generates thumbnails from multiple image files you select locally (they don't need to be online). This file can be easily manipulated with the editor GUI, where you can reorganize and rename the images. Once finished, enter offline mode, download the file, and upload this file along with your images in a separate 'images' directory.

Compatibility

You'll need a browser that's compatible with HTML5 to generate your gallery. People without HTML5 should be able to use it once it's made, however.

Instructions

1. Before starting, please disable or pause any AdBlock software you might have installed-- especially on Chrome-- which might add lots of extra style code to the page you'll be saving.
2. Go to the jsllyfish gallery generator. Warning, jsllyfish 0.2 is not yet finished. Caveat emptor, c. 1/23/2012
• Don't worry, none of your images are uploaded to my server.
3. Locate your local image files, you can drag & drop them onto the gray area, or click on it to find your files.
4. Click generate. This will create thumbnails with an image resizing algorithm.
• You can decide to use the quick thumbnail generator, which generates low-quality thumbnails, or the high-quality generator, which takes much longer.
5. Add image titles, categories, and reorder images as you see fit. In order to prevent accidents, it's best to save often, which leads us to the next step...
6. Save the index page that's generated into the jsllyfish folder. It's okay to rename the main folder to anything you like, such as 'gallery', but the images folder should have all your images in one folder.
7. Upload the images folder and index file to the server.
• You can modify the title and anything else you like in the html file as long as it doesn't break the program.

• Once offline mode is unchecked, the editor is hidden. It can be toggled with the tilde/grave key. Tilde toggles!

Gallery

The gallery is pretty intuitive to use. It has a scrolling ribbon interface. It also works with mobile devices.

How Does It Work?

I hate to say 'RTFS', but the short of it is that this software uses HTML5 features such as FileReader to read local files, Canvas to resize the files, including a neat Lanczos algorithm for better scaling. It also includes the thumbnails not as separate files, but inside the page as Data URIs.

Future

In future versions, there will be more gallery types and lightboxes. More CSS themes will also be added. Contact me to suggest more features, or to submit your own themes!

Bugs

If there's ever an issue, please fill out an issue report in the Issues tracker on Google Code (this page).

Contact

Please visit the personal website of Hunter Trujillo.

Example pictures from Flickr used with permission.