Zoomy.js is a Prototype class that allows you to easily create image gallery with simple magnification of images. This zooming feature is customizable as pop-up & overlaying boxes. Features:

* display clickable thumbnails and zoomed image when you click it.
* images are preloaded, there is no delay when you zoom.
* display caption and close button (optional)
* open new window from a link to the caption
* zoomed images may be dragged.

If Zoomy.js is actually what you’ve been looking for, find out more by visiting the source post and bookmark it for future refference :)

URL: http://famspam.com/facebox
Demo: http://famspam.com/

This Facebook-style lightbox is developed with jQuery-based which can display images, divs, or entire remote pages. This tricks and tips will require some files, they are:

* jQuery 1.2.1.
* Facebox v1.2
* Javascript
* CSS

In order to create a perfect Facebook-style Lightbox You’ll need a loading image, close label, four corner graphics and solid border images.
You can find them all inside the downloaded zipped file while learning more about this jQuery Facebook!

site: http://www.emblematiq.com/projects/niceforms/
demo: http://www.emblematiq.com/niceforms/v20/niceforms.html

Niceform is a javascript form that will replace common style of form elements with custom designed ones. It combines basic XHTML code with the DOM tree, to mock up all the input fields, hides them, and
positions their new graphical appearance in place. All this is done while preserving the date transfer and selection features of the regular form.

It has beautifully coded default theme and you always redevelop it to fit your own form style that you always wish to have with minimum effort. Niceforms is applied to all forms that have the class
“niceform”. You can have other classes in there as well but one of them has to be “niceform” in order for the script to work. The javascript object model to extend form elements by adding a suite of
custom attributes and functions to each of them.

Here comes the features and compatibilities:

* It works just like your regular web form.
* The form fields and the buttons created are fully scalable through regular HTML properties such as size, cols and rows. Buttons will automatically expand to accommodate the amount of text present. Keyboard-only navigation is also supported.
* The script is fully compatible and has been tested with most major browsers (IE7+, Firefox2+, Safari3+, Opera9+, Chrome0.3+, Mozilla1.5+, and Camino1.6+)., with the exception of IE6.
* Customizable as you can create your own themes. Niceforms replaces the form elements with images, so a slicing process will arrange these images up correctly and creating the CSS that holds them all together.
* More themes are on the way for updates and you are welcome to contribute as well.

You can learn how to implement and customize Niceforms by visiting the support section and visit the demo page to have a closer look if you think this one is useful for you ;)

URL: http://hv-designs.co.uk/2009/01/19/jquery-fade-infade-out/
demo: http://www.hv-designs.co.uk/tutorials/jquery/all.html

jQuery Fade In.Fade Out fades an element to 30% on the landing page and when you hover over it, it fades to 100%. The effect can be assigned to any element in a website, such as image, text, a link or even a div. As the whole HTML file is loaded, then the javascript will run.

The effect for the individual images will a class of “class=”latest_img”, that is defined in the .CSS file. While the text within my HTML document is in P tags within a div so if i apply the effect to the p tag within a certain div you get the effect above. You can also apply the effect to a whole div, which means everything in that div will fade even the div itself.

Give a try and attach this the fade in fade out effect in your designs, or bookmark this jQuery Fade In.Fade Out article for future need!

prettyPhoto is an alternative jQuery lightbox, which is developed by Stéphane Caron. It has better animation FX, fullscreen image feature, enhanced title and caption (support html code). This jQuery lightbox also display box that is designed to auto fit the size of the photo inside it. There are also navigation link, and counter options for multiple photos in a gallery.

This plugin works in the following browsers:

* Firefox 3.0 (Mac/PC/Linux)
* Firefox 2.0 (Mac/PC)
* Safari 3.1.1 (Mac)
* Internet Explorer 6.0 (PC)
* Internet Explorer 7.0 (PC)

To use is easy. Just include the jQuery library, prettyPhoto javascript and the prettyPhoto CSS in the head of the page(s) where you want to use prettyPhoto.

The demo of prettyPhoto includes: galleries, single image usage or flash content gallery. You can read the source page to learn the installment and customization details if you find this useful!

Usually, you will add drop shadow effect using a graphic software, well would you like to know that you can also make good use of this great jQuery plug-in to add soft drop shadows behind page elements? You’d better be :)

The shadows which are created with this jQuery will not bound to the original elements, so they won’t move or change size automatically if the original elements change. It is only intended for adding a few drop shadows to mostly stationary objects, like a page heading, a photo, or content containers.

If you want to apply this drop shadow jQuery, there are options for setting up:

* left : integer (default = 4)
* top : integer (default = 4) – The left and top parameters specify the distance and direction, in pixels, to offset the shadow.
* blur : integer (default = 2) -The blur parameter specifies the spread, or dispersion, of the shadow.
* opacity : decimal (default = 0.5) – The opacity parameter should be a decimal value, usually less than one.
* color : string (default = “black”) – Color is specified in the usual manner, with a color name or hex value.
* swap : boolean (default = false) – The swap parameter reverses the stacking order of the original and the shadow.

You will see a demo tool on the source page and learn more by downloading this Drop Shadow JQuery plugin.

Accessible News Slider is a JavaScript plugin that makes possible for you to create grid of news items and “slideBy” them in a compact row with smart navigation sets. Brian Reindel has designed this Javascript plugin with high consideration of better accessibility to users with all kinds of limitation. It accomodates the need of:
Read the rest

website>> http://webdev.stephband.info/parallax.html
demo>> http://webdev.stephband.info/parallax.html

jParallax is a jQuery script that makes layers of an element or a content, to move by different amounts, in a parallaxy way.

The selected element and all its children are set into absolute positioned layers that can be seen through the viewport. These layers will move in response to the mouse, and depending on their dimensions (and options for layer initialization). jParallax also provides methods for navigating to that content in response to user events.

URL:
site>> http://deepliquid.com/content/Jcrop.html
demo>> http://deepliquid.com/content/Jcrop_Examples.html

Jcrop is a jQuery image cropping plugin that works together with a powerful cross-platform DHTML cropping engine.

With API features enhancement, creating interactivity and animation is always possible. It attaches unobtrusively to any image and supports aspect ratio locking. Minimizing and max size of cropping area can be adjusted on the setting feature. Nudging selection with keyboard is also easy. If you need to style up this tool, CSS will do!

Jcrop is compatible to the most of browser platforms. Before installing, you can learn a few things about the format of the options object from the source page or visit the Jcrop live demo for a quick start.

jQuery Corners 0.3 is a simple jQuery plugin that will easily create beautiful rounded corners. Completely lightweight and supports fast anti-aliasing for older or any type of browsers. You won’t need any images or working down the line with obtrusive markup.

The jQuery Corners 0.3 is well tested on:
iPhone, Chrome, Firefox, Safari 2+, Opera 9.0+, Internet Explorer 6+ and probably more…

Here are some hints of features:

* Options are passed as a string.
* Anchor “a elements” can be turned into rounded buttons.
* Anchors and buttons customizable with CSS.
* jQuery Corners contains its own algorithm to create anti-aliased corners.
* If you plan on using a background image or hover state, you can set the transparent style options.
* Width, height, margin and padding attributes supported.
* No-native floating right test.

Visit the source page to get jQuery and jQuery.corners scripts loaded to website, as rounding corners using jQuery Corners 0.3 is easy ;)

Here we have another JS gallery script called Pirobox with the difference hat Diego Valobra who wrote that script is not a programmer but a webdesigner with a big immagination and a bit passion for programming.
In fact, if you are a javascript developer, take a look at his script and you can see that he used a few tricks to get his goal to create a good looking jQuery gallery.

site >> http://digitalbush.com/projects/masked-input-plugin/
demo >> http://digitalbush.com/projects/masked-input-plugin/#demo

Masked Input Plugin is created for the jQuery javascript library. This plugin allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc).

The first thing you do is to set the predefine character of placeholder that represent alpha character (A-Z,a-z), numeric character (0-9) or alphanumeric character (A-Z,a-z,0-9). When you are set, Include the masked input javascript file. Next, call the mask function for those items you wish to have masked. Some optional hints are available at the source page for extend uses. Useful enough for every user who lands on your website isn’t it? It runs perfectly on major browsers (Internet Explorer 6/7, Firefox 1.5/2, Safari, and Opera). So, have a moment to read the rest of the instructional installment of this Masked Input Plugin, or bookmark it now for future need!

site: click here
demo: click here

CSS makes every design possible. Recently we found something interesting posted at SohTanaka.com. Soh, the author of this web blog came up with a brilliant idea of creating a clock that combines CSS and Javascript.

The clock displays user’s local time, by Javascript, and the CSS div tags handle the appropriate hour and minute classes with absolute positioning of clock arms. This clock face is broken down into 3 layers of hour/min/sec arms in transparent PNG files.

You can figure out of how this CSS Clock works beautifully by visiting the source site and also the demo page. Just in case you’ll need this for future project, bookmarking this post is much appreciated! ;)

site:
http://cappuccino.org/
demo:
http://cappuccino.org/learn/demos/FlickrPhotoDemo/
http://cappuccino.org/learn/demos/puzzle/

Building a complex cross browser application could be challanging for some people, nevertheless there is an open source application framework to develop such project. Here it comes Cappuccino, which implements most of the familiar APIs from GNUstep and Apple’s Cocoa frameworks. It won’t trouble you with the complexities of traditional web technologies like HTML, CSS, or even the DOM from scratch. Objective-J, and one set of APIs, are the set of technologies behind Cappuccino that make your web application possibly done in easy way.

If you are a web developer or just interested with this stuff, you may give a try over a beta project built by Cappuccino and see the demo to learn more ;)

Select Box Factory 2.0 is a tool that simply runs on jQuery 1.2.6 framework, and was ported over from version 1.1 for mooTools. You’ll get a select box that is highly customizable in many range of options. Select Box Factory can show counts, selections, images, numbers, urls, states in the form of a heatmap with filter buttons. It is equipped with eraser function, a keystroke find function, and spreadsheet style selection capability. Not only that…. there are still more custom features ahead.
Read the rest

If you are looking for another alternative to create tooltips for your website, CoolTips may help you. It is created by Andrew Okonetchnikov. Currently released in version 1.0, CoolTips is an amazing lightweight unobtrusive JavaScript web-browser tooltips. It is used to replace conventional web-browser tooltips and uses replacement technique.

Advantage Features:

* Lightweight.
* Uses industry-standard libraries — prototype and script.aculo.us.
* Easy customizable look & feel to set different CoolTips instances, without using bunch of parameters or CSS.
* Browser and platform independent. Tested on Windows and Mac. Firefox, Opera, Safari, Internet Explorer 6 & 7.
* Supports transitional effects. Fade in & out appearing.

Use any CSS-query for CoolTips initialization and you can learn more about detailed CoolTips Options by visiting the source page.

CrossSlide is an alternative way to present slide show that animates pictures using jQuery plugin instead of conventional Flash. Fully tested on major browsers, it relies on the browser for positioning, scaling and cropping images, through CSS and the DOM. Accordingly it is depended mainly on how the browser and the underlying graphics platform optimize these operations.

CrossSlide has several picture effect features, they are:

Read the rest

site: http://ragamo.medioclick.com/jquery/corners/
tutorial: http://developer.mozilla.org/en/Canvas_tutorial

This simple jQuery Plug-in is smart solution for you to make rounded corners. Fully tested in Internet Explorer 7 and Firefox 3, jQuery Canvas Rounded Corners v 1.1 works on your DOM objects using “canvas” element. If you are new to what “canvas” element is, you can read Canvas tutorial at Mozilla Developer Center.

You’ll need to attach three component of Javascript files for installment. A variant of excanvas.js (newExcanvas.js) must be included to create canvas elements in IE. Here they are:
script type=”text/javascript” src=”jquery-lastest.js
script type=”text/javascript” src=”jquery.corners.js
script type=”text/javascript” src=”newExcanvas.js

To start creating round corner just add:
$(selector).corners([options]);

List of options :
radio: (int) radius size of corners
inColor: (color) inside color of element
outColor: (color) outside color of corners
borderSize: (int) border width
borderColor: (color) color of borders

You can learn more about this simple script from some examples given and download the jQuery Canvas Rounded Corners files at the source page. Should be easy as 1 2 3 ;)

ShadowBox is a JavaScript media viewer application that supports all of the web’s most popular media publishing formats including images, QuickTime, Windows Media Player, Flash, Flash video, HTML, and even external web pages. In fact, you can customize the skin of Shadow Box with CSS.

Why ShadowBox?

Read the rest

site>> http://www.flowplayer.org/tools/scrollable.html
tutorial demo>> http://www.flowplayer.org/tutorials/scrollable-view.html

Tero Piirainen has created a handy Flowplayer tool that scrolls playlist of several videos using jQuery. The tool is pretty light, which is wrapped in 3.9 Kb javascript file. The features are:

Read the rest