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"

Pretty jQuery carousels Kirousel - Joomla! 1.5 plugin

Kirousel is a Joomla! 1.5 plugin which displays pretty JQuery carousels in article contents.

Features list
Kirousel has many options :

•     Root to every kirousels' folders
•     Scrolling effects
•     Horizontal
•     Vertical
•     Fading
•     Boucing
•     Diaporama
•     Loop
•     Pagination
•     Number of images to show for each time
•     Scroll delay for the diaporama effect
•     Ability to display many kirousels in the same article

By default, your kirousel will load defined parameters in the plugin configuration, but you can also specify different parameters for each of your kirousels by writing them directly in the tag.

Read more "Pretty jQuery carousels Kirousel - Joomla! 1.5 plugin"

Apple Style Splash Screen with Jquery

The Beatles are on iTunes! Or, if you are like me and don’t care that much about it, you’ve probably noticed the awesome splash screen that Apple used to promote the event.

Risking to start a trend, in this tutorial we are going to create a simple jQuery plugin that will display fancy Apple-style splash screens for us.

But now is very easy to create. Because just copy and paste the code..!

Read more "Apple Style Splash Screen with Jquery"

Slick and Accessible Slideshow Using jQuery

you’ll learn how to create a usable and web accessible slideshow widget for your site using HTML, CSS, and JavaScript (jQuery). In the process, you’ll see the concept of Progressive Enhancement in action.

Read more "Slick and Accessible Slideshow Using jQuery"

Rotating Image Slideshow With jQuery

Today we are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. You can use it to spice up your web sites, product pages and other projects with some CSS3 magic.

Read more "Rotating Image Slideshow With jQuery"

jQuery Roundrr – Circular Image Galleries With jQuery

Hey guys. Quite often with image galleries powered by jQuery, we’re presented with a very similar layout – one which contains the images or items presented inside a rectangle. This is great for providing an experience users are used to, but there are a few interesting alternatives that you may like to hear about – how about displaying your images or items around a shape like a circle or an ellipse instead?. 

In today’s post I’ll be showing you how to do just that with a brand new plugin I’ve written called jQuery Roundrr.

I’ll also show you how you can leverage the power of math with JavaScript to generate coordinates for positioning your images in interesting ways without needing to use HTML5 or CSS3 – just pure javascript.

The benefit of this approach is that much of what I show you today will work cross-browser right out of the box. Before we get started, here are some demos of Roundrr in action. Remember you can also use the left and right keys on your keyboard to control the interface.

Read more "jQuery Roundrr – Circular Image Galleries 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"

Fresh Sliding Thumbnails Gallery with jQuery and PHP

We are going to create another full page image gallery with a nice thumbnail area that scrolls automatically when moving the mouse.

The idea is to allow the user to slightly zoom into the picture by clicking on it. The thumbnails bar slides down and the image resizes according to the screen size.

Read more "Fresh Sliding Thumbnails Gallery with jQuery and PHP"

Thumbnails Preview Slider with jQuery

In This tutorial we will show you how to create and use a thumbnails preview slider with jQuery. Since we got a lot of requests to show how to make the preview slider work separately from the full image view, we decided to make a tutorial on how to use the little thumbnails preview part only.

Check out the Sweet Thumbnails Preview Gallery where me make use of the thumbnails slider idea.
The images are by talented tibchris and you can find them on his Flickr photostream:
tibchris’ photostream

Read more "Thumbnails Preview Slider with jQuery"