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

Color picker galore!

A color picker allows the users to preview the color and select it by clicking on it. It is useful when you want to provide some customization for the user (for eg: select a background color, letter color etc). But I think is a very useful piece of code in the admin side of a CMS site (Select font color, theme color or anything that you can imagine). There are simple scripts which generates a simple web safe color palette to advanced ones which generates a color palette like Adobe Photoshop.

Here are some cool color picker scripts that can be used. Some of them are written using plain javascript – means you don’t need any javascript library like jQuery, Mootools. And some of them are written specifically for jQuery, Mootools or Prototype (Here the advantage is a smaller footprint. If you’re already using a javascript library like jQuery or Mootools, use the one particularly written for that library). There are more than 10 scripts to choose from.

Plain Javascript scripts for Color picker

There were lot of scripts using plain javascript. Some are larger in size and some uses a popup window interface which is not Web 2.0 standard (It will be considered as an advertisement popup and will be blocked by most of the browsers). I selected three of them which are smaller in size and has the DHTML style popup or inine popup.

Use any of the following if you are not using a javascript library like jQuery or Mootools.

DHTML color picker from Free-color-picker.com

It can handle web safe colors and grays. Triggering can be customized in many ways. Files can be downloaded separately according to your needs. It also supports popup window. It is a small script – just around 8KB. But if you wan to show more colors, you can’t use it. Also, the license states that it should not be modified and the link to the site should not be altered.

DEPENDENCIESNone
SIZE8KB
RESTRICTIONSLicense states that script should not be altered. Also, the link should not be removed.
DEMOOpen | Open in new window
INFO & DOWNLOADOpen

jsColor

jscolor is JavaScript component extending standard form controls of the smooth color pickerpickerize your text fields

It is a good and very easy to use script when you want to show more colors.

DEPENDENCIESNone
SIZE24KB
RESTRICTIONSNone (GPL)
DEMOOpen | Open in new window
INFO & DOWNLOADOpen

Color Jack

It is the smallest of them all – just 3.5KB. Also this site has two other pickers Color Picker v2 and Color Sphere
. Choose one that matches your required style.

DEPENDENCIESNone
SIZE4KB
RESTRICTIONSNone
DEMOColor Sphere | Color Sphere 
Color Picker 1.0 | Color Picker 1.0 
Color Picker V2.0 | Color Picker 2.0
INFO & DOWNLOADOpen

Others

Color Pickers for jQuery

jQuery is a wonderful javascript library and the number of available plugins are growing rapidly. If you’re already using jQuery, choose a color picker from here.

Farbtastic color picker plug-in

Farbtastic: jQuery color picker plug-in

Farbtastic is a jQuery plug-in that can add one or more color picker widgets into a page through JavaScript. Each widget is then linked to an existing element (e.g. a text field) and will update the element’s value when a color is selected.
Farbtastic uses layered transparent PNGs to render a saturation/luminance gradient inside of a hue circle. No Flash, no pixel sized divs.

DEPENDENCIESjQuery
SIZE9KB
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

Color picker by eyecon.ro

A simple component to select color in the same way you select color in Adobe Photoshop

  • Easy to use and looks good
  • Powerful controls for color selection
  • Easy to customize the look by changing some images
DEPENDENCIESjQuery
SIZE16KB
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

Normal color picker by www.felecan.com

It is a lightweight color picker.

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

jQuery color picker by Syronex

It is a simple color picker which is useful when you want to show a defined set of colors and the user should select only from them (For eg: To select a theme color in web sites).

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

Others

Color pickers for Mootools

Moo Rainbow

mooRainbow is a powerful Javascript color picker that allows you to visually choose and use colors as a real and useful application.

DEPENDENCIESMooTools
SIZE5KB
RESTRICTIONSNone (MIT License)
DEMO & DOWNLOADOpen | Open in new window

Mootools color picker by Sweetvision.com

The Color Picker displays a Hue selection bar Saturation/Value selection box, Text fields for entering HSV and RGB fields. The dialog for the color picker is drag-able and there are many actions that you can attach function calls to in order to allow your application to respond to events in the Color Picker. The size of the Hue Bar and the SV Box can be set to any size using options. The elements of the Color Picker can be styled to match the design of your site.

It supports two types of interface – a popup layer type and an in-place color picker

DEPENDENCIESMooTools
SIZE12KB
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

Color pickers for Prototype

Color picker by John Dyer

It is a photoshop like color plugin built on prototype library.

DEPENDENCIESPrototype
SIZE10KB
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

Prototype color picker by Myles Eftos

It is a simple color picker which support web safe palette.

DEPENDENCIESPrototype
SIZE5KB
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

Improved lava lamp effect for jQuery and Mootools

The lava lamp effect was an excellent technique to turn the navigation to a flash like animation. LavaLamp allows you to add nifty background hover effects to HTML lists in combination with the Easing library.

It is available for bot jQuery and Mootools

LavaLamp – Lava lamp for jQuery

  • Horizontal and vertical movement supported
  • Callback support on completion
  • Easing library support – Can use any supported animation
  • Speed can be adjusted
DEPENDENCIESjQuery, Easing plugin
SIZE5 KB (Uncompressed)
RESTRICTIONSNone
DEMOOpen | Open in new window
INFO & DOWNLOADOpen

Don’t forget to checkout the different easing effects (On top of the demo page)

Fancy Menu – Lava lamp for Mootools

DEPENDENCIESMootools (Latest version requires 1.2)
SIZE2KB
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

Also, check the Barack Slideshow plugin based on the MorphList plugin for Mootools.

Fancy Upload – Ajax file upload for MooTools

Fancy upload is a nice and excellent replacement for the file input field. It uses a flash component called swiff for file upload and other features. But instead of displaying the flash interface, it uses javascript to interact with the flash component and the appearance is fully skinnable using CSS & HTML.

It works on Mootools.

Features

  • Multiple file upload support
  • Filter files by type in file selection dialog box
  • Shows file information before upload
  • Can cancel running uploads
  • Unobtrusive – The flash is replace once it is loaded.
  • Customization
DEPENDENCIESMooTools
SIZELess than 15KB (Flash file and scripts – MooTools library etc)
SUPPORTED BROWSERSAll modern browsers with flash player 9.0 or above
RESTRICTIONSNo
DEMOOpen | Open in new window
INFO & DOWNLOADOpen

This requires Adobe flash player 9.0 or above.

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