logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture


dailyclick
All times in EST

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

jQuery jCarousel Script


jQuery has made adding images to websites an easy task. There are many jQuery scripts released under the MIT and/or GPL licenses. Most of these are plug-and-play (plug in) scripts that don't require any programming knowledge to use on your website or install on your client's site. You might want to consider adding jQuery scripts to your design services.

One such jQuery script by Jan Sorgalla is jCarousel. This plug in can have many applications for both graphics and text. The main function of the script is to scroll content horizontally or vertically. The content can be static or loaded dynamically via Ajax, JavaScript, PHP or Flickr. Of course, this second option requires familiarity with these languages. jCarousel also works with Thickbox 3 so that a large sized image opens into Thickbox when the thumbnail image is clicked in the carousel.

Most of the code for the script is referenced in the Head section of the webpage. You will need the jQuery library and the jCarousel source code and stylesheet files. What is nice about this plug in is that it can be "skinned" by CSS to have many looks. The content to be scrolled by the script is placed in the body of the webpage in a basic UL list.

You have several options for configuring the script including adding custom animation and easing. It can function with auto-scrolling or navigation buttons. Another nice feature is that the width of the carousel resizes automatically to fit the browser window. It can be configured to show more or less images depending on the browser size or configured to have a set number of images with flexible spacing between the images as needed. You can have more than one carousel on a page and give each of them a different skin.

The integration with the Flickr photo stream and Flickr API is a nice feature not seen in most scripts. It has been tested to work in several browsers including the notorious Internet Explorer 6.

You might be asking yourself why you would use this instead of a simple gif animation that you can create in Photoshop. The main reason is the ease of updating the carousel once it is installed. It's easier to switch content in the UL list than to create a new gif each time you need to feature a different set of images.

http://sorgalla.com/projects/jcarousel/

Join us in the Digital Art and Design forum.



Add jQuery+jCarousel+Script to Twitter Add jQuery+jCarousel+Script to Facebook Add jQuery+jCarousel+Script to MySpace Add jQuery+jCarousel+Script to Del.icio.us Digg jQuery+jCarousel+Script Add jQuery+jCarousel+Script to Yahoo My Web Add jQuery+jCarousel+Script to Google Bookmarks Add jQuery+jCarousel+Script to Stumbleupon Add jQuery+jCarousel+Script to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Digital Art and Design Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

g


g features
Review - 21-Day Drawing Challenge

How to Print and Cut Clip Art in Silhouette Cameo

Paper Bead SVG Cut Files

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor