Friday, October 29, 2010

ImageCarousel Mootools Plugin

An image carousel thats really easy to implement.

Demo

ImageCarousel was designed for those that might get a little intimidated with the Javascript side of web sites.

How to Use

  1. Copy your carousel images into their own folder inside your project.
  2. Copy ImageCarousel.php into the folder from step one.
  3. Download and unzip the ImageCarousel files into your project folder. They should unzip into a folder called 'ImageCarousel'.
  4. Copy the following code into the head tag of your website.
    <script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js" language="JavaScript" type="text/javascript" ></script>
    <link href="ImageCarousel/ImageCarousel.css" rel="stylesheet" type="text/css">
    <script src="ImageCarousel/ImageCarousel.js" language="JavaScript" type="text/javascript"></script>
  5. Copy the following code into your webpage. This will act as the carousel element.
    <div class="ImageCarousel auto" rel="Images/Carousel/" styles="width: 500px; height: 375px;"></div>
    You need to change/check:
    • The 'rel' attribute should point to the folder where you have stored your images. The url should end with '/'.
    • Your images should all have the same dimensions; Check the Carousel 'width' and 'height' match your image dimensions.

Get It

No comments: