Cool Javascripts » Galleries

10 Mootools plugin for showing image gallery

admin — Tue, 03 Mar 2009 06:39:23 +0000

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.

Dependencies	MooTools 1.1
Size	Less than 5KB
Restrictions	None
Demo	Open \| Open in new window
Download	Open 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

Dependencies	Mootools 1.2
Size	Less than 14KB(Uncompressed)
Restrictions	None
Demo	Open \| Open in new window
Download	Open 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.

Dependencies	MooTools 1.2
Size	Less than 4KB(Uncompressed)
Restrictions	None
Demo & Download	Open \| 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.

Dependencies	MooTools 1.2
Size	Less than 3KB(Compressed)
Restrictions	None
Demo & Download	Open \| 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)

Dependencies	MooTools 1.2
Size	Less than 17KB(Compressed)
Restrictions	None
Demo & Download	Open \| 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.

Dependencies	MooTools 1.1+
Size	Less than 2KB(Uncompressed)
Restrictions	None
Demo & Download	Open \| 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.

Dependencies	MooTools 1.1+
Size	Less than 13KB(Uncompressed)
Restrictions	None (MIT)
Demo & Download	Open \| 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

Dependencies	MooTools 1.2
Size	Less than 13KB(Uncompressed)
Restrictions	None (MIT)
Demo & Download	Open \| 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

Dependencies	MooTools 1.2
Size	Less than 35(Including core 26KB (Uncompressed) and transitions)
Restrictions	None (MIT)
Demo	Open \| Open in new window
Download	Open 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

Dependencies	MooTools 1.2
Size	Less than 24KB
Restrictions	None (GPL)
Demo	Open \| Open in new window
Download	Open 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...
Highslide – The best image gallery script? Highslide is a standalone javascript library created mainly for...
jQuery and Mootools plugin to show tooltips The tooltip is a common graphical user interface element. It...

Related posts brought to you by Yet Another Related Posts Plugin.

10 jQuery plugins for showing image gallery

admin — Mon, 09 Feb 2009 13:03:48 +0000

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.

Dependencies	jQuery 1.2
Size	Less than 5KB (Compressed)
Restrictions	None (GPL)
Demo	Open \| Open in new window
Info & Download	Open

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

Dependencies	jQuery 1.2
Size	12 KB (Minified)
Restrictions	None
Demo & Download	Open \| 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.

Dependencies	jQuery 1.2
Size	Less than 2KB (Packed)
Restrictions	None
Demo	Open \| Open in new window
Info & Download	Open 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

Dependencies	jQuery 1.2, jQuery Easing plugin
Size	Less than 2KB (Packed)
Restrictions	None
Demo & Download	Open \| Open in new window

Easy Slider

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

Dependencies	jQuery 1.2
Size	8KB (Uncompressed)
Restrictions	None
Demo	Open \| Open in new window
Info & Download	Open in new window

Crossfade

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

Dependencies	jQuery 1.2
Size	Less than 12KB
Restrictions	None (GPL)
Demo & Download	Open \| 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.

Dependencies	jQuery 1.2
Size	Less than 6KB
Restrictions	None
Demo & Download	Open \| Open in new window

9. Enhance Gallery

Dependencies	jQuery 1.2
Size	Less than 4KB
Restrictions	None
Demo & Download	Open \| 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.

Dependencies	jQuery 1.2
Size	18 KB (With all transition effects – Core plugin 9KB)
Restrictions	None
Demo & Download	Open \| Open in new window

Space Gallery

Dependencies	jQuery 1.2
Size	13 KB
Restrictions	None
Demo & Download	Open \| Open in new window

Image Flow

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

10 Mootools plugin for showing image gallery In the previous post, I discussed about jQuery plugins for...
Highslide – The best image gallery script? Highslide is a standalone javascript library created mainly for...
10 jQuery plugins for manipulating images This time, I want to list some jQuery plugins that...

Related posts brought to you by Yet Another Related Posts Plugin.

Three lightbox clones for Mootools

admin — Tue, 06 Jan 2009 13:45:59 +0000

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.

Dependencies	Mootools
Size	Less than 22KB (Uncompressed)
Grouping of Images	Supported
Keyboard Navigation	Supported (Arrow keys & Esc)
Transition Effects	Yes
Description for images	Supported
Slide show mode	Supported
Image Resize	No
Description for images	Supported
Supported Browsers	Firefox 2+3, IE6+7, Safari 3, Opera 9.5
Restrictions	No
Demo & Download	Open \| Open in new window

Slimbox

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

tr>

Dependencies	Mootools
Size	4KB
Grouping of Images	Supported
Keyboard Navigation	Supported (Arrow keys & Esc)
Transition Effects	Yes
Description for images	Supported
Slide show mode	No
Image Resize	No
Supported Browsers	Firefox 2+3, IE6+7, Safari 3, Opera 9.5
Restrictions	No
Demo	Open \| Open in new window
Info & Download	Open

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.

Dependencies	Mootools
Size	10KB
Grouping of Images	Supported
Keyboard Navigation	Supported (Arrow keys & Esc)
Transition Effects	Yes
Description for images	Supported
Slide show mode	No
Image Resize	No
Supported Browsers	Firefox 2+3, IE6+7, Safari 3, Opera 9.5
Restrictions	No
Demo & Download	Open \| Open in new window

Which is the best lightbox clone for jQuery ? Lightbox is a script made by Lokesh Dhakar which is...
10 Mootools plugin for showing image gallery In the previous post, I discussed about jQuery plugins for...
Improved lava lamp effect for jQuery and Mootools The lava lamp effect was an excellent technique to turn...

Related posts brought to you by Yet Another Related Posts Plugin.

Agile Carousel – Custom carousel with excellent options

admin — Sun, 04 Jan 2009 08:07:14 +0000

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.

Dependencies	jQuery 1.26, jQuery UI library recommended
Size	16KB (Minified)
Restrictions	None (New BSD)
Demo	Open \| Open in new window
Info & Download	Open

Which is the best lightbox clone for jQuery ? Lightbox is a script made by Lokesh Dhakar which is...
Fancy Upload – Ajax file upload for MooTools Fancy upload is a nice and excellent replacement for the...
10 Mootools plugin for showing image gallery In the previous post, I discussed about jQuery plugins for...

Related posts brought to you by Yet Another Related Posts Plugin.

Which is the best lightbox clone for jQuery ?

admin — Fri, 02 Jan 2009 22:08:54 +0000

Lightbox is a script made by Lokesh Dhakar which is one of the most popular way for showing images or image galleries. The original lightbox script was written using prototype and script aculous javascript libraries. So the main problem is, we need to include these two libraries (almost 100 KB) again even if we’re using jQuery. Certainly, this is not the best way. Thank fully, some programmers realized the situation and made the clones using jQuery. The effects and functionality are almost similar to lightbox but the only difference is, it uses jQuery library instead of prototype. The size of a compressed jQuery library is only 25KB.

Here, I am reviewing three of the lightbox clones.

jQuery Lightbox Plugin (balupton edition)

Specifications

Dependencies	jQuery
Size	Less than 13KB (compressed)
Grouping of Images	Supported
Keyboard Navigation	Supported (Arrow keys & Esc)
Transition Effects	Yes
Description for images	Supported
Image Resize	Yes, automatically resizes to fit in browser
Description for images	Supported
Supported Browsers	Firefox 2+3, IE6+7, Safari 3, Opera 9.5
Restrictions	No (GPL license)
Demo	Open \| Open in new window
Info & Download	Open in new window

This plugin is easy to use and supports automatic resizing of images(But no option to show unresized image). It is slightly heavier than the other two.

jQuery Lightbox by Leandro Vieira Pinho

Dependencies	jQuery
Size	Less than 7KB (compressed)
Grouping of Images	Supported
Keyboard Navigation	Supported (Arrow keys & Esc)
Transition Effects	Yes
Description for images	Supported
Image Resize	No
Description for images	Supported
Supported Browsers	Firefox 2+3, IE6+7, Safari 3, Opera 9.5
Restrictions	No
Demo & Download	Open \| Open in new window

One problem I noticed with this script is, the images are not centered correctly in some cases (Try with an image that almost fits the browser client area). Also it doesnot support image resize. So if a large image is used, one needs to scroll the window to see the whole image. The good side is, it is very light and configurable. Unlike the others, the lightbox should be invoked for the required elements. So you need to use a simple jquery statement to invoke the lightbox (Very simple and fully documented)

Pretty Photo by Stephane Caron

Dependencies	jQuery
Size	Less than 9KB (compressed)
Grouping of Images	Supported
Keyboard Navigation	Supported (Arrow keys & Esc)
Transition Effects	Yes
Description for images	Supported
Image Resize	Yes
Flash Support	Yes
Supported Browsers	Firefox 2+3, IE6+7, Safari 3, Opera 9.5
Restrictions	No
Demo & Download	Open \| Open in new window

It looks very good. The animations, centering and resizing of images, are perfectly done. The default styles are also fine. One thing I like is, it automatically resizes the image and an icon is shown in the image to expand it to original size (Very good feature, just like Highslide). Also, it is always centered even if the window is scrolled. But here I suggest to use the jQuery easing plugin for better effects.

Conclusion

As we can see, Pretty Photo is the best considering the features. It also supports flash. The default styles are also nice. So in my opinion, it is the best lightbox clone for jQuery. What do you think? Please let me know your thoughts.

Three lightbox clones for Mootools Just like jQuery, Mootools also has some nice lightbox clones...
Image Flow 0.9 Image flow is inspired by Apple’s cover flow. The...
10 jQuery plugins for showing image gallery An image gallery is part of the modern web 2.0...

Related posts brought to you by Yet Another Related Posts Plugin.

Featured content slider – Auto advancing

admin — Wed, 22 Oct 2008 09:40:00 +0000

Using jQuery Coda plugin, css-tricks.com has created a very good script for a featured content gallery with auto advancing. It can be created with simple html markups.

Dependencies	jQuery, jQuery Easing & Compatibility plugin, jquery Coda plugin
Size	Less than 40KB (All scripts including jQuery compressed)
Restrictions	None (Free to use on any site)

Suggested Enhancements

Add scroll functionality (carousel functionality) in the thumbnails so that any number of items can be featured.

For demo and download, please check the links

Open Demo | Open demo in new window | Info & Download code

jQuery Coda Slider There are two jQuery plugins to emulate the Coda...
Accessible news slider for jQuery It is a good plugin which follows the accessibility requirements...
Image Flow 0.9 Image flow is inspired by Apple’s cover flow. The...

Related posts brought to you by Yet Another Related Posts Plugin.

Highslide – The best image gallery script?

admin — Fri, 03 Oct 2008 09:40:00 +0000

Highslide is a standalone javascript library created mainly for showing image galleries in a more user friendly way. HTML/Ajax and Flash support is added as plugins. It has improved a lot over time. Now it is in version 4.0

Unlike many other libraries, multiple images can be opened at the same time. And a user can arrange the images as he wish on the browser. So it is definitly more usable than image gallery script that can show only one image – typical example is lightbox effect (opening the next closes the current).

The animation is also brilliant. Very smooth zooming of images. To open an image, you just need to click and to close, click on it again (Customizable in different ways). If you want to open two images, just click on the required images and those two will be popped up. Opening one image does not close the other.

Advantages:

Stand alone javascript. Does not need a library.
The most user friendly way to show images
Good effects
Can show HTML, AJAX content or Flash.
Can open multiple images
The opened image windows are draggable so that the user can arrange it in anyway. This is very useful if you want to compare two images.
Creative Commons License – Free for personal use

Disadvantages:

Not free for commercial sites. Requries a license. It can be purchased for one site or unlimited

The author has given good documentation and examples in his site highslide.com

Another cool site to check out is, http://youflow.finnrudolph.de. The author has successfully combined coverflow, youtube API and highslide to create a good mashup.

Is it the best?

Well, I think it has improved a lot. Using this script you can completely avoid browser popup windows. The ability to show images and non image (html, iframe) contents in a more userfriendly way makes it one of the best script ever made. The only drawback I see is the license. What do you think?

10 Mootools plugin for showing image gallery In the previous post, I discussed about jQuery plugins for...
10 jQuery plugins for showing image gallery An image gallery is part of the modern web 2.0...
Most useful prototype / script.aculo.us plugins Prototype is one of the earliest new generation javascript libraries...

Related posts brought to you by Yet Another Related Posts Plugin.

Image Flow 0.9

admin — Thu, 03 Jul 2008 06:22:23 +0000

Image flow is inspired by Apple’s cover flow. The javascript renders the cover flow effect without any noticeable flaw. Keyboard navigation (arrow keys), mouse scroll and dragging is supported. Very cool script to use.

Advantages

XHTML compliant

Keyboard and Mouse scroll wheel navigation supported

Free to use on any site

No dependencies

small in size (Only 11 KB uncompressed)

Specifications

Dependencies	None
Size	11KB (Uncompressed)
Restrictions	None (Free to use on any site)

For demo and download, please check the links

Open | Open in new window

The above demo opens images in another tab/window. Means no lightbox support. But lightbox support can be integrated. Please check the links below

Open | Open in new window

10 Mootools plugin for showing image gallery In the previous post, I discussed about jQuery plugins for...
Highslide – The best image gallery script? Highslide is a standalone javascript library created mainly for...
10 jQuery plugins for showing image gallery An image gallery is part of the modern web 2.0...

Related posts brought to you by Yet Another Related Posts Plugin.