DotNetNuke 7 is including the SlidesJS slider module.
SlidesJS is a slideshow plugin for JQuery. It offers a number of options and effects. Further information about the plugin is to be found at slidesjs.com.
To incorporate the slider module on a DotNetNuke page add a text/html module to the page.
The following code is added to the header of the module. This is accessed by enabling editing of the page, and then for the module clicking on the cog image and selecting settings.
On the popup window select the tab Module Settings. Scroll down and expand Advanced Settings. Paste the code into the textbox marked header. Scroll down further and click on update.
<script src="/Resources/Shared/Scripts/slides.min.jquery.js?cdv=31" type="text/javascript"></script>
<script>
$(function () {
$('#slides').slides({
preload: true,
preloadImage: '../images/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true
});
});
</script>
In the content area of the module the following content needs to be added. Click on the pencil and select edit content. Above the editor select the basic text box radio button. Paste the code in and click save.
<div id="example">
<div id="slides">
<div>
<a href="#" title="Description 1"><img width="980" height="380" src="/portals/0/Images/Banner1.jpg" alt="Description 1" /></a>
<a href="#" title="Description 2"><img width="980" height="380" src="/portals/0/Images/Banner2.jpg" alt="Description 2" /></a>
<a href="#" title="Description 3"><img width="980" height="380" src="/portals/0/Images/Banner3.jpg" alt="Description 3" /></a>
<a href="#" title="Description 4"><img width="980" height="380" src="/portals/0/Images/Banner4.jpg" alt="Description 4" /></a>
</div>
<div>
<a href="#"> </a>
<a href="#"> </a>
</div>
</div>
</div>
The code above is expecting the following:
- Images are called banner1.jpg to banner4.jpg
- The portalid for the website is 0, it is the first website to have been created
- The images are stored in the Images directory, accessed by the File manager
Editing the code pasted in, the description for each image can be edited, as can the image names. It is probably easier to do this in the simple text box mode.
The effects and options available with the plugin are controlled using the code pasted into the header of the module.
See slidesjs.com for further information.
