XMod Pro Module Kit - Cloud Carousel - jQuery 3D Carousel
As an example kit to show off the flexibility of XMod Pro templates when creating module items for DotNetNuke like an image slider, image gallery
or slideshow, we have put together an example using our example data set and the popular jQuery image carousel from Professor Cloud,
Cloud Carousel.
Module Description:
Need a little sparkle to add to your product pages or website? Nothing adds more life than a 3D Carousel of images. Spotlight pages on your site,
your books, music, movies, cars, or just about anything else that can be represented by an image. Hover your mouse over the carousel
and see the images slow down or reverse direction. Hover over an image to see where that image takes you.
The carousel features optional auto-reflections, and the information contained in the
Alt
and
Title
tags of the images can optionally be displayed as you hover over each image.
Uses:
It can be used to show display any type of image gallery. It works better if there are fewer images, but there is no specific limit as it will
add icons/slides for every image returned in the recordset. Use this as a base code to create your own customized module or use it as a resource
for tips and tricks for building your own XMod Pro solution!
-
3D image carousel
-
photo gallery module
-
slideshow module
-
image slider module
-
image rotator module
-
media module
-
portfolio module
XMod Pro Module Kits: Notes & Instructions
-
XMod Pro demos and XMod Pro Module Kits are free for everyone to use! We have developed them to help share popular items and to help train users in the features and functionality of XMod Pro for creating custom module solutions for DotNetNuke!
-
This kit utilizes code and files from the Cloud Carousel jQuery image gallery from
http://www.professorcloud.com
.
-
Use the left/right arrow buttons to rotate, or click on an image in the ring, or use your mouse wheel to scroll!
-
Small 5Kb (minified) script that degrades gracefully with Javascript turned off and is fully accessible with no CSS or text only browsers.
-
This instance is also combined with the jQuery plugin,
Slimbox
for detail popups, and preserves links and mouse events.
-
To utilize this XMod Pro demo, simply download the Module Kit from the
DNNDev Downloads section
. Once you've downloaded the file, install it as you would any DNN module. Next, add the kit module to a page. Finally, click the module's "Finish Installation" button to complete the process. The result will be an XMod Pro module instance, configured to use the kits forms, templates, and feeds as needed.
-
Images such as the left arrow, right arrow and frame image can be customized and replaced with your own images. You may also download the full js/css/images from the
source at Professor Cloud
-
For demo purposes, initial templates are set to reference the sample images stored on the DNNDev site. When ready to use, follow instructions in the code and edit the code (and feed) files to reference your DotNetNuke instance
-
The jQuery involved with SlidesJS is compatible with all modern web browsers and with jQuery versions 1.4.4+.
-
This XMod Pro Module Kit features an XMP Template for layout, and an XMP Form displayed in admin-only editor view.