Create an image rotator/slideshow

Return to previous page

  • 4/7/2015
  • 7050 Views

Comments

7050 Views

Create an image rotator/slideshow

Last updated 3 years ago

Comments

Common

(Enter the content of this article below)

Advanced

 
A popular request for sites is to support an image rotator or slideshow e.g. to show different images as part of the skin, similar to how dnnsoftware.com does. This can be acheived in a number of different ways with a javascript scroller (particularly via jQuery) or a flash based scroller being the two most popular ways. This page covers a few options.

DotNetNuke 6

The DotNetNuke 6 release contains a skin known as DarkKnight which contains an image rotator. This is an implementation of the jQuery cycle plugin and is configurable. Theres a nice article detailing this and how to configure it here


Widget framework

In 5.0.0 DotNetNuke introduced a Widget framework that allows easy addition of html/javascript functionality. The widget framework shipped with a number of example widgets, one of which is the rotator widget, an example of which is shown below (further documentation of which can be found here

<object id="HeaderRotator" codetype="dotnetnuke/client" codebase="RotatorWidget" declare="declare">

<param name="height" value="129" />
<param name="width" value="479" />
<param name="imageUrl" value="<%=SkinPath %>images/headers/" />
<param name="imageCount" value="6" />
<param name="imageTemplate" value="header_0{INDEX}.png" />
<param name="interval" value="5000" />
<param name="direction" value="left" />
<param name="transition" value="snap" />
</object>

Thisis a useful example of a free skin that uses the image rotator.

Whilst the core rotator widge is useful, the popular http://dnnwidgets.codeplex.com project also contains a Carousel widget with some additional options

Free Modules


Note: a few of the free skins on the http://skins.dnnsoftware.com/ contain image rotator examples that may be of interest - the relevant javascript is often embedded as part of the skin rather than a seperate widget/skinobject/module.


Commercial options

There are of course a number of commercial options available via dotnetnuke store
Contents
No sections defined

DNN Digest is our monthly email newsletter. It highlights news and content from around the DNN ecosystem, such as new modules and themes, messages from leadership, blog posts and notable tweets. Keep your finger on the pulse of the ecosystem by subscribing.  


Copyright 2017 by DNN Corp Terms of Use Privacy
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out