- demoA.JPG (61.03 KiB) Viewed 4727 times
- demoS.JPG (76.17 KiB) Viewed 4727 times
Tip: Don't forget to check out FS Gallery, a full-screen gallery that works in similar ways as Galleria (read more in the blog post).
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
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:
- Download the latest jQuery release
- Download the Galleria plugin and the galleria.css file.
galleria.zip- (5.44 KiB) Downloaded 347 times
- Add the following lines inside your <head>:
Code: Select all
<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> - Create an unordered list of images and give it an identifier (in this case class='gallery')
- Style your gallery using CSS. Galleria has a default style that you can easily override and modify.
Create and scale a clickable thumbnail:
Code: Select all
<ul class="gallery">
<li><img src="i/i01.jpg" title="A caption" alt="Image01"></li>
</ul> Code: Select all
<ul class="gallery">
<li><img class="noscale" src="i/01.jpg" title="A caption" alt="Image01"></li>
</ul> Code: Select all
<ul class="gallery">
<li><a href="i/01.gif" title="A caption"><img src="i/01_thumb.jpg" alt="Image01"></a></li>
</ul> - 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.
Galleria is licensed under the GPL licenses.
Courtesy of DevKick
