Image Rotator – Linked Images and Text

Find out how to implement an image rotator on your website that links the images to pages and provides an area for text under the picture.

Use the following code to implement an image rotator on your website that links the images to pages and provides an area for text under the picture.

Note: This code does not work on CMS Version 5 sites. It has been replaced with the image rotator module.

Prerequisites

The example below shows this working in the center column of the 3 column template.

• Images should all be the same height and width.
• Optimal width and height is 540px by 280px.

Example Screenshot

Note that since Blink is now a CMS Version 5 site, this image rotator code does not work on Blink.

How to Implement

Insert the following code into the page, substituting the image path in the appropriate location:

<div class="flexslider">
<ul class="slides">
<li><a href="link"><img src="_images/img-1.jpg"/>
<p class="flex-caption">Caption1</p></a></li>
<li><a href="link"><img src="_images/img-2.jpg"/>
<p class="flex-caption">Caption2</p></a></li>
<li><a href="link"><img src="_images/img-3.jpg"/>
<p class="flex-caption">Caption 3</p></a></li>
</ul>
<div class="flex-controls"></div>
</div>