Setting Up a Javascript Image Rotator in Drupal 6.19
on January 11, 2011
To add an Image Rotator in Drupal 6.19 using Javascript simply follow these directions:
1. Create a folder called innerfade in /sites/all/themes/YOUR_TEMPLATE/ and uploaded jquery.innerfade.js to it (from http://medienfreunde.com/lab/innerfade/, download link at bottom).
2. Add the following code to the bottom of /sites/all/themes/YOUR_TEMPLATE/template.php:
drupal_add_js(‘
$(document).ready(function(){
$(“#header-image img”).show();
$(“#header-image”).innerfade({
speed: 1000,
timeout: 6000,
type: “sequence”,
containerheight: “453px”
});
});
‘, inline);
<div id=”header-image”><img src=”http://www.YOUR_SITE.com/sites/all/themes/YOUR_TEMPLATE/img/header/header-img1.jpg” alt=”” border=”0″> <img src=”http://www.YOUR_SITE.com/sites/all/themes/YOUR_TEMPLATE/img/header/header-img2.jpg” alt=”” style=”display: none;” border=”0″></div>
4. The above code will rotate two images, if you need to rotate more, add:
<img src=”http://www.YOUR_SITE.com/sites/all/themes/YOUR_TEMPLATE/img/header/header-img2.jpg” alt=”” style=”display: none;” border=”0″>
for each additional picture, making sure to update the image names for each successive image.
5. Upload all of your (correctly named) images to /sites/all/themes/YOUR_TEMPLATE/img/header/header-img2.jpg
6. If you would like to center your rotating images, add the following code to /sites/all/themes/YOUR_TEMPLATE/style.css:
div#header-image {
width: 720px ;
margin-left: auto ;
margin-right: auto ;
}
7. Congrats! You are now the proud owner of your very own image rotator.
Leave a Reply