Image Gallery Module allows you to add a gallery image on your site. There is a list of different types of gallery you can use with this module.
- BX Slider
bxSlider is a fully responsive jQuery Slider Plugin that allows you to create a content image slider. You can find more details of this JQuery plugin on this following URL.
https://bxslider.com/
- Camera Slideshow
CameraSlideshow is an open source JQuery image gallery project. It was based on Diapo Slideshow that is no longer supported. For more information about this plugin can be found in here.
https://www.pixedelic.com/plugins/camera/
- Fotorama
Fotorama is a modern and natively responsive open source JQuery image gallery plugin. It has an intuitive controls, great browser compatibility, thumbnails, fullscreen, and serverless images options. For more information about this JQuery plugin please visit the following URL.
https://fotorama.io
- UniteGallery
UniteGallery is a touch enabled responsive image web gallery with width zoom effect. For more information about this JQuery plugin please visit the following URL.
https://unitegallery.net/
Getting Started with Image Gallery Module
Before adding a gallery into your site. We need to setup the following items.
- Image Gallery Settings
The image gallery settings allow us to setup the image dimension. There will be 4 different types of image dimensions which are thumbnail, small, medium and large dimension.
- Image Gallery Group
Image Gallery Group is used for holding a collection of images. You need to setup at least one image gallery group.
- Upload Images
Once the image gallery group has been created. You can upload images and set it against to a particular image gallery group.
To get started. Please go to Admin Dashboard > Image Gallery menu.
Once you clicked the Image Gallery menu. Click the Settings menu.
Update the dimension size accordingly. Here is the default dimension sizes value.
- Thumbnail Size: 100px
- Small Dimension: 350px
- Medium Dimension: 700px
- Large Dimension: 1200px
Once the Image Gallery Settings have been updated. The next step is to create Image Gallery Group. You need to setup at least 1 Image Gallery Group. This group will be used to hold a collection of images.
Click the New Group button to create a new group. The Group Name field is required. Once you have entered all the required fields. You can click the Save button to create the group.
Once the Image Gallery Group has been created. You can start uploading images and assign the images to the group you just created. Click the Images menu.
There are two types of uploading the images. The first easy option is doing a bulk upload and the second option is to upload image one by one.
To upload bulk images. Click the Bulk Upload button. In the bulk upload form. You need to set what will be the Image Gallery group. Once selected. Click the Choose Files button. Note: you can choose more than 1 image. The images will be automatically uploaded.
Second option is to upload one by one. This option give you the ability to add the image title and description. Although in the bulk upload. It does not give you the choice to update this information. You can still edit the image and update the title and description manually.
Once you have setup everything. It is time now to add the image gallery on your page. Add a module name called "DNNInfoIMG Image Gallery Viewer".
Once the image gallery module has been added. You will receive the following message "Please go to module settings to setup the Image Gallery Viewer". You need to setup the image gallery settings by clicking the Settings menu of the module.
In the module setting screen. You will see a list of available settings you can configure.
- Module Themes
Module Theme provide you the option for admin to set the css theme for the module. This theme is retrieved from the following folder.
/DesktopModules/dnninfoallmodules/Modules/ImageGallery/Skins/ImageGalleryView
If you want to create a new theme. You can simply copy the folder default and rename it accordingly. It is recommended not to modify the default theme. This is because when you an upgrade in the future. It will be overwritten again with updated module version.
- Gallery Type
You can set what type of gallery you want to display. As described previously there are 4 galler types which are: BXSlider, Camera Slideshow, Fotorama and UniteGallery.
- Image Groups
You need to select at least one image group. This image group will be used for loading all images belong to this group.
- Show Gallery Groups
If you tick option Yes. It will display the image group information first before loading all the images belong to the group.
- Gallery Mode Settings
Each Gallery will have it's settings. So feel free to give it a try.