DotNetNuke Wiki


Create an image rotator/slideshow

Modified on 2012/02/20 08:48 AM by cathal Categorized as Development, jQuery
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 dotnetnuke.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.dotnetnuke.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

Attend A Webinar
Start  Professional Edition Trial
Have Someone Contact Me

Like Us on Facebook Join our Network on LinkedIn Follow DNN Corporate on Twitter Follow DNN on Twitter

Advertisers

Sponsors

DotNetNuke Corporation

DotNetNuke (DNN) provides a suite of solutions that make designing, building and managing feature-rich sites and communities fast, easy and cost-effective. The DotNetNuke Platform CMS is the foundation for more than one million websites worldwide. DNN Social, our newest solution, enables businesses to create immersive, interactive communities. Thousands of organizations like True Value Hardware, Bose, Cornell University, Glacier Water, Dannon, Delphi, USAA, NASCAR, Northern Health and the City of Denver have leveraged DNN to deploy highly engaging business- critical websites. Our rapid growth in product sales and deployments resulted in DotNetNuke Corp. being named one of the fastest growing private companies in America by Inc. Magazine in 2011 and 2012.