Carousel

As featured on:

Sample

Instructions

NOTE: This module uses the Rounded Corners Container. If you have previously applied this module to your website you may skip Step 1.

IMPORTANT: Please use the exact file naming and folder architecture indicated below. If you wish to move or rename files please do so only after you have tested your code.

Open  block_with_rounded_corners.css.txt. Copy its contents and paste into /css/ca_department.css. Save this image: block_with_image_corners.gif (right click and select “Save As”) into the /images/ca_department/ folder.

Open carousel.css.txt. Copy its contents and paste into /css/ca_department.css.

Open carousel.js.txt. Copy its contents and paste into /javascript/department.js.

Open carousel.html.txt. Copy its contents and paste into your HTML file.

Unzip images.zip. Place contents in “images” folder at the same level as your HTML file.

FYI: The thumbnails in this working sample are height=”69″ width=”93″. You may use different sizes. See below for changing the height of the carousel. Replace graphics, links and alt tags with your own.

Having Problems?

My images are broken –Make sure the images from the images.zip file are located in an “images” folder at the same level as the web page that contains the carousel.

The arrows on the sides are not showing – Make sure the images from the images.zip file are located in an “images” folder at the same level as the web page that contains the carousel. Also, make sure you have copied the contents of carousel.js.txt into the /javascript/department.js file. And, confirm that this JS file is being called from the head of your web page.

The background is blank (no rounded corners container) – Make sure that you have copied the contents of block_with_rounded_corners.css.txt into the /css/ca_department.css file. And, confirm that this file is being called from the head of your HTML document.

<style type=”text/css”>

<!–@import url(“/css/ca_department.css”);

–>

</style>

Also, confirm that block_with_image_corners.gif exists in your /images/ca_department/ folder.

I moved the images and now they are not showing – If you move the thumbnails (01.jpg -through- 11.jpg) and spacer.gif you must update the HTML code.

Update the src attribute for the thumbnails. Look for code similar to this:

<img src=”images/01.jpg” alt=”Alt Tag Sample 01″ title=”Alt Tag Sample 01″ height=”69″ width=”93″ />

There are two spacer.gif references, update the src attribute.

<img src=”images/spacer.gif” alt=”Scroll Left” />

<img src=”images/spacer.gif” alt=”Scroll Right” />

If you move the arrows (carousel.gif and carousel.png) you must update the JS file. Look for two lines of code as shown below, and update path for images:

var filenameArrows = “images/carousel.png”;

filenameArrows = “images/carousel.gif”; // IE6 doesn’t support transparent png, so use gif

FYI: There are no references to images in the carousel.css.txt file.

If you move the block_with_image_corners.gif you must update the rounded corners CSS file as this image is called four times from block_with_rounded_corners.css.txt. Update the path:

url(../images/ca_department/block_with_image_corners.gif).

Changing the height of the carousel – To change the height of the carousel please adjust the styles indicated in bold and red below (this code is in the carousel.css.txt file.)

#caro_left {

 position: absolute;

 top: 22px;

 left: -10px;

}

#caro_right {

 position: absolute;

 top: 22px;

 right: -10px;

}

#caro_images1 {

position: relative;

overflow: scroll; /* Show scrollbars for graceful degradation when javascript is disabled. We’ll change this to “hidden” in the javascript */

height: 74px; /* carousel collapses on resize without this */

padding: 7px 0px;

}

0 Comments

Submit a Comment