Ultimate Gallery Master Pro

Ultimate Gallery Master Pro Documentation

This plugin allows you to implement Full multimedia support ( image, youtube, vimeo, selfhosted video, youku video, audio, flash, iframe, google maps, external link ).

Ultimate Gallery Master Pro is indeed the ultimate responsive multimedia Gallery builder packed with an insane set of features that allows to create unlimited, filterable / sortable multimedia portfolios, product showcase, image galleries with unlimited possibilities. It includes four grid types with vertical or horizontal layout variation (dynamic, classic,masonry and infinite) that allow to display various multimedia content in a highly customizable way. It runs on all major browsers with support for older browsers like IE8 and mobile devices like iPhone, iPad, IOS, Android or Windows mobile.

Plugin Demo: Gallery Demo

Index:

  1.  Plugin Installation
  2.  Add New Category
  3.  Add New Gallery
  4.  Publish Gallery in Page
  5.  Gallery Settings
    1. Classic, Dynamic and Masonry Gird Type
    2. Infinite Gird Type
  6.  Frequently asked questions (FAQ)
    1. What is “Container Dimension”?

Here we explaining how you can installation, configuration and publishing various galleries using Ultimate Gallery Master Pro plugin.

Follow these steps to Publish you gallery :

1. Plugin Installation:

After download plugin Upload & Activate plugin into WordPress site.

Plugin Activation

Now Plugin is successfully installed

Goto Top


2. Create New Category:

Go to Ultimate Gallery Master Pro plugin menu, then click on UGMP Category button.

Enter Category Name and Click on Add New Category Button. Adding Category will be reflected in left side Saved category table.

Note*:- Atleast one category required for gallery and do not change category name if that category is used in any gallery other wise you have to updated that gallery again.

Add New Category

Goto Top


Go to Ultimate Gallery Master Pro plugin menu, then click on Add New Gallery button.

Add New Gallery

Now Enter your Gallery Title and click on Add New Media button

Add New Media

When you click on Add New Media button than a pop window will appears that is Multiple Image Uploader. Using multiple image uploader you can upload and add multiple images in any gallery.

Use CTRL key to select multiple images randomly and Use SHIFT key to select multiple images continuously. Now click on Select button to insert selected images into galleries.

Select Images

After click on select button, all selected image will display on your gallery in the form of box Layout with few drop down and text boxes. Like Below Image

Image Box Details

Here we describe each section of the above image and their uses.

  1. Display Type :- Now you can select Display Type for each image. There are three types for each image.
    1. Image :- If you select Type as Image than upon clicking to that image thumbnail into gallery, Image will preview in light-box.
    2. YouTube/Vimeo Video :- If you select Type as YouTube/Vimeo Video than upon clicking to that image thumbnail into gallery, YouTube/Vimeo Video will play in light-box which is specified into Link Text Box (Box No. 6) Field.
    3. Uploaded Video :- Ultimate Gallery have a great feature to Play Self Hosted Videos. If you select Type as Uploaded Video than upon clicking to that image thumbnail into gallery, your uploaded video will play in light-box. For this you have to upload video using WordPress media uploader than copy the uploaded video link from their and past that link into Link Text Box (Box No. 6) Field. If you want to use video only mp4 files are required.
    4. Audio :- Like Uploaded Video you can also play audio into your gallery. For this you have to upload audio using WordPress media uploader than copy the uploaded audio link from their and past that link into Link Text Box (No. 6) Field. If you want to use audio only mp3 files are required.
    5. Google Maps :- Select Display Type as Google Maps and Past Google map Link into Link Textbox (Box No. 6).
    6. Flash :- Like uploaded video or audio you have to upload flash file using WordPress Media Uploader and Past its link into Link Textbox (Box No. 6).
    7. Iframe :- Select Type as Iframe and gave its link into Link Textbox (Box No. 6).
    8. Link :- If you want to redirect user on a particular link select type as Link and Past you link into  Link Textbox (Box No. 6). When user click on thumbnail it will redirect him to given link.
  2. Category :- Select Category from the drop down. Selected Category will be shown on Top Bar as a Menu over the gallery. Its Work like filter of your gallery. If you don’t want top bar or menu there is a option in gallery settings with name of show top bar set it to “No”. Then no meter which gallery you selected, Because the menu will not display but one category must have in drop-down.
  3.  Image Title :- Image Title will be display on hover over the image.
  4.  Tagline :-
  5.  Description :- Description will be show on light-box preview when you click on image thumbnail or Image icon click (if you enable icon). There is a option in Lightbox Setting named “Description By Default” Enable this option to show description by default or there is a button in light box to see description
  6.  Link :- Use this text box to past the link of YouTube, Vimeo, Uploaded Video, Youku Video, Audio,  Flash File, Iframe URL, Google Map URL or External Link.
  7.  Extra Button URL :- If you enable Icon button than the second icon button will be show on image hover when give some link in the field. When you click on that icon button, given link will be open in new tab.
  8.  Remove Button :- Remove button ( x ) use to remove image from gallery.
  9.  Gallery Shortcode :- Use Gallery Shortcode to publish gallery in any Page / Post. Each gallery have unique shortcode and you can create Multiple galleries.

Goto Top


When you create gallery you can publish gallery in any Page/Post.

Go to All Galleries menu page. Here you get all your saved galleries. Now Click on Edit Button of the gallery you want to publish. Like Below Image

all Gallery

Copy the gallery shortcode :- [UGMP id=190]

copy shortcode

Now Go to Add New Page using Pages menu. Give Title to page and paste your copied [UGMP id=190] shortcode into page content editor. Click on Publish button to publish your gallery into page.

publish gallery into page

Gallery Preview into Page:

Gallery Preview

Goto Top


Through gallery settings you can configure GRID & EFFECT SETTINGS, IMAGE THUMBNAIL SETTINGS, MENU SETTINGS, LOAD THUMBNAIL SETTING, FONT SETTINGS, LIGHT BOX SETTINGS and CUSTOM CSS .

Gallery Setting are Changed according to Grid Layout and Grid Orientation option you selected. Classic, Dynamic and Masonry Gird are different from Infinite Grid Layout. So we describe Gallery settings into two part. First we talk about Classic, Dynamic and Masonry Gird Layout Settings than Infinite Grid Layout settings.

A. Classic, Dynamic and Masonry Gird Type:

Explaining the each settings one by one.

5.A.1.  Grid Layout:

This can be Classic, Dynamic, Masonry, Infinite.

grid layout

5.A.2.  Grid Orientation:

This can be vertical or horizontal. Like name describe gallery display in vertically or horizontally.

gird orientation

5.A.3.  Thumbnail Styles:

This can be used to change Thumbnail Hover effect. List of effects are changed according to grid layout and grid orientation you selected.

Like :- classicVertical have max number of effect rather than any else.

thumbnail style

5.A.4. Container Dimension:

Container Dimension is the area in which gallery thumbnails will be display. This option show when you set Gird Orientation as Horizontal.

For more detail click here.

5.A.5.  Open Link:

This option can be used to set link will open in same tab or new tab.

5.A.6. Gallery Background Color:

This can be used to change background color of Gallery Section.

5.A.7.  Hide and Show Transition Type:

This can be scale, rotation or opacity. The thumbnail animation type when they are hiding or showing.

hide and show transaction type

5.A.8.  Thumbnail Max Width:

Use this option to set max possible width and height of thumbnail image. Set it’s value in between 100 to 800px for both.

Note:- this option available with grid type classic and infinite.

5.A.9.  Disable Hover Effect:

This can be yes or no, disable or enable thumbnails interactivity.

disable hover effect

5.A.10.  Various Image Hover Color:

Use this option to set multi hover color scheme on image hover.

various image hover effect

5.A.11. Image Hover Color:

This can be used to change Image Hover Color.

Note:-  this option is show when Various Image Hover Color set ‘no

image hover color

5.A.12.  Image Hover Color Opacity:

This can be used to change Hover Color Opacity.

image hover color opacity

5.A.13.  Use Icon Button:

This can be used to show icon button on image over.

show icon button

5.A.14.  Icon Style:

This can be used to change icon style Light or Dark.

icon style

5.A.15.  Show Full Screen Button:

This can be yes or no. It hides or shows the full screen button. When you click on Full Screen button of gallery, gallery will display in full Screen

Note :- This option available with Horizontal Gird Orientation

show full screen button

5.A.16. Thumbnail Border Size:

Use this option to set the Border Size of Image Thumbnail. Set it 0px if you don’t want image border.

5.A.17. Thumbnail Border Color:

Use this option to set the Border Color of Thumbnails.

5.A.18.  Space Between Thumbnails:

Think this option as spacing between Thumbnails.

space between thumbnail

5.A.19. Thumbnails Horizontal Offset Spacing:

Think of this as Horizontal margin for Gallery Section.

5.A.20. Thumbnails Vertical Offset Spacing:

Think of this as Vertical margin for Gallery Section.

5.A.21.  Show TopBar:

This can be yes or no, it shows or not the TopBar above the gallery having menu and search box.

show topbar

5.A.22.  TopBar Background Color:

This can used to change top bar background color.

topbar background color

5.A.23. Show Search Box:

This can be yes or no, use this option to show or hide search box from topbar.

show search box

5.A.24.  Menu Position:

The menu position can be left or right.

menu position

5.A.25.  Menu Type:

The menu type, this can be list or combo box.

menu type

5.A.26. Menu Button Bg (Background) Color:

Use this option to change menu button normal color and selected color. When you press the menu button selected color will apply as menu background color.

5.A.27. Menu Button Text:

Use this option to change menu button text normal color and selected color. When you press the menu button selected color will apply on text.

5.A.28.  Multi Category Selection:

This can be yes or no. you can allow user to select multiple category to view gallery by set this option ‘yes’ or set it ‘no’ to single category selection.

multi category selection

5.A.29.  Show All Category:

This can be yes or no, if you have more then one category and you want an extra category with all other categories mixed in then set this to yes otherwise set it to no.

Note:- Atleast two categories require to show All Category Tab.

show all category tab

5.A.30.  All Category Label:

If you set ‘yes’ above you can change label (tab) name from here.

all category label

5.A.31.  Total Per Category:

This can be yes or no, it shows or not the total number of items per category in the menu buttons.

total per category

5.A.32.  Loading Type:

This can be Load With Button or Load With Scroll. This option loads the thumbnail using the load more button or when the browser is scrolled..

loading type

5.A.33.  Thumbnail Per Set:

How many thumbnails to display per set in a category before the load more thumbnails button appears or the load more on scroll occurs.

thubnail per set

5.A.34.  Load More Button Label:

This can be used to change load more button label.

load more button label

5.A.35. Load Button Bg Color:

Use this option to change Load button normal color and selected color. Selected color apply when you press on Load Button.

5.A.36. Load Button Text Color:

Use this option to change Load button text normal color and selected color. Selected color apply when you press on Load Button.

5.A.37. Gallery Font Style:

This option can be used to change gallery font style, option have 500+ font styles you can select any of them.

5.A.38. Image Text Color:

This option can be used to change image thumbnail text color, like: image label.

5.A.39. Image Title:

This option can be used to change Font Size and Line Height of Image Title.

5.A.40. Image Title Transform:

Set Title Transform in normal, Lowercase, Uppercase.

5.A.41. Lightbox Skin:

Lightbox come with two type of display skins. Set any of them as a lightbox skin.

5.A.42. Video Auto Play:

This can be yes or no. If you set this option “yes” video will auto play when video slide comes in lightbox.

video auto play

5.A.43. Show Slide Show Button:

this can be yes or no. Hide or show the slideshow button.

show slide show button

5.A.44.  Show Share Button:

This can be yes or no. Hide or show the Share Button with lightbox.

show share button

5.A.45.  Show Zoom Button:

This can be yes or no. Hide or show the image zoom in and out button with lightbox.

show zoom button

5.A.46.  Show Description Button:

This can be yes or no, hide or show the description button with lightbox.

show discription button

5.A.47.  Description By Default:

This can be yes or no, shows or not the description window by default.

discription by default

5.A.48.  Description Position:

This can be Up or Bottom, shows description on top or bottom of lightbox

discription position

5.A.49. Custom CSS Editor:

This text field is used to apply custom CSS on this plugin. Custom CSS must be enter without using style tag. Simply write a custom css without < style > tag into below textarea field.

custom-css

Goto Top

B. Infinite Gird Type:

Explaining the each settings one by one.

5.B.1.  Grid Layout:

This can be Classic, Dynamic, Masonry, Infinite. Here  we are talking about Infinite grid type.

grid type 2

5.B.2. Drag Direction:

This option represents the grid drag direction, it can both, horizontal, vertical or none.

drag direction

5.B.3. Auto Scroll:

This option can be used to enable or disable grid auto scroll.

auto scroll

5.B.4. Auto Scroll Direction:

This represents the grid auto scrolling direction, it can be down, up, left or right.

Note:- This option work when auto scroll set “yes”.

auto scroll direction

5.B.5. Thumbnail Transition Type:

This option represents the thumbnail image transition type when it first appears, it can be opacity or motion.

thumbnail transection type

5.B.6.  Container Dimension:

Container Dimension is the area in which gallery thumbnails will be display. This option show when you set Gird Orientation as Horizontal.

For more detail click here.

5.A.7.  Open Link:

This option can be used to set link will open in same tab or new tab.

5.B.8.  Gallery Background Color:

This can be used to change background color of Gallery Section.

5.B.9. Image Thumbnail:

Use this option to set max possible width and height of thumbnail image. Set it’s value in between 100 to 800px for both.

Note:- this option available with grid type classic and infinite.

5.B.10.  Various Image Hover Color:

Use this option to set multi hover color scheme on image hover.

various image hover effect

5.B.11. Image Hover Color:

This can be used to change Image Hover Color.

Note:-  this option is show when Various Image Hover Color set ‘no

image hover color

5.B.12.  Image Hover Color Opacity:

This can be used to change Hover Color Opacity.

image hover color opacity

5.B.13.  Use Icon Button:

This can be used to show icon button on image over.

show icon button

5.B.14.  Icon Style:

This can be used to change icon style Light or Dark.

icon style

5.B.15.  Show TopBar:

This can be yes or no, it shows or not the TopBar above the gallery having menu and search box.

show topbar

5.B.16.  TopBar Background Color:

This can used to change top bar background color.

topbar background color

5.B.17.  Menu Type:

The menu type, this can be list or combo box.

menu type

5.A.18. Menu Button Bg (Background) Color:

Use this option to change menu button normal color and selected color. When you press the menu button selected color will apply as menu background color.

5.A.19. Menu Button Text:

Use this option to change menu button text normal color and selected color. When you press the menu button selected color will apply on text.

5.B.20.  Show All Category:

This can be yes or no, if you have more then one category and you want an extra category with all other categories mixed in then set this to yes otherwise set it to no.

Note:- Atleast two categories require to show All Category Tab.

show all category tab

5.B.21.  All Category Label:

If you set ‘yes’ above you can change label (tab) name from here.

all category label

5.B.22.  Total Per Category:

This can be yes or no, it shows or not the total number of items per category in the menu buttons.

total per category

5.A.23. Gallery Font Style:

This option can be used to change gallery font style, option have 500+ font styles you can select any of them.

5.A.24. Lightbox Skin:

Lightbox come with two type of display skins. Set any of them as a lightbox skin.

5.B.25 Video Auto Play:

This can be yes or no. If you set this option “yes” video will auto play when video slide comes in lightbox.

video auto play

5.B.26. Show Slide Show Button:

this can be yes or no. Hide or show the slideshow button.

show slide show button

5.B.27.  Show Share Button:

This can be yes or no. Hide or show the Share Button with lightbox.

show share button

5.B.28.  Show Zoom Button:

This can be yes or no. Hide or show the image zoom in and out button with lightbox.

show zoom button

5.B.29.  Show Description Button:

This can be yes or no, hide or show the description button with lightbox.

show discription button

5.B.30.  Description By Default:

This can be yes or no, shows or not the description window by default.

discription by default

5.B.31.  Description Position:

This can be Up or Bottom, shows description on top or bottom of lightbox

discription position

5.B.32. Custom CSS Editor:

This text field is used to apply custom CSS on this plugin. Custom CSS must be enter without using style tag. Simply write a custom css without < style > tag into below textarea field.

custom-css

Goto Top


6. Frequently Asked Questions(FAQ):

1. What is “Container Dimension”?

Container Dimension represent the area in which image thumbs will display. Check below image for better understand.

Gallery is auto responsive so you can set max width and height of container and after this gallery will auto adjust according to screen.

Goto Top


IMPORTANT: If you found a bug in Ultimate Gallery Master Pro plugin or have any problem/question concerning the plugin, please post your query into Ultimate Gallery Master Pro Support Forum here in our Forum. If you do not find a solution here, do not hesitate to contact us at webhuntinfotech(at) gmail (dot) com.Thanks For Reading This Document.
WebHunt Infotech