Posts Tagged ‘Album’

Simple and beautiful slideshow gallery. The idea is to have a container with our slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will slide out from the top and allow the user to navigate through a set of thumbnails.

This blog post will describe the simple steps on how to use DNN Image Galery module in DotNetNuke portals.

View Live Demo

Step-1: Install DNN Image Gallery

Once you have downloaded DNN Image Gallery, 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 DNN Image Gallery to a Page

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

Add DNN Image Gallery to Page

Add DNN Image Gallery to Page

Step-3: DNN Image Gallery Settings

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

Module Settings

Module Settings

Following table describes the available settings.

Setting Description
Group Size Thumbnails in a Group – specify the number of thumbnails in the thumbnail view.
Image Interval Specify time (milliseconds) interval between images in play mode.
Frame Dimension Specify width and height of the display area.
Thumbnail Dimension Specify width and height of the thumbnails.
Theme Specify theme, available options: 

  • White
  • Black
  • Custom

For Custom, you will have to specify the color combination.

Randomize Images Select this check-box, if you a random image order.
Container HTML You can write your custom HTML. It can serve as wrapper around the gallery.
Use [DNN_IMAGE_GALLERY] in a place where you want to show the actual slider.

Step-4: Manage Images

Now you are ready to add images to the gallery. You can click the “Add Content (Pencil Icon)” link on the newly added module. This will show you image listing, you can upload images. You can specify order of display for images in this section. See following screens for reference.

Image Listing

Image Listing

Add Image

Add Image

Step-5: DNN Image Gallery View

You are all set – now you can go back to the page where you added DNN_ImageGallery and now you can see the gallery in action.

DNN Image Gallery

DNN Image Gallery

Possible Issues and Quick Resolution:

Gallery not working:

Make sure jQuery 1.4.x or later is available in your DNN portal. If you are not sure, turn on the check-box “Include jQuery” from module setting page.


Read Full Post »