Introduction
The content carousel consists of JPG images and some code, done with javascript, that creates the fading from one image to the next. Below are instructions on how to install the necessary code and creating the topic so that the content carousel will work. These instructions assume some basic information, so references to file names and lines of code may not be accurately described, but should be close enough to follow. These instructions also assumes some knowledge of things like basic HTML structure and uploading files via FTP to a website hosting server.
Images (slides)
Images that make up the "slides" for the content carousel can be named whatever you like and then uploaded via FTP. The content carousel "container" is specifically designed to have images with all the same dimensions. For best results when creating new images, please be sure the new images are exactly the same size as each other. For the sake of these instructions, we'll assume that there are 3 slides in the content carousel. The file names of these slides may be; "slide1.jpg", "slide2.jpg" and "slide3.jpg". Filename is case sensitive, so "slide1.jpg" is not the same as "Slide1.jpg" or "slide1.JPG", so be careful what the new files are named. These images are added to the skins\Skin_#\images folder for this installation example.
Copy the included javascript file to the "skins\Skin_#\jscripts" folder (create if not existing) within the appropriate skin folder. The file is ContentCarousel.js
Installation
The following is the code necessary to create the Content Carousel.
AspDotNetStorefront Topic Code:
<div id="FaderContainer">
<div>
<img src="skins/Skin_1/images/slide1.jpg">
</div>
<div>
<img src="skins/Skin_1/images/slide2.jpg">
</div>
<div>
<img src="skins/Skin_1/images/slide3.jpg">
</div>
</div>
<div class="cleared">
</div>
This code is typically put into a unique topic (usually named "contentCarousel"), and then modify the slide names and file path for your created slide images as necessary.
Next, add a token where you’d like the content carousel to display (For example, placing this token code in the topic "hometopintro" will place the Content Carousel on the site's homepage):
(!Topic Name="contentCarousel"!)
Template code
Between <head> and </head> of the template.ascx (or custom template files as needed), replacing the # with the appropriate skin number:
<script language="javascript" type="text/javascript" src="skins/Skin_#/jscripts/ContentCarousel.js"></script>
After template content and before </body>:
<script language="javascript" type="text/javascript">
if (document.getElementById('FaderContainer') != null)
{
var fader = new ContentCarousel("FaderContainer");
fader.setDisplayTime(4000);
fader.setFadeTime(750);
fader.start();
}
</script>
Timing of the slides can be adjusted within the "fader.setDisplayTime" variable. 4000 above is equal to 4 seconds. The amount of time it takes to fade from one slide to another can be adjusted within the "fader.setFadeTime" variable. 750 above is equal to ¾ of a second. (1000 is equal to 1 second)
style.css
Add this to the .CSS file in the \Skin_# folder to establish the height of the Content Carousel slides and modify the ### for your height value:
#FaderContainer
{
height: ###px; /* enter the height in pixels of the Content Carousel slides images */
}
Linking slides to other pages
Add <a> tags around the images to have them link to other pages (replace highlighted example page with site page of your choice) :
<div id="FaderContainer">
<div>
<a href="
slide1link.aspx"><img src="skins/Skin_1/images/slide1.jpg" border="0"></a>
</div>
<div>
<a href="
slide2link.aspx"><img src="skins/Skin_1/images/slide2.jpg" border="0"></a>
</div>
<div>
<a href="
slide3link.aspx"><img src="skins/Skin_1/images/slide3.jpg" border="0"></a>
</div>
</div>
<div class="cleared">
</div>
Summary
Once each part of the code is added to the appropriate site files, load the site in a browser and the content carousel slides should load, one at a time and fade from one to the next and then loop.
Support
If you have further questions or comments, please feel free to contact
our help desk.
