Javascript Image Gallery

Galleria: Javascript Image Gallery

About 6 months ago I posted about a lightweight javascript gallery that could take an unordered list of images, add the source of each image as a background-image rule to it’s <li> element and present them as clickable thumbnails via CSS. It gained some popularity, since it was so easy to implement and style to an individual style. It was also popular because the images where already loaded when the thumbnails showed, which created a snappy browsing experience.



Now it’s time for a new round, presenting Galleria – a fantastic gallery plugin for jQuery.

Visit Galleria

Update: Galleria 1.0, featuring a history object, custom trigger functions and more is almost ready to be released. The project has now moved to google code, so please visit Galleria at google code for the latest updates and builds.

Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box. You can also use custom thumbnails like a regular html gallery. A caption can be extracted from the title attribute as well, and you can style it as you wish. All this is done without any server-side languages or flash. All you need is the jQuery library and the Galleria files.

This gallery doesn’t force any design elements. No reflections, no drop shadows, no brushed metal and no fades unless you want it. It leaves all the styling up to you, which makes it very easy to implement in existing designs. It has a default CSS style just to get you started that you can easily override. If you don’t know where to start, have a look at the demo example.

About 90% of all image galleries I see are wasting the users time by preloading the next image first when the user presses the next button. We see a small rotating animation, and the next image is slowly faded in slow motion. Useless. We want snappy browsing these days; as soon as I request the next image, it should already be on the doorstep and shown immediately to me. It’s about smart preloading in the background when the user is busy looking at the image.

Galleria does one thing very good: it preloads the large images one by one, and as soon as the image is fully loaded, a thumbnail is presented and the image is immediately accessible to us. So every time you want to see the image – it’s already there. This makes the browsing experience incredibly fast and snappy.

  • Unobtrusive javascript
  • Degrades gracefully if the browser doesn’t support javascript or CSS
  • Lightweight (2.5k compressed)
  • Displays the thumbnail when the actual image is loaded
  • Unstyled – create your own gallery style using CSS
  • Super fast image browsing since the images are preloaded one at a time in the background
  • Can scale thumbnails and crop to fit in thumbnail container
  • Can be used with custom thumbnails
  • Stylable caption from image or anchor title
  • jQuery plugin – takes one line to implement
  • Browserproof
  • Can adjust the history object and enable the back button in your browser
  • Can fire events so you can customize the images behaviour onLoad

You have three options when creating the gallery, depending on how your markup looks like:

  1. Use custom thumbnails as you normally do in galleries, f.ex <a href="{image}">{thumb}</a>
  2. Use the built-in thumbnail creator that uses CSS to scale the images proportionally and fit them inside the thumbnail box. All you need is an <img> tag.
  3. Same as above, but skip the scaling by setting a ‘noscale’ class in the image.

Have a look at the demo page source code to see the different options in action. No matter what option you choose, the result will be the same:

  • A thumbnail will be created with a centered image inside each list item
  • Clicking the thumbnail will show it’s corresponding main image in an absolute positioned division
  • Clicking the main image will show the next image in line
  • A caption will be extracted from either the anchor title or image title and placed inside a span in the div tag
  • The gallery will be ready for CSS styling, experiment with different thumbnail formats, hovers and layouts
  • All thumbnails are cropped if necessary to fit exactly inside their container

You implement the gallery by doing five simple steps:

  • 1. Download the latest jQuery release
  • 2. Download the latest Galleria package (and unpack it)
  • 3. Add the following lines inside your <head>:
  1. <link href="galleria.css" rel="stylesheet" type="text/css" media="screen">
  2. <script type="text/javascript" src="jquery.min.js"></script>
  3. <script type="text/javascript" src="jquery.galleria.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){ $('').galleria(); })
  6. </script>
  • 4. Create an unordered list of images and give it an identifier (in this case class='gallery')
  • 5. Style your gallery using CSS. Galleria has a default style that you can easily override and modify. View the demo page source code as an example.

The real beauty of Galleria lies in it’s simple HTML code. Simple create an unordered list, add a couple of images and Galleria will automatically create clickable thumbnails. Here is some examples on how Galleria will interpret your HTML:

Create and scale a clickable thumbnail:

  1. <ul class="gallery">
  2. <li><img src="i/i01.jpg" title="A caption" alt="Image01"></li>
  3. </ul>

Create a thumbnail, but don’t scale it (fit and center):

  1. <ul class="gallery">
  2. <li><img class="noscale" src="i/01.jpg" title="A caption" alt="Image01"></li>
  3. </ul>

Use a custom thumbnail and center it to fit inside the thumbnail container:

  1. <ul class="gallery">
  2. <li><a href="i/01.gif" title="A caption"><img src="i/01_thumb.jpg" alt="Image01"></a></li>
  3. </ul>

Galleria is in beta so far. If you have suggestions or bug reports, post them here or visit the google code site for Galleria. The Galleria plugin has been tested in Firefox 2, Safari 3, MSIE 6, MSIE 7 & Opera 9.