Creating a Wobbling 3D Carousel

We’ll be creating a carousel with the help of the 3d Engine we built in a previous post. 

The idea is we’ll create a ring by plotting points in 3d space, then we’ll rotate it so it’s almost perpendicular to the viewer. 

Because it’s not 100% flat, it will look like it’s wobbling up and down, giving your carousel a little more flavor.

Read more "Creating a Wobbling 3D Carousel"

Cloud Carousel - A 3d Carousel in Javascript

There are some attractive Adobe Flash based solutions for this type of UI component, and while JavaScript versions exist (see this and this), the commercial Flash products tend to have better aesthetics and polish. To redress the balance in JavaScript's favour, I have created this jQuery carousel plugin.

There are some benefits to doing this kind of thing in JavaScript rather than Flash, not least of which is the ease of integration, small file size, SEO, and inherent degradability/accessibility. Not having another dev-tool in the workflow is another plus.

The carousel features realistic perspective. Many 3d carousels only apply perspective scaling to the size of the images, not their positions. This results in disproportionate gaps appearing between items as they shrink in the distance which looks odd.

Features

•     Works with most browsers (tested on IE6-IE9, Firefox (incl V4), Chrome, Opera, Safari).
•     Accurate 3d perspective.
•     Optional auto reflections - no need to modify your images or add server code.
•     Easy integration with basic valid HTML and a tiny bit of JavaScript.
•     Small 5Kb (minified) script..
•     Degrades gracefully with Javascript turned off.
•     Fully accessible with no CSS or text only browsers.
•     Works with other plugins, e.g. Slimbox, and preserves your links and mouse events.
•     Optional mouse wheel support as of version 1.0.2.
•     It's completely free.

Read more "Cloud Carousel - A 3d Carousel in Javascript"

Tiny Carousel with jquery

Tiny Carousel is a lightweight carousel for sliding html based content. It was built using the javascript jQuery library.

Tiny Carousel was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface.

Features

• Can slide vertical or horizontal
• Supports navigation by button or paging
• The point where the carousel starts can be set
• Animation time can be set in milliseconds or to 'instant'
• Number of block to move at a time can be set
• A interval can be set to slide automaticaly every given milliseconds
• Easy customizable
• Dual licensed under the MIT or GPL Version 2 licenses.
• Lightweight its only 100 lines of code. mimified the size is 2,29 kb

Read more "Tiny Carousel with jquery"

Carousel with wrap effect with jquery

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.

Read more "Carousel with wrap effect with jquery"

Flickr Photobar Gallery with Jquery using API

The aim was to build a bottom photobar that one can easily integrate into a website. It is hidden initially and slides up when the handle is clicked. First, the photo sets are shown and when one of them is chosen, all its images can be viewed as thumbnails.

When a thumbnail is clicked, a full image view appears as an overlay.

Read more "Flickr Photobar Gallery with Jquery using API"

Awkward Showcase – A jQuery Plugin (with Tip Tool)

Awkward Showcase is a plugin for the JavaScript Framework jQuery. We call it a Content Slider. But it can do more then just slide the content. For example you can add tooltips, enable thumbnails, activate dynamic height and lots more.

Since version 1.0 it’s integrated with our Viewline Plugin enabling new innovative ways for displaying content on your website.

Read more "Awkward Showcase – A jQuery Plugin (with Tip Tool)"