Cut & Paste Simple Carousel
|
Description: Simple Carousel lets you display a long series of images and captions as a horizontal strip that can be dragged left or right to reveal the obscured ones. It's inspired by the carousel that Google uses on its search results when you search for say "action movies" to showcase movie covers and titles. The contents of the carousel are loaded from an external file on the server via Ajax, and can be reloaded with a different file at any time.
Example (images used are copyright their respective sources, and used only for illustration):
Directions:
Step 1: Add the following code to the <HEAD> section of your page:
Download the following external files and upload to same directory as where your webpage resides:
Step 2: Add the below container markup for a simple carousel to the <BODY> where you want it to appear on the page:
The markup of Step 2 acts as the container for the carousel contents, which is defined inside an external file, carouselcontent.htm.
And that's it for installation, though read on for more details on setting up/ customizing the script.
Setup Information
As mentioned, there are two parts to the markup of a simple carousel, firstly, the outer container that you add to your page:
<div class="carousel" id="mycarousel"> <div class="belt"> // actual carousel contents fetched via ajax and inserted here </div> </div>
Give the main DIV element an unique but arbitrary ID value,
which is used to identify it inside the initialization code of Step 1. The CSS
class names should be retained. Inside the inner DIV "belt" is
where the external contents of the carousel will be inserted into once it's
fetched.
The 2nd part of the markup is that for the carousel content
itself, which should be defined inside an external file, by default
carouselcontent.htm. The structure of this
markup should be a series of DIV elements with CSS class "content":
<div class="content"> <a href="http://www.imdb.com/title/tt1877832/"><img src="xmen.jpg" /></a> XMen </div> <div class="content"> <a href="http://www.imdb.com/title/tt0103064/"><img src="terminator2.jpg" /></a> Terminator 2 </div> "
The initialization code
To transform the above markup into a carousel, we need to call
new simplecarousel() in the HEAD section of your page to initialize
the carousel. The syntax is:
<script>
jQuery(function($){ // on DOM load
mycarousel = new simplecarousel({
id: 'mycarousel',
url: 'carouselcontent.htm'
})
})
</script>
Where mycarousel in red should be an arbitrary but
unique name for each instance of Simple Carousel on the page. Inside simplecarousel()
is a list of settings for the carousel, with the two listed above- the "id"
and "url" settings being mandatory. Here is a description of all of the
available settings:
| setting | Description |
|---|---|
| id | The ID of the main carousel container markup. |
| url | The URL of the external content file on your server that contains the carousel contents. |
| dragleeway defaults to 40 |
The number of pixels users can drag when at the start/end of carousel before it bounces back. |
| bounceduration defaults to 0.5 |
The duration in seconds for the carousel to bounce back. |
Separate each setting with a comma, except the very last one:
<script>
jQuery(function($){ // on DOM load
mycarousel = new simplecarousel({
id: 'mycarousel',
url: 'carouselcontent.htm',
dragleeway: 10 // <-- no comma after last setting
})
})
</script>
Changing the dimensions of the carousel
To change the dimensions of the carousel, open up simplecarousel.css
and modify the width and height properties inside the ".carousel"
class. Refer to the comments to see other aspects of the carousel you may wish
to edit, such as the content DIV and images sizes.
Reloading the contents of a carousel
Once you've initialized a carousel, you can modify its contents anytime with a different file. Just call:
carouselvar.loadfile('newurl')
With new simplecarousel() to when calling it in the code of
Step 1. For example, the following link when clicked on loads the content file
"carouselcontent2.htm" into the demo carousel above:
<a href="#" onClick="mycarousel.loadfile('carouselcontent2.htm'); return false">Load carouselcontent2.htm</a>