Ultimate Gallery Master Pro

Ultimate Gallery Master Pro Documentation

This plugin allows you to implement Full multimedia support (image, self hosted video, youtube, vimeo, 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

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.

      1. 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.
      2. Google Maps :- Select Display Type as Google Maps and Past Google map Link into Link Textbox (Box No. 6).

    If you want to use audio only mp3 files are required.

    1. 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).
    2. Iframe :- Select Type as Iframe and gave its link into Link Textbox (Box No. 6).
    3. 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. Label :- Label 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 :-

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.  Max Width:

This option can be used to set gallery max width. This option show when you set Gird Orientation as Horizontal.

max width

5.A.5.  Max Height:

This option can be used to set gallery max height. This option show when you set Gird Orientation as Horizontal.

max height

5.A.6.  Image Section Background color:

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

image section background color

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 of thumbnail image.

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

thumbnail max width

5.A.9.  Thumbnail Max Height:

Use this option to set max possible Height of thumbnail image.

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

thumbnail max height

5.A.10.  Disable Hover Effect:

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

disable hover effect

5.A.11.  Various Image Hover Color:

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

various image hover effect

5.A.12. 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.13.  Image Hover Color Opacity:

This can be used to change Hover Color Opacity.

image hover color opacity

5.A.14.  Use Icon Button:

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

show icon button

5.A.15.  Icon Style:

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

icon style

5.A.16.  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.17.  Space Between Thumbnails:

Think this option as spacing between Thumbnails.

space between thumbnail

5.A.18.  Thumbnails Offset Spacing:

Think of this as margin for Gallery Section.

thumbnail offset spacing

5.A.19.  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.20.  TopBar Background Color:

This can used to change top bar background color.

topbar background color

5.A.21. 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.22.  Menu Position:

The menu position can be left or right.

menu position

5.A.23.  Menu Type:

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

menu type

5.A.24.  Menu Button Normal Color:

Use this option to change menu button normal color.

menu button normal color

5.A.25. Menu Button Selected Color:

This color apply when you hover or select menu tab.

menu button selected color

5.A.26.  Menu Button Normal Text:

Change menu button text color from here.

menu button normal text

5.A.27.  Menu Button Selected Text:

This can be apply on hover or selected menu text.

menu button selected 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 Normal Color:

Use this option to change Load button normal color.

load button normal color

5.A.36.  Load Button Selected Color:

This color apply when you hover or click on load button.

load button selected color

5.A.37.  Load Button Normal Text:

This can be used to change load button text color.

load button normal text

5.A.38.  Load Button Selected Text:

This color shows when you hover mouse or click on load button.

load button selected text

5.A.39.  Font Style:

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

font style

5.A.40.  Image Overlay Text Color:

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

image overlay text color

5.A.41. 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.42. Show Slide Show Button:

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

show slide show button

5.A.43.  Show Share Button:

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

show share button

5.A.44.  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.45.  Show Description Button:

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

show discription button

5.A.46.  Description By Default:

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

discription by default

5.A.47.  Description Position:

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

discription position

5.A.48. Custom CSS:

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.  Max Width:

This option can be used to set gallery max width.

max width

5.B.7.  Max Height:

This option can be used to set gallery max height.

max height

5.B.8.  Image Section Background color:

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

image section background color

5.B.9.  Thumbnail Max Width:

Use this option to set max possible width of thumbnail image.

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

thumbnail max width

5.B.10.  Thumbnail Max Height:

Use this option to set max possible Height of thumbnail image.

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

thumbnail max height

5.B.11.  Various Image Hover Color:

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

various image hover effect

5.B.12. 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.13.  Image Hover Color Opacity:

This can be used to change Hover Color Opacity.

image hover color opacity

5.B.14.  Use Icon Button:

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

show icon button

5.B.15.  Icon Style:

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

icon style

5.B.16.  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.17.  TopBar Background Color:

This can used to change top bar background color.

topbar background color

5.B.18.  Menu Type:

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

menu type

5.B.19.  Menu Button Normal Color:

Use this option to change menu button normal color.

menu button normal color

5.B.20. Menu Button Selected Color:

This color apply when you hover or select menu tab.

menu button selected color

5.B.21.  Menu Button Normal Text:

Change menu button text color from here.

menu button normal text

5.B.22.  Menu Button Selected Text:

This can be apply on hover or selected menu text.

menu button selected text

5.B.23.  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.24.  All Category Label:

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

all category label

5.B.25.  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.B.26.  Font Style:

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

font style

5.B.27 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.28. Show Slide Show Button:

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

show slide show button

5.B.29.  Show Share Button:

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

show share button

5.B.30.  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.31.  Show Description Button:

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

show discription button

5.B.32.  Description By Default:

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

discription by default

5.B.33.  Description Position:

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

discription position

5.B.34. Custom CSS:

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

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