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 (dynamic, classic,masonry and infinite) with vertical or horizontal layout variation 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 Grid Type
    2. Infinite Grid Type
  6. General Settings
    1. Lightbox Settings
    2. Other Settings
  7.  Frequently asked questions (FAQ)
    1. What is “Container Dimension”?
    2. How to get update notification of Premium plugin?
    3. Gallery settings are not saved.

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

Follow these steps to Publish your gallery :

1. Plugin Installation:

Please check our tutorial for “How to Install Premium plugin to your WordPress Directory“.

After download plugin Upload & Activate plugin into WordPress site.

Now Plugin is successfully installed

Goto Top


2. Create New Category:

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

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-in-ultimate-gallery

Goto Top


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

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

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 lightbox 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-screenshot-ultimate-gallery

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

Copy-shortcode-ultimate-gallery

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-ultimate-gallery-into-page

Gallery Preview into Page:

Ultimate Gallery Preview on Page

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 Grid Layout Settings than Infinite Grid Layout settings.

A. Classic, Dynamic and Masonry Grid Type:

Explaining the each settings one by one.

5.A.1.  Grid Layout:

This can be Classic, Dynamic, Masonry, Infinite.

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 :- classic Vertical 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 Grid 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 & 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. Gallery Left & Right Spacing:

Think of this as Horizontal (Left & Right) margin for Gallery Section.

5.A.9. Gallery Top & Bottom Spacing:

Think of this as Vertical (Top & Bottom) margin for Gallery Section.

5.A.10.  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.11.  Disable Hover Effect:

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

disable hover effect

5.A.12.  Image Hover Multi Color:

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

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

This can be used to change Hover Color Opacity.

image hover color opacity

5.A.15.  Space Between Images:

Think this option as spacing between Images (Thumbnails).

5.A.16.  Use Icon Button:

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

show icon button

5.A.17.  Icon Style:

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

icon style

5.A.18.  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 Grid Orientation

show full screen button

5.A.19. Image 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.20. Image Border Color:

Use this option to set the Border Color of Thumbnails.

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.

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 Styling:

This can be used to change styling of menu button.

5.A.27. 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.28. 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.29. Topbar Space Left & Right:

Think of this as Horizontal (Left & Right) margin for Topbar Section.

5.A.30. Space Between Menu Buttons:

Use this option to manage spacing between menu buttons.

5.A.31.  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.32.  All Category Label:

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

all category label

5.A.33.  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.34.  Thumbnail Per Set:

How many thumbnails (Images) 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.35.  Load More Button Label:

This can be used to change load more button label.

load more button label

5.A.36. 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.37. 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.38. 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.39. Image Text Color:

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

5.A.40. Image Title:

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

5.A.41. Image Title Transform:

Set Title Transform in normal, Lowercase, Uppercase.

5.A.42. 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 Grid Type:

If you are using infinite grid effect, you need to create at-least two category and select at-least 9 image in each category. It’s necessary to generated infinite scrolling effect.

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 Grid 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.

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.

5.B.17.  Menu Type:

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

menu type

5.B.18.  Menu Style:

This can be used to change styling of the menu button.

5.A.19. 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.20. 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.21. Topbar Space Left & Right:

Think of this as Horizontal (Left & Right) margin for Topbar Section.

5.A.22. Space Between Menu Buttons:

Use this option to manage spacing between menu buttons.

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.A.25. 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.B.26. 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. General Settings

6.A.1. Lightbox Styles:

A. Lightbox Style : Choose the style of your light-box.

B. Lightbox Offset Margin : Set the margin from top and bottom for the light-box in pixels.

C. Background Color : Choose the lightbox main background color.

D. Background Opacity : Set the lightbox main background opacity.

E. Border Color : Choose the lightbox item border color.

F. Lightbox Border Size : Set the lightbox item border size in px.

G. Lightbox Border Radius : Set the lightbox item border radius in px.

 

6.A.2. SlideShow:

A. Slideshow Auto Start : Enable or disable the lightbox slideshow autoplay.

B. Video Autoplay : Enable or disable video autoplay.

C. Video Loop : Set the video play in loop (doesn’t apply to youtube or vimeo).

D. Audio Autoplay : Enable or disable audio autoplay.

E. Audio Loop : Set the audio play in loop or not.

F. Slideshow Interval : Set the slideshow duration in seconds.

 

6.A.3. Advanced Options:

A. Buttons Alignment : Set to ‘In’ the buttons will be positioned near the image and set to ‘Out’ the buttons will be positioned at the right or left side of the screen.

B. Keyboard navigation : Enable or disable the keyboard left and right arrows to navigate between lightbox items.

C. Show Arrows : Hide or show the next and prev buttons.

D. Show Arrows in Mobile : Hide or show the next and prev buttons on mobile.

E. Show Close Button : Hide or show the close button.

F. Show Zoom Button : Hide or show the image zoom in and out button.

G. Show Slideshow Button : Hide or show the slideshow button.

H. Show Description Button : Hide or show the description button.

 

6.A.4. Lightbox Description Window:

A. Animation Type : Set the animation type of the description window when on show / hide.

B. Position : Set the description window position inside the lightbox item.

C. Background Color : Set the background color of the description window.

D. Background Opacity : Set the description window background opacity.

E. Text Color : Set the text color of the description window.

F. Description By Default : Shows or not the description window by default.

 

6.A.5. Button Styles:

A. Buttons Hide Delay : Set the delay in seconds until the buttons will hide..

B. Space Between Buttons : Set the space between buttons in px.

C. Buttons OffsetIn : Set the space between the buttons and the main lightbox item.

D. Buttons OffsetOut : Set the space between the buttons and window left or right side.

 

6.A.6. Social Share Buttons:

A. Social Share Buttons : Hide or show the social share button.

B. Social Share Buttons List : Allow social media to share.

Goto Top

B. Other Settings:

6.B.1. Menu Settings:

A. Combobox Selector Label : If the menu is combobox set the selector label.

B. Search Label : Set the search box label.

C. Search Not Found Label : Set the text display when search item not found.

D. Menu Max Width : Set maximum menu width.

E. Menu Offset Top : Set margin top for the menu buttons.

F. Menu Offset Bottom : Set margin bottom for the menu buttons.

G. Total Per Category : Show total number of images(counter) in menu button.

H. Multi Category Selection : Allow Multiple Categories to Select.

 

6.B.2. Thumbnail Effect Settings:

A. Text Animation Type : Text animation type for Animtext effect.

B. Media Effect Text Align : Text vertical align.

C. Media 2 Effect Text Align : Text vertical align.

D. Image Transition Direction : This option will work with curtain animation type.

 

6.B.3. Infinite Grid Settings:

A. Enable Visited Thumbnails : This way user can see which thumbnails content was viewed.

B. Add Zoom Support : Enable or disable gallery zoom on desktop machines and pinch & zoom on mobile devices.

C. Drag & Swipe Support : Enable or disable drag and swipe for gallery.

 

6.B.4. Mouse Settings :

A. Mouse Right Click : Set action of mouse right click over gallery content.

Goto Top


7. 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

2. How to get update notification of Premium Plugin?

Each time when we release a new update, we will send a mail about new update. You can download the latest package and upload it to your WordPress or server.

Goto Top

Some times when user uploaded more than 85 or more images in a single gallery. Their gallery settings are stop to saving data/changes. This is because of the maximum number of input variables (through GET and POST requests) allowed for PHP scripts is set to 1000 and if you create a big gallery than you need to increase its value.

For this, please check out tutorial “How to increasing PHP memory limit with max_input_vars”.

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 our Ultimate Gallery Master Pro Support Forum . If you do not found solution there, do not hesitate to contact us at webhuntinfotech(at) gmail (dot) com.
Thanks For Reading This Document.
WebHunt Infotech