JQuery Roundabout is an impressive plugin that converts HTML elements into highly-customizable & interactive turntable-like (and more) interfaces.

By default, it works with ordered/un-ordered lists but with a little configuration it can convert any nested HTML structure.

The plugin has a bunch of options for maximum customization like:

• optional starting element
• speed of the animations
• opacity & scale of objects
• ability to trigger animations from any element
• disabling clicks
• & more..

With the help of a complimentary plugin, named Roundabout Shapes, it is possible create too many different types of interfaces.

jQuery Roundabout can have have various uses from displaying images to creating form interfaces, animations, etc.

Meerkat is a jQuery plugin for creating a fixed content on the top or bottom of the page which keeps its position when the page is scrolled.

The content displayed can slide or fade in & can be configured with the options provided.

There is a close option, which closes Meerkat until the page has been reloaded, or a dontShow option, which closes it until the browser session has ended, or for a set amount of days, totally configurable.

It is also possible to define the background color, height & animation speed of the Meerkat easily.

The plugin is very useful for displaying sticky banners & notifications or creating a splash page (an example exists in the plugin page).

Clearbox 3 is a Lightbox-like modal box script to display images, image galleries & various other contents including Flash, Quicktime, Windows Media formats, HTML, inner content, etc.

It can show multi-line text information for any content displayed. And, as a unique feature, images displayed can be rotated with a click.

Clearbox supports slideshow functionality and every aspect of it can be customized from the settings of the script.

It is friendly with Ajax & can display content via Ajax calls.

Also, its interface can be presented in any language by supplying a language file.

P.S. Clearbox is free for only personal use.

bxSlider is a jQuery plugin for creating simple content sliders & tickers.

The usage of the plugin is straightforward & can be implemented in minutes. Various settings (like speed, auto: true/false, ticker_direction) make customizing the display easier.

It has 3 modes:

• slide (for browsing images with a slide effect)
• fade (for browsing images with a fade effect)
• ticker (for continious display of content)

Considering bxSlider includes the content slider & ticker functions in a lightweight package (8kb), it is a very ideal script specially for news portals that would generally use the both features.

TopUp is an unobtrusive Lightbox clone that is highly customizable & offering advanced features.

It is built with jQuery/jQuery UI & can display images, videos, webpages or any HTML content.

TopUp supports grouping of objects to be displayed & they can be browsed with previous-next buttons (ideal for image galleries).

Images used inside (backgrounds, buttons, etc) are displayed with CSS sprites, so there will be fewer requests while loading.

It can work with Ajax requests & the effects while displaying the modal window or transition of contents can be customized.

TinyTable, a lightweight JavaScript table sorter that was featured before, has its 3rd version released.

The new version has fresh features like: search, column averages and totals, record numbering, a view all & a reset function.

TinyTable also has features like:

• alternate row highlighting
• header class toggling
• auto data type recognition
• selective column sorting

Almost every feature is optional & can be configured while calling the TinyTable function.

Since using tables is still the best option to display tabular data, it is a must-bookmark.

TableGear is a MooTools plugin for adding extra functionality to the standard tables.

It is designed to work in a PHP/MySQL environment & can be implemented very quickly.

TableGear makes the following possible:

• sorting & pagination of data
• onClick editing of columns (ajaxed)
• adding/deleting rows (ajaxed)
• styling columns
• & more

The plugin is keyboard-friendly for a faster navigation & it is very well-documented with lots of examples.

Notimoo is a lightweight MooTools plugin (4kb) for displaying growl-like notifications.

It comes with several options for a better customization of "how the plugin functions".

Some of the options are:

• if it should disappear automatically or not
• time it will be displayed for
• position of the notification
• display a title or not
• opactiy of the modal window.

It is also possible to update the look & feel of the notifications via CSS.

Pluralink is a tiny JavaScript library for displaying multiple links inside one link.

Rather than mentioning all your links one-by-one, a major link will be displaying all the options when clicked.

Usage is pretty simple:

<a href="http://firstlink.com/||http://secondlink.org/" title="First link description||Second link description">Some pluralink</a>

is all to do after inserting the JS file into our webpages.

The cons are:

• not unobtrusive (if the JS is off, the links won't be working)
• no RSS support (Pluralink team says "they are working on it")

The library also comes as a Wordpress plugin for easier integration.

It is very usual that a website presenting a list of images which is "longer in size than the viewport of our monitors" & we simply need to scroll to view the rest. In such cases, in order to make the websites load much faster, we can use lazy loading.

What is lazy loading?

It is a design pattern that means; not-loading a content until it is needed. Basically, it is the opposite of "preloading".

The technique is mostly used in websites that have a long list of images & rather than loading all the images at once, we see them load when we try to view them by scrolling down.

How the logic works?

Using JavaScript, it is possible to detect the following:

• the coordinates of the part of the page (x-y) we’re viewing
• the coordinates of a specific element
• the width-height of the viewport

Having these inputs, we can easily understand if a given element is in the viewport or not. And, after it becomes "in", we can make a JavaScript call to load the content.

Here are ready-to-use resources for implementing lazy loading:

Read the rest of this entry »