Visual-Blast Magazine

ProtoFish – is an advanced Multilevel Dropdown Menu / Navigation script based on Prototype. You can easily add a delay to your menu (on mouseout) and choose your own hover class.

View ProtoFish Demo

ProtoFish is:

• lightweight script – only 5.2kB.
• unobtrusive – fallback to a standard CSS hover menu.
• cross-browser – IE6+, Safari 3+, Opera 9+, Chrome, Firefox 2+.
• fully customizable.
• accessible for keyboard navigating users (ARIA support can be turned on).
• Supprot multiple instances per page with unlimited sublevels.
• and is free (MIT License).

Panoramic Photoviewer in Javascript – an easy tutorial on how to create a custom panoramic photo viewer with the smooth image moving effect, or horizontal menu moving effect, only by moving the cursor. Panoramic Photoviewer uses the Prototype Javascript library.

View Examples

Zoomy.js – a Prototype class that allows you to easily create Image Gallery. The script make simple magnification of images with customizable options, as popup and overlaying boxes.

Images are preloaded, there is no delay when you zoom. You can display caption and close button (optional) and open new window from a link to the caption, zoomed images may be dragged.

Zoomy.js package contains a patched version of Prototype 1.6 library (to correct bugs on Opera 9.5) + Scriptaculous (effect, dragdrop).

All you need is to add the required HTML markup and customize CSS stylesheet. The miniature is made from the original image used as background and then initialize Zoomy.

CoolTips is used to replace conventional web-browser tooltips. The tooltips get the contents of the title attribute, so it’s fully unobtrusive. CoolTips is an OO class based on Prototype JS and script.aculo.us frameworks.

CoolTips Options:

• backgroundColor: Default is ‘#999′.
• borderColor: Default is ‘#666′.
• textColor: Default value is from CSS.
• textShadowColor: Text shadow color (works only in Safari yet). Default value is from CSS.
• maxWidth: Maximum allowed tooltip width in pixels. Default is 250.
• delay: Delay before tooltips appearing in milliseconds. Default is 250.
• mouseFollow: Tooltip will follow the mouse cursor. Default is true
• opacity: Target opacity of tooltips. Default is .75
• appearDuration: Appear fade in effect duration in seconds. Default is .25.
• hideDuration: Hide fade out effect duration in seconds. Default is .25.

Showcase.js needs the Prototype JavaScript framework (version 1.6) and the effects.js component of Script.aculo.us (version 1.8) in order to function.

Besides Horizontal, there are 2 more layouts: Vertical and Diagonal.

You can set up ratio – this is the ratio between the center slide and the ones at the ends, size – the total number of slides visible at one time, duration – duration of a full movement, initialDelay – this controls the amount of time that passes from the moment the Showcase is initialized to the moment the slides spread out, creating a nice start-up effect, and of course direction – Horizontal, Vertical or Diagonal.

Smart Lists is a Prototype/Scriptaculous extension that converts flat HTML lists of information into categorized, paginated lists.

Smart Lists extension does not require a database or server-side script and downgrades gracefully if JS is not enabled.

You have a choice for the item hide/show effect (Blind, Fade/Appear, Grow/Shrink, none), choice for changing page effect (Blind, Fade/Appear, Grow/Shrink, none), Control over speed at which effects occur, number of items per page and much more.

Browser friendly and supports Firefox 2, IE6+, Safari 2+ and Opera 9+.

GlassBox is a Javascript library which use Prototype and Script.aculo.us for some effects. With GlassBox you can build impressive transparent borders, colorful layouts and “Flash-like” effects.

GlassBox is licensed under the terms of the MIT License. This means: you can use it, free of charge, for anything you like.

Lightview is a Prototype/Scriptaculous image viewer with adjustable rounded corners, smart image resizing, build in slideshow and works on all modern browsers.

Nick Stakenburg has released Lightview v2. With Lightview v2.0 you can also overlay video (Quicktime), Ajax, Flash .swf, iframe and inline content.

Download and include Prototype 1.6.0.2 and Scriptaculous 1.8.1 in your header. If the filesize is to big for you, with Protopacked you can have the required files, Prototype and effects.js, starting at 28kb.

Control.Tabs attaches creates a tabbed interface from an unordered list of links/anchors that point to any elements on your page that have an id attribute.

The tabs can also be triggered via hovering, and need not even look like tabs. You can use images instead of divs, and the “hover” option.

Control.Tabs project page – Download Control.Tabs 2.1.1

Prototype cheat sheet – a full reference to a bleeding edge 1.6.0.2.

Download Prototype 1.6.0.2 cheat sheet