jQuery seekAttention plugin to get the users attention

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.


The “seekAttention” plugin gracefully get’s your users attention by fading out a definable area but leaving the target element (the element which is seeking attention) un-faded and thereby focusing the users attention on it.

The definable area (to be called “container” from this point forward) can be the entire page or any element which surrounds the target element and the colour which overlays the container can also be defined by you.

This plugin can be useful for web based tutorials or in forms (May be in validation).

DEPENDENCIESjQuery
SIZE5KB (compressed)
RESTRICTIONSNone
DEMO & DOWNLAODOpen | New window

Improved lava lamp effect for jQuery and Mootools

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.

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

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.

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

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.

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

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.

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

Which is the best lightbox clone for jQuery?

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.

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

DEPENDENCIESjQuery
SIZELess than 13KB (compressed)
GROUPING OF IMAGESSupported
KEYBOARD NAVIGATIONSupported (Arrow keys & Esc)
TRANSITION EFFECTSYes
DESCRIPTION FOR IMAGESSupported
IMAGE RESIZEYes, automatically resizes to fit in browser
DESCRIPTION FOR IMAGESSupported
SUPPORTED BROWSERSFirefox 2+3, IE6+7, Safari 3, Opera 9.5
RESTRICTIONSNo (GPL license)
DEMOOpen | Open in new window
INFO & DOWNLOADOpen 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

DEPENDENCIESjQuery
SIZELess than 7KB (compressed)
GROUPING OF IMAGESSupported
KEYBOARD NAVIGATIONSupported (Arrow keys & Esc)
TRANSITION EFFECTSYes
DESCRIPTION FOR IMAGESSupported
IMAGE RESIZENo
DESCRIPTION FOR IMAGESSupported
SUPPORTED BROWSERSFirefox 2+3, IE6+7, Safari 3, Opera 9.5
RESTRICTIONSNo
DEMO & DOWNLOADOpen | 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

DEPENDENCIESjQuery
SIZELess than 9KB (compressed)
GROUPING OF IMAGESSupported
KEYBOARD NAVIGATIONSupported (Arrow keys & Esc)
TRANSITION EFFECTSYes
DESCRIPTION FOR IMAGESSupported
IMAGE RESIZEYes
FLASH SUPPORTYes
SUPPORTED BROWSERSFirefox 2+3, IE6+7, Safari 3, Opera 9.5
RESTRICTIONSNo
DEMO & DOWNLOADOpen | 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.

3 jQuery plugins to show context menu

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.

A context menu (also contextual menu, shortcut menu and, popup menu) is a menu in a graphical user interface (GUI) that appears upon user interaction, such as a right mouse click. Context menus offer a limited set of items that apply to the current state, or context, of the system or application in which the context menu is invoked

Source: Wikipedia (http://en.wikipedia.org/wiki/Context_menu)

Here is a review of 3 jQuery plugins that can override the browser default context menu with our own context menu.Opera browser doesn’t support custom context menu

ContextMenu by Chris Domigan

It is one of the earliest plugin to show context menu. It is fully customizable and supports callback
functionality.

jContext

It is a very lightweight jQuery plugin to show context menus (0.6KB when minified). The menu is fully customizable using HTML and CSS.

DEPENDENCIESjQuery 1.2
SIZELess than 1KB (Compressed)
RESTRICTIONSNone
DEMOOpen | Open in new window
INFO & DOWNLOADOpen | Open in new window
SUPPORTED BROWSERSFirefox 1.5+, IE 6.0+

jQuery Context Menu Plugin By Cory S.N. LaViska

This is the most powerful plugin with many customization options and callback support.

Advantages

Fully Customizable via CSSSupports keyboard shortcutsAbility to disable menu/menu items on the fly

DEPENDENCIESjQuery 1.2.6 Or jQuery 1.2 with dimensions plugin
SIZELess than 7KB (Uncompressed)
RESTRICTIONSNone
DEMOOpen | Open in new window
INFO & DOWNLOADOpen
SUPPORTED BROWSERSFirefox 2 & 3, IE 6.0+, Safari, Chrome

jQuery Ajax File Upload

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.

Ajax file upload plugin allows users to easily upload multiple files without refreshing the page. In addition, you can use any element to show file selection window.

This plugin creates invisible file input on top of the button you provide, so when user clicks on your button the normal file selection window is shown. And after user selects a file, plugin submits form that contains file input to an iframe. So it isn’t true ajax, but brings same user experience.


Advantages

  • AJAX like behaviour using iframe technique. (AJAX does not support file handling)
  • Multiple file upload
  • Allowed file types can be specified
  • Callback functions for all events
DEPENDENCIESjQuery 1.2
SIZE4KB
RESTRICTIONSNone (Free to use on any site)

For demo and download, please check the links

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

jGrowl – To show unobtrusive messages

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.

jGrowl is a nice way to show unobtrusive messages or informations to user.

Advantages

  • The default style is good enough
  • The message can be shown for a pre defined time (For eg: 10 seconds and then it will close automatically)
  • Support for sticky messages – which do not close automatically
  • Customizable
DEPENDENCIESjQuery
SIZE5 KB
RESTRICTIONSNone (Free to use on any site)

For demo and download, please check the links

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

Three jQuery modal plugins to repace alert and confirm

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.

alert() and confirm() are two javascript functions that you should not use in your web 2.0 sites  . The main problem with these are the way those blocks the user from interacting with browser. They are modal in behaviour, that means the user should take an action before he can do anything with browser. He can’t even switch to another tab. Here, we suggest three jQuery plugins to ditch the notorious alert() function.

They are jQuery Modal Dialog, jqModal, jQuery SimpleModal

jQuery Modal Dialog


Unlike many modal scripts (which are coded to show any type of contents along with modal dialog support), this plugin is just made to show messages to the user and a complete replacement for javascript alert() and confirm.

By default it supports 4 types of messages – error, warning, success and prompt. The styles are highly customizable. One feature I liked in this is the built in support for auto close option. It is a very useful feature. For eg: To show a success message for 5 seconds and close the message automatically.

Advantages

  • Highly customizable
  • Supports error, warning, success and prompt messages
  • Auto Close option
DEPENDENCIESjQuery
SIZE6KB
RESTRICTIONSNone (Free to use on any site)

For demo and download, please check the links

Open Demo | Open demo in new window | Support page

jqModal

jqModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, akin to a “Swiss Army Knife”, and makes a great base as a general purpose windowing framework.

As the author claims, it is a good script to show messages to the user. It can be used to replace the alert() and confirm() javascript functions.

Advantages

  • Highly customizable
  • Can show Ajax/Iframe content
  • Can replace alert() and confirm()
DEPENDENCIESjQuery
SIZELess than 4KB
RESTRICTIONSNone (Free to use on any site)

For demo and download, please check the links

Open Demo | Open demo in new window | Download

SimpleModal

SimpleModal is a lightweight jQuery plugin that provides a simple interface to create a modal dialog.

The goal of SimpleModal is to provide developers with a cross-browser overlay and container that will be populated with data provided.

DEPENDENCIESjQuery
SIZE6KB
RESTRICTIONSNone (Free to use on any site)

For demo and download, please check the links

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