js-gallery (WORK IN PROGRESS)

Introduction

js-gallery is the image gallery, reloaded.

To the extreme.

Image gallery software with a new attitude.

Taken to the max.

The image gallery in a whole new light.

Enough of the advertising clichés.

js-gallery is a Dynamic HTML-based program that organizes images on a canvas, allowing the user to zoom in and out of the canvas, pan around the canvas by dragging the mouse, and move images on the canvas.

Think of the canvas as an infinitely-sized corkboard, whiteboard, or whatever.

Demo

Try the demo! (NOTE: Some functionality does not work in Internet Explorer at this time.)

How To Use

Click here.

Creating A Gallery

  • Feel free to use demo.html, the demo HTML file provided, as a template to create your own.
  • It loads information about images from gallery.xml. Also feel free to download and use that as a template. The next section describes the format of that file. It can be located anywhere and called by any filename. NOTE: JavaScript's security model (at least in Firefox) dictates that only local HTML files can use local gallery.xml files.

The gallery.xml File

The format of this file is simple, and currently there's no DTD of any form at this time.

  • <gallery> is your top-level element.

    <?xml version="1.0" encoding="iso-8859-1" ?>
<gallery zoom="0.25">
    ...
</gallery>

    The optional attribute zoom="0.25" specifies a default zoom level. If unspecified, default zoom level is 1.

  • Within the <gallery> you have a series of <img> elements, one for each image in the gallery.

    <img width="640" height="480" x="100" y="100" title="An Image"
    src="image1.jpg" />

    Notice how <img> is slightly different from the tag of the same name in HTML files.

    • You can also specify x="..." and y="..." coordinates for the position of the upper-left corner of the image.
    • These imgs don't have alt="..." attributes. They have title="..." attributes instead.
    • title="..." attributes are optional.
    • width="..." and height="..." are strongly recommended.
    • x="..." and y="..." are also strongly recommended.

  • Since most current web browsers don't even bother with even the simplest form of image interpolation when images are not displayed at their native resolution, we need separate thumbnail images if we want them to be rendered "nicely" when zooming out. This is necessary for line art, mockups containing text, etc.

    Each <img> can be an empty XML element, hence the empty-element syntax used in the above example. Or it can contain one or more <thumbnail> elements inside.

    <img width="..." height="..." x="..." y="..." title="..." src="...">
    <thumbnail zoom="0.5" src="thumbnails/50percent/image1.jpg" />
    <thumbnail zoom="0.25" src="thumbnails/25percent/image1.jpg" />
</img>

    At zoom level 0.5 or close to it, a certain image will be used instead of image1. At/near zoom level 0.25, a different image will be used.

Caveats

  • If you display a bunch of images at the same time, there's the potential to use a significant amount of memory. We strongly recommend you use thumbnails in those gallery.xml files.

Bugs/To Do

This program is a work in progress. Chances are at any particular time there are things that need to be done that are not on this list.

  • Local HTML files loading galleries from local XML files doesn't work in MSIE.
  • Keybindings don't yet work in MSIE.

Additional Requirements

HTML documents that link to this program must also link to md5.js, available here.

Copyright

js-gallery.js is (C) 2005–2006 Darren Stuart Embry.

This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version.

The LGPL 2.1 is available here.

This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA