CSSgallery.info

Javascript carousels are used to display some images or content, in a often narrow space, allowing the webdesigner to show much info in a limited space. They add some functionality to page, and in the same time some visual candy.

Some of scripts that can help us to achieve this are presented below:

 Carousel Component

The script use YUI and has a nice list of features like vertical/horizontal mode, ajax fetch for content,animation control and works with most of  modern browsers

iCarousel

The iCarouel script has as base mootools framework, and works on  ie,frefox,opera and safari. We tested the script in konqueror and works fine too. It is pretty configurable, but require to tune the declaration of class for this (maybe a little hard for noobs).

 Carousel Slideshow

The script supports vertical and horizontal scrolling, optional linking, title attributes, configurable visible sides, and more.

Simple 3D Carousel using Mootools

As the name says, is a simple 3d mimic carousel, based on mootools.The site explain how to implement the script.

jCarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

 Prototype Carousel w/ Scriptaculous (version 2)

This script  is a prototype based carousel that allows for n-item paging. It utilize the scriptaculous effects library for carousel paging/movement. Additionally, the items within the carousel are extracted from the HTML itself so that they can be indexed in search engines.

 ScrollShow

ScrollShow is a very customizable slideshow, that relies on jQuery.ScrollTo, to slide(scroll) the items.

Let me know for other scripts is same category.

Enhancing in a pleasant way, the way a site looks, javascript reflections add an easy mode to reflect your images on the site, without need of image manipulation program to be used on each one. A handy tool for very dynamic pages.Some of this script will be presented below.

3d image reflexion

Based on prototype and scriptaculous, this script is unobtrusive, makes preload and is crossbrowser. On author site there is a demo on black background too.

reflex.js 1.2

“reflex.js 1.2 allows you to add a Cover Flow™ effect (including reflection) to images on your webpages. *Cover Flow is a trademark of Apple Inc.
It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it’ll degrade and your visitors won’t notice a thing. ”

Reflection Factory

A dual effects , this mootools based script allows you to add shadows and reflections to images, with different parameters like amount,distance,opacity.

Reflection.js for mootools

This is an improved version of the reflection.js script rewritten for mootools. It allows to add instantaneous reflection effects to your images in modern browsers, in less than 3kb.

The original script is next

Reflection.js

“Features

Fun and easy to implement! Just add class=”reflect” to your images

Automatically blends into background colours or images

It’s easy to vary the reflection height and opacity

Can respond to user actions through Javascript

Degrades in older browsers; they won’t notice a thing!

It’s smaller in size than most images; under 5KB!”

script.aculo.us Reflector

as the name suggest, is based  on scriptaculous. It allows some params  - like amount,opacity

Javascript image reflection

Not much on this, on the site, you will have to digg the coe to see how is working. Anyway, it seems to support distance from main image, opacity and transparent gifs( no safari).

If you know other resources on this subject, please let me know.

When we need to enter data into an input form element , but need strict data ( like in select), but the amount of possible data is too big, we can make use of an ajax autosuggest, or autocomplete to guide the user. In this post I’ll try to present some solutions for this.

FaceBook Like - jQuery and autosuggest Search Engine

Features :
- Autosuggest and ajax support
- Support search plugins
- Support cache
- Cross Browser support ( IE > 5.5, FireFox, Safari, Opera )

TextboxList meets Autocompletion

This one use mootools-beta-1.2b1.js, and can be customized , like minimum number of chars that trigger autocompletion.Also it has a cache feature, so is very responsive.

jQuery Autocomplete Mod

As it names sais, requires jquery.

from the site

- Supports local data array (can now use w/out AJAX).
- Limit dropdown to XX number of results (good for limiting the results to users)
- Autofill pre-populates text box as you type
- New findValue() method can be used to programmatically determine if the value in the box is a valid option. (Useful for verifying the text entered is an existing value option.)
- Dropdown options now correctly re-position themselves on each display (which means they adjust for changing to the DOM)
- Dropdown box defaults to the width of the input field its attached to (you can manually specify a larger width as well)
- Better emulates Windows autocomplete boxes (for example: hitting delete and retyping the same box will now bring back the dropdown menu)

AJAX - Powered AutoComplete (for Prototype.js)

Prototype based, seems to support xml, multicolums and more…

Autocompleter

A mootools solution, unobtrusive and customisable, is able to load data from a json or xhtml source.

I am sure there are more resources of this type, so please if you know any, don’t hesitate to write me about. I will add in this list as soon as possible. Thank you.