This widget displays a slideshow of linkable images most often used to create a banner on the site Home Page, or within a Product Detail Template that uses Product Groups.
Name: Slides
Derived from: Slides
URL: http://slidesjs.com/
| Key | Required | Description | Suggested Value | Optional Values |
| Play | Autoplay slideshow and set the time between slides. | 5000 | A positive number will set to true and be the time between slides in milliseconds. | |
| Pause | Pause slideshow on click of next/prev or pagination. | 2500 | A positive number will set to true and be the time between slides in milliseconds. | |
| Pagination | Display a dot for each slide to be used as navigation to that slide. | true | true, false | |
| FadeSpeed | The speed at which the slide fades off the screen. | 1000 | Integer in milliseconds. | |
| SlideSpeed | The speed of the sliding animation. | 350 | Integer in milliseconds. | |
| UseArrows | Use previous and next arrows as an additional option to manually navigate the slides. | true | true, false | |
| Width | x | The width of the plugin layout. | 500px | positive number in pixels |
| Height | x | The height of the plugin layout. | 350px | positive number in pixels |
It is recommended that all images used for the banner be the same height and width. There are five rotating images used in this example which are 500px x 350px and stored in the theme folder in a subdirectory called banner. To implement the rotating banner on the site home page, copy and modify the following sample code snippet into the Home Page section of Site Customization in your admin interface:
<---Copy below this line
<style type="text/css">
.Slides span {visibility:hidden; }
</style>
<div class="Plugin Slides">
<span class="Play">5000</span>
<span class="Pause">2500</span>
<span class="Pagination">true</span>
<span class="FadeSpeed">1000</span>
<span class="SlideSpeed">350</span>
<span class="UseArrows">true</span>
<span class="Width">500px</span>
<span class="Height">350px</span>
<span class="Images">
<a href="/ui/themelink.hcf?productid=interopid" title="descriptive text goes here"><img src="banner/image1.jpg" alt="image description goes here" /></a>
<a href="http://www.yoursite.com" target="_blank" title="descriptive text goes here"><img src="banner/image2.jpg" alt="image description goes here" /></a>
<a href="http://www.yoursite.com" target="_blank" title="descriptive text goes here"><img src="banner/image3.jpg" alt="image description goes here" /></a>
<a href="http://www.yoursite.com" target="_blank" title="descriptive text goes here"><img src="banner/image4.jpg" alt="image description goes here" /></a>
<a href="http://www.yoursite.com" target="_blank" title="descriptive text goes here"><img src="banner/image5.jpg" alt="image description goes here" /></a>
</span>
</div>
Copy above this line -->
To implement the rotating banner using Product Groups, copy and modify the following sample code snippet into a Product Detail Template in your admin interface:
<---Copy below this line
<div class="Plugin Slides">
<span class="Play">4000</span>
<span class="Pause">1000</span>
<span class="Pagination">true</span>
<span class="FadeSpeed">1000</span>
<span class="SlideSpeed">1000</span>
<span class="UseArrows">true</span>
<span class="Width">133px</span>
<span class="Height">200px</span>
[[ProductGroup:YourProductGroupName]]
</div>
Copy above this line -->
Reference Material: None
Related Articles: None
Labels: Rotating Banner, Slider, Product Detail Template, Customize, Widget