Galleria – a Javascript Image Gallery
146

Galleria – a Javascript Image Gallery

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 (ok, maybe one, but it’s optional). 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.

About preloading

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. 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.

Main features

  • 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
  • Options are extracted from existing markup
  • Clicking the main image will display the next in line
  • Stylable caption from image or anchor title
  • jQuery plugin – takes one line to implement
  • Browserproof

How it works

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.

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

How to use it

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. <script type="text/javascript" src="jquery.min.js"></script>
  2. <script type="text/javascript" src="galleria/jquery.galleria-0.9.js"></script>
  3. <link href="galleria/galleria.css" rel="stylesheet" type="text/css" media="screen">
  4. <script type="text/javascript">
  5. $(document).ready(function(){ $('ul.gallery').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.

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>

The options

The Galleria plugin has only two options:

  1. fadeIn (Boolean) – makes the thumbnails to fade in (true by default)
  2. nextText (String) – Sets the title message when you roll over an image (English by default)

You set the options when you define the plugin, for example: $('ul.gallery').galleria({ fadeIn:false, nextText:'Next image, please!'}); Now you know how to uses this image gallery. I hope it enhances your site and that it has helped you accomplice the effect you wanted on your site. Feel free to check out the rest of this site.