Posts

Zoomy.js – Simple Image Magnification with Customizable Options

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 – a Lightweight Unobtrusive JavaScript Tooltips

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 – a Prototype Extension

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 – convert HTML lists into categorized, paginated lists

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.

smart_lists.jpg

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 Javascript Library

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.

glassbox_javascript_library.jpg

Accordion v2.0

Accordion v2.0 – a lightweight accordion that is built with scriptaculous and works properly in every browser

Script handle nested vertical and horizontal accordions. New in v2.0:

  • Open/Close functionality added
  • Nested Vertical Accordions
  • Accordions will dynamically resize on content added REAL TIME!
  • bug fixes!

Accordion v 2.0