Feeds:
Posts
Comments

Archive for June, 2013

A jQuery based DNN module that will create a booklet-like component that let’s you navigate through its items by flipping the pages.

A jQuery based DNN module that will create a booklet-like component that let’s you navigate through its items by flipping the pages.

You can add images to this module and it will display images with flip-book transitions. Light-box gallery support is also available with this module.

View Live Demo

Step-1: Install Module

Once you have downloaded Image Slider with Flip Book Navigation, you can install it in your portal by logging in as Host and going to Host -> Module Definitions -> Install Module. If you are not familiar with DotNetNuke module installation, please read following articles:

Step-2: Add Module to a Page

Once the module is installed, it will be available in the Module drop-down. You can add this module (DZ_ImageFlipBook) to your desired pane.

Add Module to a DotNetNuke Page

Add Module to a DotNetNuke Page

Step-3: Module Settings

After adding the module, you can go to module settings page and scroll to bottom section “Image Flip Book Settings”. This section contains settings specific to this module. See following screen for setting details.

Module Settings

Module Settings

Following table describes the available settings.

Setting Description
Randomize Images Select this check-box, if you want a random image order on each page load.
Flip Orientation Choose between vertical and horizontal flip transition
Circular Select this check-box to move back to first slide after the last one
Auto Play Select this check-box to start auto-play on page load
Auto Play Delay Specify the time (milliseconds) for auto-play
Image Dimension Specify the width and height for the slider area

Step-4: Manage Images

Now you are ready to add images to the slider. You can click the “Manage Images (Pencil Icon)” link on the newly added module. This will show you image listing, you can upload images. You can specify slide title, tag line and description for each image. See following screens for reference.

Manage Images

Manage Images

Add Image

Add Image

Step-5: Image Slider with Flip Book Navigation View

You are all set – now you can go back to the page where you added the module and now you can see the Image Slider with Flip Book Navigation in action.

Image Slider View

Flip Book Transition

Flip Book Transition

Read Full Post »