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.

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

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. <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(){ $('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. 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>