Galleria
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 defined by CSS.
The core of Galleria lies in it's smart preloading behaviour, snappiness and the fresh absence of obtrusive design elements. Use it as a foundation for your custom styled image gallery.
New: Galleria now has it's own forum where you can get assistance when using galleria.
Features
- Unobtrusive javascript
- Degrades gracefully if the browser doesn’t support javascript or CSS
- Lightweight (4k packed)
- Displays the thumbnail when the actual image is loaded
- CSS powered - create your own gallery style
- 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
Demonstrations
The following demos using v.1.0 are available: The more advanced Demo 01 and the simple Demo 02. The demonstration examples present various implementations of the gallery as well as some general information.
Usage
You implement the gallery by doing five simple steps:
- 1. Download the latest jQuery release
- 2. Download the Galleria plugin and the galleria.css file.
- 3. Add the following lines inside your
<head>:
<link href="galleria.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.galleria.js"></script>
<script type="text/javascript">
jQuery(function($) { $('ul.gallery').galleria(); });
</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:
<ul class="gallery">
<li><img src="i/i01.jpg" title="A caption" alt="Image01"></li>
</ul>
Create a thumbnail, but don’t scale it (fit and center):
<ul class="gallery">
<li><img class="noscale" src="i/01.jpg" title="A caption" alt="Image01"></li>
</ul>
Use a custom thumbnail and center it to fit inside the thumbnail container:
<ul class="gallery">
<li><a href="i/01.gif" title="A caption"><img src="i/01_thumb.jpg" alt="Image01"></a></li>
</ul>
Options
- insert - By default, Galleria will create a container div before your ul that holds the image. You can, however, specify a selector where the image will be placed instead (f.ex '#main_img')
- history - Boolean for setting the history object in action with enabled back button, bookmarking etc.
- onImage - A function that gets fired when the image is displayed and brings the jQuery image object. You can use it to add click functionality and effects. f.ex
onImage(image) { image.css('display','none').fadeIn(); }will fadeIn each image that is displayed. - onThumb - A function that gets fired when the thumbnail is displayed and brings the jQuery thumb object. Works the same as onImage except it targets the thumbnail after it's loaded.
License
Galleria is licensed under the GPL licenses.
