Disclaimer – This article in no way suggests you turn your ‘eback’ on traditional textual content for your intranet. Words included in this article such as ‘carousel’ may encourage a fun theme park notion, leading the more impressionable among us to seek a ‘higher level of interaction’ and communicate to users through a series of brightly colored pictures only. While ultimately hilarious, this is not a wise idea. Think of it this way – just because your liturgical dance skills would put a mute Olympic ribbon-twirler to shame does not mean you should stop talking.

So to reiterate – great content is always going to be one of the most important factors in keeping intranet users engaged. That said, including exciting visuals and interactive functionality is another great way to enhance the overall user experience and push previously underrated intranet pages into the spotlight.

To set the scene – your boss has returned victorious from a phenomenally successful sales expo with a series of high resolution images so majestic and thought-provoking you will be fielding head-hunter calls from The National Geographic for months to come. They would like you to share them on the intranet, and have visualized them sliding smoothly/gracefully onto the screen.

With iD CMS, available in the latest version of iD, this is one request you can fulfill with ease using iD CMS’ HTML component.

The first step is to simply drag the component onto your CMS page and import the relevant Lightbox code.

Next, your boss requests that the images are displayed on the intranet homepage in a carousel format. The HTML component comes to the rescue again by allowing you to import blocks of code including HTML, CSS, Javascript, Flash and even web applications with a just a few quick clicks.

At the risk of appearing hypocritical given our original disclaimer, here are some pictures to make it easier to understand:

Inserting the code

Select and drag the HTML component into the position where you would like the carousel to be displayed.


Now insert the HTML and JQuery code for the carousel into the newly created HTML component box.

Below is an extract of the code. Click here to download the full source if you’re game. Note: the imagery and button graphics should be uploaded to a server and should be referenced in the [path].

<div id="carousel">
<div title="previous"></div>
<div title="next"></div>
<div id="slides">
<ul>
   <li><a href="test.html"><img src="[path]slider_image_01.jpg" alt="scenery1" width="700" height="180" /></a></li>
   <li><a href="test.html"><img src="[path]slider_image_02.jpg" alt="scenery2" width="700" height="180" /></a></li>
   <li><a href="test.html"><img src="[path]slider_image_03.jpg" alt="scenery3" width="700" height="180" /></a></li>
   <li><a href="test.html"><img src="[path]slider_image_04.jpg" alt="scenery4" width="700" height="180" /></a></li>
</ul>
</div>
</div>

Click OK to continue and save your page.


Voila! When you view the live page the image carousel will appear in the place of the HTML component.


Then you might decide to blow everyone away and customize the carousel with your own imagery and button graphics.

The carousel code uses imagery which is 700px in width and 180px in height. If you wish to change these dimensions, you will need to modify the CSS and JQuery code.

Alternatively, the images themselves can be changed by modifying the src reference in the slides id. You can alter the amount of images by adding or removing the <li> list items.

<!-- Imagery section -->
<div id="slides">
<ul>
<li><a href="test.html"><img src="[path]slider_image_01.jpg" alt="scenery1" width="700" height="180" /></a></li>
<li><a href="test.html"><img src="[path]slider_image_02.jpg" alt="scenery2" width="700" height="180" /></a></li>
<li><a href="test.html"><img src="[path]slider_image_03.jpg" alt="scenery3" width="700" height="180" /></a></li>
<li><a href="test.html"><img src="[path]slider_image_04.jpg" alt="scenery4" width="700" height="180" /></a></li>
</ul>
</div>

Changing the buttons

The next and previous buttons can be updated by altering the background-image url references in the stylesheet.

/* Styling for prev and next buttons */
.leftButton
{
z-index:5;
position:absolute;
cursor:hand;
cursor:pointer;
width:34px;
height:34px;
margin:72px 0 0 10px;
background-image:url([path]control_left.png');
}

.rightButton
{
position:absolute;
z-index:5;
cursor:hand;
cursor:pointer;
width:34px;
height:34px;
margin:72px 0 0 654px;
background-image:url([path]control_right.png');
}

Legacy IE6 gif buttons can be changed in the following section.


<!-- IE6 won't display PNGs -->

<!--[if IE 6]>
<style>
.leftButton
{
background-image:url([path]control_left.gif');
}

.rightButton
{
background-image:url([path]control_right.gif');
}
</style>

<![endif]-->

For more information about iD CMS’ HTML component, click here.