imgPreview is a jQuery plugin that enables users to preview images before clicking on them.

If the image is clicked later, it will be shown instantly as it will already be preloaded at the preview.

The image preview is shown in a chic tooltip-like box.

The plugin is unobtrusive, does not use non-semantic classes. It detects the anchors that link to images and apply the preview effect only to them.

There are various configuration options that comes with imgPreview like defining the css pf the image to be previewed, its distance from the cursor, whether the images will be preloaded or not, callback functions & more.

Marcofolio.net is presenting a nice tutorial (with source files) for creating the famous iPhone unlock interface with XHTML-CSS & the slide effect via jQuery.

Although there are missing features from the standard effect like "the slider not going back", it is still inspiring & can be used to create a form control (like captcha) or present a content in an iPhone like interface.

(See also: iPhone Application And Website Development: All Tools And Tutorials You Need)

For the slider, jQuery UI’s slider component is used.

For a demo of this interface, click here.

OpenZoom is an open source framework for creating zoomable user interfaces.

The framework is similar to Silverlight’s Deep Zoom control (see WRD post), but for Flash.

The power behind OpenZoom is Flex MultiScaleImage component, which is built on top of the OpenZoom framework.

The name is same wih the Silverlight Deep Zoom’s built-in control & the usage is similar too.

The component has built-in support for keyboard / mouse activities & supports Deep Zoom, Zoomify & OpenZoom images.

For now, OpenZoom can sound to specific, but considering its abilities & usage areas, we’ll probably be hearing more about it soon.

P.S. The framework is so fresh & still in development but it can be downloaded (& it is documented).

Ajaxify is a jQuery plugin that converts all links in a web page into Ajax load-submit requests.

So, with a single line, you can turn a static website into an Ajaxed one.

It has support for:

• History & bookmarking
• Partial load from the output
• Four events
• Forms
• Animations

In the demos page of Ajaxify, there are lots of examples presented to get you going with it.

Eyesis Data Grid Control is a PHP class for creating a datagrid from a MySQL database almost instantly.

With 6 lines of code, you can connect to the database, mention the table & define the query, rest is automated.

It has nice features like:

• Filtering and searching
• Changing column headers
• Can displaying images
• Ajax supported
• Automatic row paging
• Row selection
• Look & feel can be customized via CSS
• Ability to add controls
• Checkbox support
• Specify column format types (such as percent, dollars, etc)

This Ajaxed PHP grid works in all major browsers & requires PHP5 to run.

Seadragon is a technology, by Microsoft, for deeply zooming images of any size. It provides almost perfect transitions independent from the sizes of the images.

Seadragon Ajax is an interface for using/embedding this technology to any website.

Seadragon can be used in 2 ways:

• By uploading images to Photozoom & use Embed Builder
• Compose a deep zoom image with Deep Zoom Composer & upload the images to your website

Developers can customize viewers & controls with the Seadragon Ajax Library. It is also available at the Silverlight platform.

jQuery.popeye is a plugin which transforms an unordered list of images into a simple image gallery which enlarges the image clicked in Lightbox style.

The images are displayed in a box with prev-next controls & an info about the images can be mentioned.

The compact box has fixed, automatically calculated dimensions. The width and height are calculated so that all thumbnail images are cropped to the smallest width and height in the set and centered resulting image area.

The plugin can be easily customized with a list of settings provided.

Click here for the demo.

kProto is a collection of 3 handy Prototype based classes & extensions. Here they are:

Marquee – examples

It is a Prototype extension (& requires Script.aculo.us) that enables you to display a series of messages with ease.

Using the extension, it is possible to create message sliders, image galleries (or sliders similar to the portal websites) & more.

With a list of options, the extension is very flexible.

It supports:

• start, stop, next, previous actions
• delay
• animation when a message appears & another animation when it disappears
• before-after options to fire any function between events
• & several transition effects.

Growler – examples

 It is a class for displaying unobtrusive messages like OS X Growl.

Growler can be styled with CSS & very suitable for displaying activity-info messages.

It has several options:

• In & out speed of the message
• life of it (after howmany seconds it willl disappear)
• functins to be fired before any event 6 more.

Package – examples

This class allows developers to dynamically create namespaces. These namespaces can be used to better organize your code. They also help to reduce the amount of code that pollutes the global namespace.

Package also allows any javascript and css file to be included dynamically without being namespaced whether local or cross domain.

prettyGallery is a jQuery plugin for creating sliding image galleries on the fly.

Besides images, any content can be presented within the slider.

Images in the gallery are defined in an ordered list. Items per page, speed of the navigation & labels used can be configured.

The gallery uses prettyPhoto, a jQuery Lightbox clone,  for displaying the images in large-size.

This lightbox clone is very good-looking & can display:

• images
• present the images as an image gallery
• Flash

It works in all major browsers & animation speed, opacity and more settings can be updated.

There are many websites which are totally static. They can have an Ajax twist with a little touch.

com.bydust.ajax is a JavaScript class which automatically converts a static website into an Ajaxed one.

In order to make it work, The website content is marked like:

<!-- begin content -->
*your primary content*
<!-- end content -->

to make the script know which is the content area to be loaded. A detailed documentation can be found here.

When a user without JavaScript is browsing, com.bydust.ajax degrades gracefully & the site will be working normally.

P.S. Thanks to Nick for the suggestion.