10 Mootools plugin for showing image gallery

In the previous post, I discussed about jQuery plugins for showing image gallery. This time, I checked for Mootools alternative. Like jQuery, I was able to found gallery plugins which have similar functionality. Listing 10 of them. Pick one that suits your need.

You might also want to check these posts,

E2 Photo Gallery

It is a simple and easy to use (provided, you’re using PHP) gallery plugin which supports thumbnail images with carousel view. It is supplied with a php file which can scan a specified folder for images and it can create the gallery automatically.

DEPENDENCIESMooTools 1.1
SIZELess than 5KB
RESTRICTIONSNone
DEMOOpen | Open in new window
DOWNLOADOpen in new window

JSGallery2

It is a simple gallery plugin with support for thumbnails with paging. The transition effects are simple. The latest version is based on MooTools 1.2. There is also an older version for MooTools 1.1

DEPENDENCIESMootools 1.2
SIZELess than 14KB(Uncompressed)
RESTRICTIONSNone
DEMOOpen | Open in new window
DOWNLOADOpen in new window

Image Gallery by TutorialDog.com

It is a light weight plugin which supports thumbnails and image captions. As it uses a carousel like view for thumbnails, it can be implemented in less space.

DEPENDENCIESMooTools 1.2
SIZELess than 4KB(Uncompressed)
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

noobSlide

NoobSlide is a multipurpose script which can also be used as a gallery. Lots of different styles are supported. It can also be used as a content slider. The animation is also good. There are lots of examples provided in their site. You can also find a version for MooTools 1.1.

DEPENDENCIESMooTools 1.2
SIZELess than 3KB(Compressed)
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

UvumiTools Gallery Plugin

It is an unconventionally styled gallery. Thumbnails are listed with a zoom effect on hover. Once you click the image, the view is switched to a 3d looking carousel of thumbnails + the main image. The animations are also good.


Features

  • Automatic resizing of images
  • Handles broken image links
  • Mouse wheel scrolling
  • Support for captions with animation effect (Fancy Caption)
DEPENDENCIESMooTools 1.2
SIZELess than 17KB(Compressed)
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

MooPix

MooPix is a script that is specifically written to handle Flicker images. There is support for a slide show mode and thumbnail mode.

MooPix isn’t a slideshow, it’s a way for you to access your public Flickr photos without doing PHP, Ruby, or Python situps.

DEPENDENCIESMooTools 1.1+
SIZELess than 2KB(Uncompressed)
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

PhatFusion Slideshow

This is one of the earliest image galleries available for MooTools. Still it is a neat looking gallery with thumbnails and slide show mode.

DEPENDENCIESMooTools 1.1+
SIZELess than 13KB(Uncompressed)
RESTRICTIONSNone (MIT)
DEMO & DOWNLOADOpen | Open in new window

MooFlow

MooFlow is a script that emulates the famous CoverFlow of Apple’s. Interestingly it supports full screen option like a flash player which fills the browser viewable area. Mouse wheel and keyboard navigation is supported.

Features

  • Easy to setup
  • Automatic resizing of images with full size viewer (popup)
  • Fullscreen option
  • Reflections
  • Can run multiple instances in same page
DEPENDENCIESMooTools 1.2
SIZELess than 13KB(Uncompressed)
RESTRICTIONSNone (MIT)
DEMO & DOWNLOADOpen | Open in new window

Slideshow 2

It is an advanced imaged gallery with excellent transition effects. It supports cross fading of images and Ken Burns effect. The scripts are separate for core functionality and different transitions so that you only need to include the transitions you want.


Features

  • Excellent transitions – cross fading & Ken Burns
  • Good styles
  • Slideshow mode
  • Auto scrolling thummbnails (Examples for vertical thumbnails provided)
  • Support for image caption
  • Lots of examples provided
DEPENDENCIESMooTools 1.2
SIZELess than 35(Including core 26KB (Uncompressed) and transitions)
RESTRICTIONSNone (MIT)
DEMOOpen | Open in new window
DOWNLOADOpen in new window

SmoothGallery

It is another excellent script which can be used to show image galleries as well. The thumbnails are shown inside the images and auto scrollable. In the new version transition effects are also supported.

smooth gallery
Features

  • Controls & thumbnails are placed inside the main image, which enables it to be placed in a small area.
  • Auto scrolling thumbnails
  • Image Caption
  • Images are linkable, which makes it suitable for a featured content gallery
DEPENDENCIESMooTools 1.2
SIZELess than 24KB
RESTRICTIONSNone (GPL)
DEMOOpen | Open in new window
DOWNLOADOpen in new window

Conclusion

When comparing features, Slide Show2 is the best script for showing an image gallery. It supports different types of transitions, customizable options and provides a lot of examples in their website.

Smooth Gallery is also good. It takes less space in a web page and can be used as a featured content slider.

Mootools Vs jQuery
In the previous post, I’ve listed 10+ image gallery plugins for jQuery. Finding plugins for both jQuery & Mootools is a fairly easy job. Also, both libraries have plugins which matches in functionality. So I think, it is just a matter of choice. If you are comfortable with jQuery use it, or use Mootools otherwise.

Anyway, I think Slideshow 2 & Smooth Gallery are excellent scripts which lacks alternative in jQuery. jQuery has CrossSlide which has transition effects similar to Slide Show 2, but it is not complete as a gallery plugin as Slide Show 2 is. And for Smooth Gallery, I couldn’t find a jQuery alternative. Hope someone will port it to jQuery.

Edit: Links corrected, missing image for Smooth Gallery added

10 jQuery plugins for showing image gallery

An image gallery is part of the modern web 2.0 design. There are many ways to show it. For eg: thumbnail listing of images – clicking will show the corresponding large image in an overlay div – like lightbox. The other method is, list images inline – no popups.

Here I’ve listed 10 jQuery plugins which can be used for this type of gallery. All these plugins can show images with some transition effects. I didn’t consider lightbox like (popup) scripts. But you may be interested in the following articles.

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.

DEPENDENCIESjQuery 1.2
SIZELess than 5KB (Compressed)
RESTRICTIONSNone (GPL)
DEMOOpen | Open in new window
INFO & DOWNLOADOpen

Gallerific

Features

  • Smart image preloading after the page is loaded
  • Thumbnail navigation (with pagination)
  • Support for bookmark-friendly URLs per-image
  • Slideshow (with optional auto-updating url bookmarks)
  • Events that allow for adding your own custom transition effects
  • Support for image captions
  • Flexible configuration
  • Graceful degradation when javascript is not available
  • Support for multiple galleries per page
DEPENDENCIESjQuery 1.2
SIZE12 KB (Minified)
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

S3 Slider

It is a simple & lightweight jQuery plugin which can show images with captions. It is useful, if we want to show image slide shows without thumbnails.

DEPENDENCIESjQuery 1.2
SIZELess than 2KB (Packed)
RESTRICTIONSNone
DEMOOpen | Open in new window
INFO & DOWNLOADOpen in new window

Coda Slider

Though it is not limited to showing images, it is still an option to show images.

Read more

Slide Viewer

slideViewer is a lightweight (1.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images

DEPENDENCIESjQuery 1.2, jQuery Easing plugin
SIZELess than 2KB (Packed)
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

Easy Slider

This is a multipurpose sliding gallery. It can show images or text contents.

DEPENDENCIESjQuery 1.2
SIZE8KB (Uncompressed)
RESTRICTIONSNone
DEMOOpen | Open in new window
INFO & DOWNLOADOpen in new window

Crossfade

It supports some very advanced transition effects like Ken Burns effect. The transitions can be customized.

DEPENDENCIESjQuery 1.2
SIZELess than 12KB
RESTRICTIONSNone (GPL)
DEMO & DOWNLOADOpen | Open in new window

Innerfade

InnerFade is a small plugin for the jQuery-JavaScript-Library. It’s designed to fade you any element inside a container in and out.These elements could be anything you want, e.g. images, list-items, divs.

DEPENDENCIESjQuery 1.2
SIZELess than 6KB
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

9. Enhance Gallery

DEPENDENCIESjQuery 1.2
SIZELess than 4KB
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

jQuery Cycle plugin

The jQuery Cycle Plugin is a lightweight slideshow plugin. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.

DEPENDENCIESjQuery 1.2
SIZE18 KB (With all transition effects – Core plugin 9KB)
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

Space Gallery

DEPENDENCIESjQuery 1.2
SIZE13 KB
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

Image Flow

Another image gallery that mimics apple’s coverflow animation.
Read more

Three lightbox clones for Mootools

Just like jQuery, Mootools also has some nice lightbox clones available.
When compared with jQuery alternatives, one option I found to be missing is the ability to resize image according to the browser window.

You might also want to check the following post

Which is the best lightbox clone for jQuery

Milkbox

One thing I particularly liked in Milkbox is the ability to show slide shows. An interval can be specified.

DEPENDENCIESMootools
SIZELess than 22KB (Uncompressed)
GROUPING OF IMAGESSupported
KEYBOARD NAVIGATIONSupported (Arrow keys & Esc)
TRANSITION EFFECTSYes
DESCRIPTION FOR IMAGESSupported
SLIDE SHOW MODESupported
IMAGE RESIZENo
DESCRIPTION FOR IMAGESSupported
SUPPORTED BROWSERSFirefox 2+3, IE6+7, Safari 3, Opera 9.5
RESTRICTIONSNo
DEMO & DOWNLOADOpen | Open in new window

Slimbox

It is a very lightweight script – just around 4KB.

tr>

DEPENDENCIESMootools
SIZE4KB
GROUPING OF IMAGESSupported
KEYBOARD NAVIGATIONSupported (Arrow keys & Esc)
TRANSITION EFFECTSYes
DESCRIPTION FOR IMAGESSupported
SLIDE SHOW MODENo
IMAGE RESIZENo
SUPPORTED BROWSERSFirefox 2+3, IE6+7, Safari 3, Opera 9.5
RESTRICTIONSNo
DEMOOpen | Open in new window
INFO & DOWNLOADOpen

Lightbox by phatfusion

One interesting feature is the ability to specify the DIV element that should contain the background (The background layer). So the effects can be either applied to the whole body or to a particular DIV element.

DEPENDENCIESMootools
SIZE10KB
GROUPING OF IMAGESSupported
KEYBOARD NAVIGATIONSupported (Arrow keys & Esc)
TRANSITION EFFECTSYes
DESCRIPTION FOR IMAGESSupported
SLIDE SHOW MODENo
IMAGE RESIZENo
SUPPORTED BROWSERSFirefox 2+3, IE6+7, Safari 3, Opera 9.5
RESTRICTIONSNo
DEMO & DOWNLOADOpen | Open in new window

Agile Carousel – Custom carousel with excellent options

Agile Carousel is a jquery plugin which enables you to create a custom carousel with many many different transition & easing options. It has lots of configurable options like customization of controls, timer, easing type, transition type etc. It does not require jQuery UI plugin but it is recommended for excellent transitions of slides.

We need to specify a directory where slides are stored. The slides can be (X)HTML, images or flash.

Features

  • Excellent transition effects
  • Configurable controls
  • Supports HTML, Flash and images

How it works?

The script works a little differently. It posts the configured options to a PHP file using AJAX. The configurable options specify the slide directories, titles and links. The PHP file parses the options and then it scans through the directory(multiple directories are supported).

The downloaded source package contains this PHP file. The PHP script path is hard coded in javascript, so you might need to edit the path there. Also, it is possible to tweak it to work with any server side scripting languages, not just PHP.

DEPENDENCIESjQuery 1.26, jQuery UI library recommended
SIZE16KB (Minified)
RESTRICTIONSNone (New BSD)
DEMOOpen | Open in new window
INFO & DOWNLOADOpen