March 2009 – Cool Javascripts By Ethical Swinger Coders

10 jQuery plugins for manipulating images

Posted on March 5, 2009 by admin

We are ethical swinger javascript coders. That means - we are people who practice the swinging lifestyle and support/advocate it. 10% of our time we support swingers related websites - swingers clubs directories, social networks, events lists and do it for free. If you didn't get into our 10% window and you are representing any alternative relationship/sex lifestyle (polyamory, swing, kink, BDSM, casual sex) - we would be glad to serve you by 50% of market prices. Also, we doing an effort to spread the information about lifestyle and anything related to it. At this blog, we would make posts sometimes about our swingers related projects. One of project which we support is https://allswingersclubs.org/ - pls, support it either - visit it, comment, add your clubs.

This time, I want to list some jQuery plugins that work with images or manipulate images some how. I didn’t consider scripts for slide shows or image viewer.

You may be also interested in the following posts,

Image Reflection

Image reflection is a common technique that designers use for a visual appeal. This jQuery plugin can create the reflection automatically for images. It is very light & faster because it uses the Canvas object in supported browsers and DirectX filters in Internet Explorer.

Features

Light weight (Less than 2KB)
Easy to use
Customizable

DEPENDENCIES	jQuery 1.2.3 +
SIZE	Less than 2KB
RESTRICTIONS	None
COMPATIBLE BROWSERS	IE 6+,Firefox 1.5+, Opera 9+, Safari 2+, Camino and Google Chrome
DEMO & DOWNLOD	Open \| Open in new window

For a stand alone reflection script, please visit http://cow.neondragon.net/stuff/reflection/

jqZoom – Image magnifier for jQuery

It is a good script to zoom into some part of an image. The idea is to use two images. A smaller image which shows initially and a high resolution copy of that image which will be shown (part of the image corresponding to the mouse position).

Open in new window

DOWLOAD & INFO
DEPENDENCIES	jQuery 1.2.6 +
SIZE	Less than 9KB
RESTRICTIONS	None (GPL)
COMPATIBLE BROWSERS	Firefox 2+, Opera 9+, IE6+, Safari 2+, Google Chrome
DEMO	Open \| Open in new window

jQPanView

This script is useful if we need to show a high resolution image in a a small area. Using this script, user can pan around the images using a small thumbnail view (like google map).

DEPENDENCIES	jQuery 1.2.6 +
SIZE	Less than 3KB (Uncompressed)
RESTRICTIONS	None
DEMO & DOWNLOAD	Open \| Open in new window

jCrop – Select an image area

It can be used to draw a selection inside an image. Then this data can be used to crop that image in server side. A very good interface that matches to professional image cropping applications. Probably it is useful in a CMS or for web based image manipulation.

Open in new window

DOWLOAD
DEPENDENCIES	jQuery 1.2.6 +
SIZE	10KB (Compressed)
RESTRICTIONS	None (MIT)
COMPATIBLE BROWSERS	Firefox 3, Opera 9.5, IE6+, Safari 3, Google Chrome
DEMO	Open \| Open in new window

imgAreaSelect

This script also serves the same purpose as JCrop but with some more customization options. Lots of examples provided.

Open in new window

INFO & DOWLOAD
DEPENDENCIES	jQuery 1.2.6 +
SIZE	11KB (Minified)
RESTRICTIONS	None (Dual Licensed GPL + MIT)
DEMO	Open \| Open in new window

360 degree panorama

This script creates a 360 degree panoramic view of any objects using an array of images. The script is simple to use. Shoot the photos of the object in all possible angles and give it as an array to the script. The image preloader will load all images. Can be activated in mouse move or click.

DEPENDENCIES	jQuery 1.2.3 +
SIZE	Less than 3KB (Uncompressed)
RESTRICTIONS	None
DEMO & DOWNLOAD	Open \| Open in new window

Spherical Panorama

It can create a spherical panorama from given images. It will need a lot of images and those are handled well using a good loading animation. All the process are explained well in their site (It is in French, I have given a google translated link).

Google English translation

TRANSLATED PAGE IN ENGLISH
DEPENDENCIES	jQuery 1.2.3 +
SIZE	Less than 7KB (Uncompressed)
RESTRICTIONS	None (GPL)
DEMO & DOWNLOAD	Open \| Open in new window

jQuery Virtual Tour

This is a good script for creating panoramic views with hot spots. The animation is good and there are controls which pops up on mouse over to control the direction or pause. We only need to give the image and the hotspots can be given using image maps.

DEPENDENCIES	jQuery 1.2.3 +
SIZE	Less than 10KB including all supported scripts
RESTRICTIONS	None (GPL)
DEMO & DOWNLOAD	Open \| Open in new window
INFO & DOWNLOAD	Open

For a more simple panorama viewer (without support for hot spot), please check http://www.openstudio.fr/jquery.panorama/

Image Cube

It is a jQuery plugin that sets a division to rotate between images as if they were on the faces of a cube.

The image cube functionality can easily be added to a division with appropriate default settings. It then displays the images contained within the targetted division in a cycle every two seconds. A random rotation is chosen each time to move to the next image. Highlights and shadows are used to enhance the 3D effect.

DEPENDENCIES	jQuery 1.2.6 +
SIZE	Less than 8KB (Compressed)
RESTRICTIONS	None (GPL + MIT)
DEMO & DOWNLOAD	Open \| Open in new window

jqPuzzle – for creating sliding puzzles

jqPuzzle lets you easily create sliding puzzles for your web page. Select an image, put it in your page, and add some magic – jqPuzzle will automagically turn it into a full-blown sliding puzzle! If you want, you can highly customize and style your sliding puzzle according to your needs. The interface is available in several languages, and you can add your own texts on the fly.

DEPENDENCIES	jQuery 1.2.1 +
SIZE	Less than 10KB (Compressed)
RESTRICTIONS	None (GPL + MIT)
DEMO & DOWNLOAD	Open \| Open in new window

Most useful prototype / script.aculo.us plugins

Posted on March 5, 2009 by admin

Prototype is one of the earliest new generation javascript libraries (or javascript frame work) like jQuery & Mootools. Coupled with Script Aculous, it is a powerful library and many extensions/plugins are available for it. The one downside to this library is, it is rather huge and requires script aculous even for basic animations. Size is okay when compressed, but it is not easy to find a compressed version and if compress via javascript compressors, it might produce some errors.

Here is a collection of the most useful prototype plugins grouped in to categories so that you can find your script based on your needs. Includes scripts for image galleries, lightbox, in place editors, form validation, modal windows, image manipulation, auto complete, table sorting etc.

Useful resources

Prototype image gallery & lightbox

ProtoFlow

ProtoFlow is the prototype equivalent of Apple’s coverflow effect. Nicely implemented with reflection (reflection.js script required).

LightView

It is an excellent script which can show images, movies, flash or iframe content in an overlay effect. It supports slideshow mode for images and auto detection of media using file name extension.

qGallery

This is not yet complete and is not available for download. But the demos are worth watching and looks promising. It is aimed to be a complete gallery script with support for XML based galleries width different viewing options, thumbnail zoom etc.

Lightbox

It is one of the first lightbox scripts.

Prototype auto complete

http://www.brandspankingnew.net/specials/ajax_autosuggest/ajax_autosuggest_autocomplete.html

http://www.beauscott.com/examples/autocomplete/doc/examples.html

Prototype UI (Slider & Modal Window)

Prototype UI is a javascript library based on Prototype (1.6) and Script.aculo.us (1.8). It’s a library of User Interface components, based on a common fundation classes, which could be easily used by various web applications.

Prototype tool tip

Prototip

It is a good script with customizable tool tips. The site contains lot of examples of customization.

Prototype inline editors

Edit In Place

Ajax In Place Rich Editor

This supports tinyMCE integration with in place editor.

Prototype form validation

http://www.benjaminkeen.com/software/rsv/prototype/demo.php?page=7

http://tetlaw.id.au/upload/pages/really-easy-field-validation/

Prototype table sorting

Prototype image manipulation

Prototype Cropper

Phototype

phototype is a client/server-side library, based on prototype. On the server side the library is powered by PHP(with GD library) that renders the image. With phototype, you are able to rotate, resize, flip and do some other cool effects to images.

Prototype color picker

10 Mootools plugin for showing image gallery

Posted on March 3, 2009 by admin

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