Carousel with wrap effect

This carousel actually wraps slides as they're bumped off the edges. That is, if a slide is bumped off the right edge, it reappears in equal measure from the left edge. The 'on' slide is always centered, widened and given full opacity. The other slides huddle around it, narrower and semi-opaque. An auto-rotator turns on each slide in turn, or you can force a slide on by clicking it (interrupting the auto-rotate). Clicking the 'on' slide takes you to its corresponding URL, specified in the config file.

View DemoDownload

Cursor following menu

The idea behind the script was to create a floating navigation that follows the moving cursor throughout the page. The goal was to make the menu itself as minimal as possible with “discreet” float animation to avoid obtrusiveness and help usability. The end result features simple markup, two levels navigation and styling via css. An extra feature included in the plugin is the function that animates the page to anchor points which you can test on the single-page demo.

View DemoDownload

Advance Supersized Slideshow jQuery Plugin

So, what exactly does Supersized do?

• Resizes images to fill browser while maintaining image dimension ratio
• Cycles Images/backgrounds via slideshow with transitions and preloading
• Navigation controls allow for pause/play and forward/back 

View DemoDownload

AnythingSlider jQuery Plugin

AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. In other words, to create a really "full featured" slider that could be widely useful. This is the first time (on CSS-Tricks) that one of these sliders is an actual plugin as well, which should make implementing it and customizing it much easier.

View DemoDownload

Creating a Keyboard with CSS and jQuery

This keyboard requires a lot of HTML setup and playing around with CSS. Each of the keys will be represented by a list item in an unordered list. Each of the list items will have a class attached to them, used in both the CSS and jQuery. Most of the classes are just “letter”, “lastitem”, or something similar. This will make finding out which list item is which easy.

View DemoDownload

ColorBox

A light-weight, customizable lightbox plugin for jQuery 1.3 and 1.4

Why you should be using ColorBox

• Supports photos, grouping, slideshow, ajax, inline, and iframed content.
• Lightweight: less than 9KB of JavaScript.
• Appearance is controlled through CSS so users can restyle the box.
• Behavior settings can be over-written without altering the ColorBox javascript file.
• Can be extended with callbacks & event-hooks without altering the source files.
• Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
• Preloads background images and can preload upcoming images in a photo group.
• Written in jQuery plugin format and can be chained with other jQuery commands.
• Generates W3C valid XHTML and adds no JS global variables & passes JSLint.
• Released under the MIT License.

Tested In: Firefox 3+, Safari 3+, Opera 9+, Chrome, Internet Explorer 6, 7, 8.

12345Download

AD Gallery, gallery plugin for jQuery

A highly customizable gallery/showcase plugin for jQuery.

Features

• Choose effect, should the image slide in, or fade in?
• Show fifth image by adding #ad-image4 to the url, this takes precedence over over settings.start_at_index
• jQuery call returns gallery instances, which enables you to change settings on the fly like the "Change to fade effect" link above
• Keyboard arrows to move back and forth
• Click on the edge of the big image to go to the next/previous
• Images are preloaded, and if the aren't finished loading when they are supposed to be displayed, a loading image will appear
• Slideshow count down only begins when the image has loaded and is visible
• Image title, can either be set in the title attribute, or in elm.data('ad-title', 'My title here'). $.data takes precedence over the title attribute
• Image descriptions, can either be set in the longdesc attribute, or in elm.data('ad-desc', 'My description here'). $.data takes precedence over the longdesc attribute
• Callbacks on different events that has access to the internal object, which means that you can access all internal methods, etc
• Takes the dimensions of the image container div and scales down images that are larger than it
• Image is positioned in the middle if it's smaller than the container div
• Images that are larger than the container are scaled down to fit inside the container

Browser compatibility

The script has currently been tested in Firefox 3/Win, Firefox 3.5/Mac, IE6+7+8/Win, Chrome 2/Win, Safari 3/Win, Safari 4/Mac, Opera 9/Win, Opera 9/Mac. If you have seen it working correctly in some other browser, or on some other platform, please let me know.

View DemoDownload