Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Gallery’ Category

NETTUTS presents a very nice tutorial on "Creating A MooTools Photo Gallery".

All the steps of creating this MooTools gallery is very well described and the source code is ready to download for instant use.

MooTools Photo Gallery

The gallery has a functional interface which enables you to browse between thumbnails and the original-size images easily.

P.S. It is not dynamic & all the thumbnails are loaded when the gallery loads. For this reason it may be suitable for galleries with <30-40 images.

Spacegallery is a very simple but nice image gallery built with jQuery.

It is a static gallery where images are hardcoded in the HTML and presented with a beautiful grow – fade out effect.

jQuery Image Gallery

How to use?

After inserting the JS & CSS files into your webpages, create a div element with images inside like:

<div id="myGallery" class="spacegallery">
    <img src="images/bw3.jpg" alt="BW" />
    <img src="images/lights3.jpg" alt="Lights" />

And call the gallery:

$('#myGallery').spacegallery({loadingClass: 'loading'});

You can also configure the perspective, border & animation duration.

FotoViewr is a web-based image gallery application which enables you to create 3D image galleries for your Flickr account.

You can choose to present your images from 6 different 3D gallery types.

Flickr Image Gallery

Galleries can be created instantly by simply providing your Fickr username (no password required) and the applications lets you select which gallery to display.

After the Fickr gallery selection, FotoViewr provides you the embed code you need to insert into your webpage to display the gallery & that’s it.


FotoViewr also has a Facebook application to use with Facebook galleries.

AutoViewer is a lightweight (11kb) & free Flash image viewer that displays the images horizontally.

It also works as a slide viewer with the play-pause-previous-next buttons and can be navigated both with mouse & keyboard.

Flash Image Viewer

AutoViewer preloads the images, so this application is more suitable for galleries with 30 images or less (pro version is optimized for more images).

This Flash image viewer‘s interface rescales to fit any aspect ratio images and monitors. And, galleries can be created via Picasa, Adobe Lightroom, a PHP script or manually.

Slideshow 2 is an open source Mootools slideshow class for streaming and animating the presentation of images.

Mootools Slideshow Script

This Mootools slideshow offers impressive features with a great usability like calling it with 1 line of code:

new Slideshow('show', ['1.jpg', '2.jpg', '3.jpg'], { controller: true, hu: 'images/' });

When you mouse-over the images a slide-controller appears which lets you control the images. And, there are various transition effects that can be configured.

Features of Slideshow 2:

  • Dynamic resizing – Slideshow can accommodate any size presentation.
  • Thumbnails – intelligent, auto-scrolling, tracking, etc.
  • Full-featured controller – completely style-able with CSS.
  • Animated captions – plain text or formatted with HTML.
  • Fully accessible – Slideshow can be controlled with access keys.
  • Automagic slideshows – create slideshows from existing HTML images.
  • Varied hyperlinking options – allows for mashups with Lightbox, Slimbox, etc.
  • CSS slide transitions – designed in stylesheets, not javascript, allow for an infinite combination of effects (plus support for all Robert Penner transitions).
  • Unobtrusive and degradable – Slideshow even functions with Javascript turned off!

Several different implementations can be found at Slideshow 2 website.

BarackSlideshow is a Mootools slideshow script with a simple & nice interface (which is very similar to the one in Barack Obama’s website & this is where the name comes from).

Mootools Slideshow

The script presents the images with a fade-in, fade-out effect.

To ensure all images are loaded before the user makes any interaction, the MooTools Assets component is used.

DhoniShow is an easy to setup image gallery script built with Prototype &

The transitions between the images can also be updated with simple parameters too.

Prototype Image Gallery

How to use this image gallery?

  • Insert the Prototype, and dhonishow.js files into your webpage.
  • Create a div element with the class=dhonishow and add any number of images inside the div. Like this:

<div class="dhonishow">
  <img src="img/cute_cat.jpg" alt="My cute cat." />
  <img src="img/cute_dog.jpg" alt="My cute dog." />
  <img src="img/cute_hamster.jpg" alt="My cute hamster." />

The JW Image Rotator is a Flash image rotator which enables presenting photos in sequence, with fluid transitions between them.

It supports rotation of an RSS, XSPF or ASX playlists with JPG, GIF and PNG images, a wide range of flashvars for tweaking the behavior and appearance.

Flash Image Rotator

Besides the flashvars, one great feature of JW Image Rotator is its JavaScript API which gives the control of the rotator totally to you.

There is an online setup wizard which generates the embed file for you for an easy startup.

JSGallery is a very nice AJAX image gallery built with Mootools.

Look & effects of the script is configurable. It supports browsing with keyboard between images and also pages.

Mootools Image Gallery

Features of this AJAX gallery:

  • nice transitions for page change, image select, etc.
  • supports easy to build no-script version
  • preloads images with separate indicators (optional)
  • a bunch of options to change the default styles and bevaviours
  • visibility of prev/next handles is controlled by mouse distance
  • use the arrow keys to go to previous/next image
  • use number keys to go to a certain page (beginning with 1)
  • prevents too fast change of images (ugly effect interruption)

easyAlbum is an open source image gallery script built with JavaScript.

This image gallery does not have an AJAX interface but it simply presents the images inside list tags with a Lightbox type browser friendly pop-up and navigation support.

JavaScript Image Gallery

How to use easyAlbum?

  • After inserting easyALBUM.js file in your page, create a list with the "ul" tag id equals gallery like <ul id="gallery"> and add the images inside the "li" tags.
  • Modify your "body" tag for onload like <body onload = "TJK_Gallery('gallery');">.
Uptime Robot