Home > Add-Ons > Content Carousel
Content Carousel
The content carousel consists of JPG images and some code, done with javascript, which 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.
Now that you have some information about carousel slides, upload your images to your skin's "images" folder.
Copy the included ContentCarousel.js file to the "js" folder that contains your skin level javascript files within the appropriate skin folder. If your skin does not have a "js" folder, you will need to create one.
The following is the most basic code necessary to create the content carousel. The code in this section contains images that are referencing the carousel images that were uploaded via step 1.
<div
id
="FaderContainer"
>
<div>
<img
src
=
"app_themes/Skin_(!SKINID!)/images/slide1.jpg"
alt
"slide1"
/>
</div>
"app_themes/Skin_(!SKINID!)/images/slide2.jpg"
"slide2"
"app_themes/Skin_(!SKINID!)/images/slide3.jpg"
"slide3"
class
"cleared"
></div>
Add <a> tags around the images to have them link to other pages. Example:
"FaderContainer"
> <div> <a href="link1.aspx"> <img src="app_themes/Skin_(!SKINID!)/images/slide1.jpg" alt="slide1"/> </a> </div> <div> <a href="link2.aspx"> <img src="app_themes/Skin_(!SKINID!)/images/slide2.jpg" alt="slide2"/> </a> </div> <div> <a href="link3.aspx"> <img src="app_themes/Skin_(!SKINID!)/images/slide3.jpg" alt="slide3"/> </a> </div> </div> <div class="cleared"></div>
This code is typically put into a unique topic (usually named "contentCarousel"). Then 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"!)
Copy the code below and place it between the opening <head> tag and the closing </head> tag on your skin's template.master file which is located here {Root}/App_Templates/Skin_X/template.master. This will add the necessary reference to the ContentCarousel.js file. If the code below is left as-is, it will look for the ContentCarousel.js file in {Root}/App_Templates/Skin_X/js/ContentCarousel.js
<script type=
"text/javascript"
src=
"App_Templates/Skin_<asp:Literal runat='server' Text='<%$Tokens:SkinId %>'/>/js/ContentCarousel.js"
></script>
Copy the code below and place it in the same file as referenced above, but add it just above the closing </body> tag. This will initiate the Content Carousel.
if
(document.getElementById(
'FaderContainer'
) != null) {
var
fader =
new
ContentCarousel(
); fader.setDisplayTime(
4000
); fader.setFadeTime(
750
); fader.start(); } </script>
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.