Js Image Galleries
Here is a small list of javascript galleries, all with the exception of galleria are of the pop-up type where they go over other content.
SmoothGallery
Galleria
prettyPhoto 3
Slimbox 2
Lightbox 2
2010-11-28: added jq Slides
mootools
SmoothGallery
http://smoothgallery.jondesign.net/
SmoothGallery is pretty simple and straight forward with the expected features
here is the markup:
<div id="myGallery">
<div class="imageElement">
<h3>Item 1 Title</h3>
<p>Item 1 Description</p>
<a href="mypage1.html" title="open image" class="open"></a>
<img src="images/brugges2006/1.jpg" class="full" />
<img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<a href="mypage2.html" title="open image" class="open"></a>
<img src="images/brugges2006/2.jpg" class="full" />
<img src="images/brugges2006/2-mini.jpg" class="thumbnail" />
</div>
</div>
jQuery
Galleria
galleria is my recent favorite. I end up using jQuery more than any other library, usually because I've already called jQuery. It's easy to iimplement and has a very simple markup. This is not the lightbox/popup type of gallery. it shows the images within a page and all images are loaded in sequence, so users don't wait to load images one by one.
Markup:
<div id="galleria">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/PizBernina3.jpg/500px-PizBernina3.jpg">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/La_Galera_2.jpg/500px-La_Galera_2.jpg">
</div>
prettyPhoto
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
prettyPhoto is a gallery that I've used a few times. It is currently in version 3(Sept 15th 2010)
"prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes. It’s a full blown media lightbox.
It is very easy to setup, yet very flexible if you want to customize it a bit. Plus the script is compatible in every major browser, even IE6."
Markup:
<a href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf&?width=792&height=294" rel="prettyPhoto[flash]" title="Flash 10 demo"><img src="images/thumbnails/flash-logo.jpg" alt="Flash 10 demo" width="60" /></a>
jQuery Slides
This not a gallery, but a slide fader only. It is probably the quickest and easiest to setup and simple all around. Non-obtrusive <img> tag and all that jazz.
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').Slides({
images : [
'assets/images/banner/banner_0.jpg',
'assets/images/banner/banner_1.jpg'
],
wait : 0, fade : 1500, pause : 5000
});
});
</script>
https://github.com/olle/slides
http://www.studiomediatech.com/slides/
Slimbox 2
http://www.digitalia.be/software/slimbox2
"Slimbox 2 is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the jQuery javascript library. It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2."
Prototype + Scriptaculous
Lightbox 2
http://www.lokeshdhakar.com/projects/lightbox2/
This is the usual suspect for these galleries.
"Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers."
markup:
<div class="thumbnail">
<a href="images/image-4.jpg" rel="lightbox[plants]" title="title"><img src="images/thumb-4.jpg" alt="Plants: image 2 0f 4 thumb" height="40" width="100"></a>
</div>
LightView
LightView looks like a nice choice, it has some snappy performance, but requires a licensing fee. ie. Not Free
http://www.nickstakenburg.com/projects/lightview/
