Install the plugin
To install the plugin use the following steps
For free version
-
Find and install plugin from Plugins section in the WordPress plugin menu > Click Add New Button > Search For the Gallery plugin from Huge-IT- If you have downloaded the zip file from our website use the following step №2
-
Install the zip file from Plugins in the WP dashboard > Add New > Upload Plugin
-
Activate
For Pro Version
After you have purchased and got the zip file of the plugin, follow these steps to switch the license and install the Pro version
Through WordPress
-
Go To Plugins> Photo Gallery (free version) > Deactivate > Delete If you don’t have free version then pass the first step
-
Plugins > Add New > Upload Plugin, add the zip file of Pro version and after installation clickActivate
You may also install the zip file via FTP
-
Download the ZIP file from WordPress website
-
Extract the photo-gallery-wp directory to your computer
-
Upload the photo-gallery-wp directory to the /wp-content/plugins/ directory
-
Activate the plugin in the Plugin dashboard
-
You can see the plugin installed on WordPress left menu
Configuration and Usage
On the left toolbar you will find the plugin Photo Gallery WP. enter in Galleries section and start creating a gallery.
Click on Add New Gallery to build your gallery
On the right sidebar fill the fields:
-
Gallery name.
Name your gallery, this title will be seen only for you -
Select View.
Choose ofe among 8 available gallery types -
Displaying Content.
Most of the gallery types provide this option to divide the projects into pages or parts using pagination or ‘load more’ option -
Ratings.
Those galleries which have thumbnail blocks may have a rating icons such as like/dislike or heart.
Click on Add Video to have a video in a gallery. This option is for premium version, and allows to add links from Youtube or Vimeo
Click on Add Image button to open media library from where you choose the image to add in gallery. Also choose multiple images at once with pressing ctrl button.
After adding images fill the following fields:
-
Title.
Name of the image which is seen on the front end -
Description.
Description text for the image which is available in some views -
URL.
URL link for redirection to new custom page like is available with several views which has “View More” button, and also with Lightbox Gallery which is active on title click.
Hover the mouse o image to see it’s whole version.
Use “edit image” button to replace the existing image with a new one
General Options
Every view has it’s options. Choose the view you use, and under that tab make beautiful changes playing with plenty options.
Gallery/Content Popup
Content Styles
-
Show Content In The Center. Move the gallery in the center of theme container
Popup Styles
-
Popup Image Full Width.
The option will make image inside popup full width and height - proportionally. -
Popup Background Color.
Use his option to change the color for popup background -
Popup Overlay Color.
The back overlay of the popup may be also changed in color -
Show Separator Lines.
Inside popup between text you may have lines, or remove them -
Keyboard navigation.
Select the option to be able to switch among projects using right and left buttons on keyboard -
Popup Overlay Opacity.
Change the opacity level of back overlay of the popup -
Popup Close Button Style.
With this option you may change the X button style inside the popup
Element Styles
-
Image Behavior.
On “Natural” this option will fit the image in element box without stretching it -
Element Image Width in px.
Adjust width size of the elements in gallery -
Element Image Height in px.
Adjust height size of the elements in gallery -
Element Border Width in px.
Add a border and adjust its width -
Element Border Color.
Pick up a color for the element border -
Elements Image Overlay Color.
Choose color for the overlay which appears while you hover mouse on it -
Zoom Image Style.
On hove besides overlay you can see zoom icon, which may be in two different colors.
Pagination Styles
-
Pagination Font Size in px.
Specify pagination numbers size -
Pagination Font Color.
Specify the color of pagination numbers -
Pagination Icons Size in px.
Change the size of pagination right and left arrow icons -
Pagination Icons Color.
Change the color of pagination right and left arrow icons -
Pagination Position.
Choose the position of pagination icons
Load More Styles
-
Load More Text.
You may change the text on the Load More button -
Load More Font Size in px.
The size of the letters in pixels depends on this options -
Load More Font Color.
Change the color of the button which comes with Load More function -
Load More Font Hover Color.
Change color of the text on load more button while you hover the mouse point on it -
Load More Button Color.
Specify the color of the button of load more function -
Load More Background Hover Color.
Specify the button color of load more function on hover -
Load More Position.
Change the position of load more button -
Loading Animation.
Decide the animation type of load more function
Element Title
-
Element Title Font Size in px.
You may change the font size of the title on element -
Element Title Font Color.
Change the font color of element title -
Element Title Background Color.
Choose the color for background of the element where title is placed
Popup Title
-
Popup Title Font Size in px.
Adjust the size of the title text in popup -
Popup Title Font Color.
Adjust the color of the title text in popup
Element Link Button
-
Show Link Button On Element.
Select this option to have a button on element which will redirect to URL of the image -
Link Button Text.
Change the text on the link button -
Link Button Font Size in px.
Change the text-size on link button in pixels -
Link Button Font Color.
Change text color on the link button -
Link Button Font Hover Color.
Change hover font color on the button which redirects to the link -
Link Button Background Color.
Specify background color on the button which redirects to the link -
Link Button Background Hover Color.
Specify on hover background color of the button which redirects to the link
Popup Description
-
Show Description.
Select this option to allow the description in the popup -
Description Font Size in px.
Specify size of the description text -
Description Font Color.
Change font color of description text
Ratings Styles
-
Show Ratings Count.
Show the number of users who have liked the image -
Ratings Background Color
Choose the color of rating icons’ background -
Ratings Background Color Opacity.
Specify the opacity level of rating icon background -
Ratings Font Color.
Pick up a color for the font on rating icon -
Ratings Rated Font Color.
Choose icon font color for those images which are rated -
Like/Dislike Icon Color.
Choose icon color for like and dislike buttons -
Like/Dislike Rated Icon Color.
Choose the icon color when the like/or dislike is submitted -
Heart Icon Color.
Decide the color of heart icon -
Heart Rated Icon Color.
Decide the color of heart color which is submitted
Content Slider
Slider Container
-
Main Image Width in px.
Change the width size of the picture within the slider container -
Slider Background Color.
Set the color of the background in the slider container -
Arrow Icons Style.
Choose the style of sliding arrows -
Show Separator Lines.
Select to have separational lined between text or not
Title
-
Title Font Size in px.
Adjust the size of the title text -
Title Font Color.
Adjust the color of the title text in popup
Description
-
Show Description.
Select this option to allow the description in the slider -
Description Font Size in px.
Specify size of the description text -
Description Font Color.
Change font color of description text
Link Button
-
Show Link Button On Element.
Select this option to have a button on element which will redirect to URL of the image -
Link Button Text.
Link Button Text. -
Link Button Font Size in px.
Change the text-size on link button in pixels -
Link Button Font Color.
Change text color on the link button -
Link Button Font Hover Color.
Change hover font color on the button which redirects to the link -
Link Button Background Color.
Specify background color on the button which redirects to the link -
Link Button Background Hover Color.
Specify on hover background color of the button which redirects to the link
Ratings Styles
-
Show Ratings Count.
Show the number of users who have liked the image -
Ratings Background Color.
Choose the color of rating icons’ background -
Ratings Background Color Opacity.
Specify the opacity level of rating icon background -
Ratings Font Color.
Pick up a color for the font on rating icon -
Ratings Rated Font Color.
Choose icon font color for those images which are rated -
Like/Dislike Icon Color.
Choose icon color for like and dislike buttons -
Like/Dislike Rated Icon Color.
Choose the icon color when the like/or dislike issubmitted -
Heart Icon Color.
Decide the color of heart icon -
Heart Rated Icon Color.
Decide the color of heart color which is submitted
Lightbox Gallery
Content Styles
-
Show Content In The Center.
Move the gallery in the center of theme container
Image
-
Image Width in px.
The only size option in this view is width, you need to adjust it and then height will be proportionally taken -
Image Border Width in px.
Choose the border width for the elements -
Image Border Color.
Choose some color for the border -
Border Radius.
Change the radius of corners
Title
-
Title Font Size in px.
Adjust the size of the title text -
Title Font Color.
Adjust the color of the title text -
Title Font Hover Color.
Adjust the color of the title text on hover -
Title Background Color.
Adjust the background color of the title -
Title Background Opacity.
Background of coming up title may be adjusted in opacity level
Load More Styles
-
Load More Text.
You may change the text on the Load More button -
Load More Font Size in px.
The size of the letters in pixels depends on this options -
Load More Font Color.
Change the color of the button which comes with Load More function -
Load More Font Hover Color.
Change color of the text on load more button while you hover the mouse point on it. -
Load More Button Color.
Specify the color of the button of load more function -
Load More Background Hover Color.
Specify the button color of load more function on hover -
Load More Position.
Change the position of load more button -
Loading Animation.
Decide the animation type of load more function
Pagination Styles
-
Pagination Font Size in px.
Specify pagination numbers size -
Pagination Font Color.
Specify the color of pagination numbers -
Pagination Icons Size in px.
Change the size of pagination right and left arrow icons -
Pagination Icons Color.
Change the color of pagination right and left arrow icons -
Pagination Position.
Choose the position of pagination icons
Ratings Styles
-
Show Ratings Count.
Show the number of users who have liked the image -
Ratings Background Color.
Choose the color of rating icons’ background -
Ratings Background Color Opacity.
Specify the opacity level of rating icon background -
Ratings Font Color.
Pick up a color for the font on rating icon -
Ratings Rated Font Color.
Choose icon font color for those images which are rated -
Like/Dislike Icon Color.
Choose icon color for like and dislike buttons -
Like/Dislike Rated Icon Color.
Choose the icon color when the like/or dislike issubmitted -
Heart Icon Color.
Decide the color of heart icon -
Heart Rated Icon Color.
Decide the color of heart color which is submitted
Slider Gallery
Arrows
-
Show Arrows.
Select to show the arrows on slider -
Arrows Styles.
Choose one among 22 available arrow styles
Thumbnails
-
Show Thumbnails.
Select to show the thumbnails of other images in slider, or not -
Position.
Decide the position of thumbnails on the slider
Bullets
-
Show Bullets.
Select to have navigation bullets on the slider -
Position.
Change the position of bullets on the top or bottom -
Bullets Background.
Change the color of the bullets background -
Bullets Background on Hover.
Specify the color of bullets while hove a mouse -
Orientation.
Make them horizontal or vertical -
Rows.
Choose how many rows the bullets should be -
Inline Space Horizontal.
Space between each bullet in horizontal inline -
Inline Space Vertical.
Space between each bullet in vertical inline
Title
-
Hover Color.
Adjust the color of the title text on hover -
Opacity.
Background of title may be adjusted in opacity level -
Border (px).
Background may have border at every width size -
Border Color.
Adjust the color for the border -
Border Radius.
Adjust the corner radius for the border -
Font Size.
Adjust the size of the title text -
Font Color.
Adjust the color of the title text -
Background Color.
Adjust the background color of the title text
Description
-
Color.
Adjust the color of the description text -
Hover Color.
Adjust the color of the description text on hover -
Opacity.
Background of title may be adjusted in opacity level -
Border (px).
Background may have border at every width size -
Border Color.
Adjust the color for the border -
Border Radius.
Adjust the corner radius for the border -
Font Size.
Adjust the size of the title text -
Background Color.
Adjust the background color of the title text
Thumbnails View
Container Style
-
Box padding in px.
Between each element you may configure padding size -
Box background Color.
You may have colored background under the gallery -
Box Use shadow.
Select to allow box have the shadow -
Box Has background.
Select to have or remove the box of background under the gallery
Title
-
Title Font Size in px.
Adjust the size of the title text -
Title Font Color.
Adjust the color of the title text -
Title Font Hover Color.
Adjust the color of the title text on hover -
Title Background Color.
Adjust the background color of the title -
Title Background Opacity.
Background of coming up title may be adjusted in opacity level
Load More Styles
-
Load More Text.
You may change the text on the Load More button -
Load More Font Size in px.
The size of the letters in pixels depends on this options -
Load More Font Color.
Change the color of the button which comes with Load More function -
Load More Font Hover Color.
Change color of the text on load more button while you hover the mouse point on it. -
Load More Button Color.
Specify the color of the button of load more function -
Load More Background Hover Color.
Specify the button color of load more function on hover -
Load More Position.
Change the position of load more button -
Loading Animation.
Decide the animation type of load more function
Image
-
Image Behaviour
On “Natural” this option will fit the image in element box without stretching it -
Image Width in px.
Change the width size of the picture -
Image Height in px.
Change the height size of the picture -
Image Border Width in px.
Set the width of the borders around the image thumbnail -
Image Border Color.
Set the color of the borders around image thumbnail -
Border Radius in px.
Set corner radius of the borders around thumbnail -
Margin Image.
Decide margin size between thumbnails
Pagination Styles
-
Pagination Font Size in px.
Specify pagination numbers size -
Pagination Font Color.
Specify the color of pagination numbers -
Pagination Icons Size in px.
Change the size of pagination right and left arrow icons -
Pagination Icons Color.
Change the color of pagination right and left arrow icons -
Pagination Position.
Choose the position of pagination icons
Ratings Styles
-
Show Ratings Count.
Show the number of users who have liked the image -
Ratings Background Color.
Choose the color of rating icons’ background -
Ratings Background Color Opacity.
Specify the opacity level of rating icon background -
Ratings Font Color.
Pick up a color for the font on rating icon -
Ratings Rated Font Color.
Choose icon font color for those images which are rated -
Like/Dislike Icon Color.
Choose icon color for like and dislike buttons -
Like/Dislike Rated Icon Color.
Choose the icon color when the like/or dislike issubmitted -
Heart Icon Color.
Decide the color of heart icon -
Heart Rated Icon Color.
Decide the color of heart color which is submitted
Justified Gallery
Element Styles
-
Image height in px.
Adjust the height of elements in pixels -
Image margin in px.
Adjust the width size of elements in pixels -
Image Justify.
This option will adjust size of images in most optimal way to fill the 100% width of the container -
Image Randomize.
Select this option to load images randomly on every page loading -
Opening With Animation.
Select to make images appear with animation -
Opening Animation Speed.
While the above option is selected you may choose the animation speed
Load More Styles
-
Load More Text.
You may change the text on the Load More button -
Load More Font Size in px.
The size of the letters in pixels depends on this options -
Load More Font Color.
Change the color of the button which comes with Load More function -
Load More Font Hover Color.
Change color of the text on load more button while you hover the mouse point on it. -
Load More Button Color.
Specify the color of the button of load more function -
Load More Background Hover Color.
Specify the button color of load more function on hover -
Load More Position.
Change the position of load more button -
Loading Animation.
Decide the animation type of load more function
Element Title
-
Show Title.
Select to have title shown on the hover -
Element Title Font Size.
Configure the size of element title -
Element Title Font Color.
Configure the color of element title -
Element Title Background Color.
Configure the color of title background -
Elements Title Overlay Opacity.
Configure the transparency of coming overlay
Pagination Styles
-
Pagination Font Size in px.
Specify pagination numbers size -
Pagination Font Color.
Specify the color of pagination numbers -
Pagination Icons Size in px.
Change the size of pagination right and left arrow icons -
Pagination Icons Color.
Change the color of pagination right and left arrow icons -
Pagination Position.
Choose the position of pagination icons
Ratings Styles
-
Show Ratings Count.
Show the number of users who have liked the image -
Ratings Background Color.
Choose the color of rating icons’ background -
Ratings Background Color Opacity.
Specify the opacity level of rating icon background -
Ratings Font Color.
Pick up a color for the font on rating icon -
Ratings Rated Font Color.
Choose icon font color for those images which are rated -
Like/Dislike Icon Color.
Choose icon color for like and dislike buttons -
Like/Dislike Rated Icon Color.
Choose the icon color when the like/or dislike is submitted -
Heart Icon Color
Decide the color of heart icon -
Heart Rated Icon Color.
Decide the color of heart color which is submitted
Masonry View
Content Styles
-
Show Content In The Center.
Move the gallery in the center of theme container
Title Styles
-
Show Title.
Select to show the tile or not -
Title Font Size in px.
Adjust the size of the title tex -
Title Font Color.
Adjust the color of the title text -
Title Font Hover Color.
Adjust the color of the title text on hover -
Title Background Color.
Adjust the background color of the title -
Title Background Opacity.
Background of coming up title may be adjusted in opacity level
Image Styles
-
Image Width in px.
The only size option in this view is width, you need to adjust it and then height will be proportionally taken -
Image Border Width in px.
Choose the border width for the elements -
Image Border Color.
Choose some color for the border -
Border Radius.
Change the radius of corners
Ratings Styles
-
Show Ratings Count.
Show the number of users who have liked the image -
Ratings Background Color
Choose the color of rating icons’ background -
Ratings Background Color Opacity.
Specify the opacity level of rating icon background -
Ratings Font Color.
Pick up a color for the font on rating icon -
Ratings Rated Font Color.
Choose icon font color for those images which are rated -
Like/Dislike Icon Color.
Choose icon color for like and dislike buttons -
Like/Dislike Rated Icon Color.
Choose the icon color when the like/or dislike is submitted -
Heart Icon Color.
Decide the color of heart icon -
Heart Rated Icon Color.
Decide the color of heart color which is submitted
Load More Styles
-
Load More Text.
You may change the text on the Load More button -
Load More Font Size in px.
The size of the letters in pixels depends on this options -
Load More Font Color.
Change the color of the button which comes with Load More function -
Load More Font Hover Color.
Change color of the text on load more button while you hover the mouse point on it -
Load More Button Color.
Specify the color of the button of load more function -
Load More Background Hover Color.
Specify the button color of load more function on hover -
Load More Position.
Change the position of load more button -
Loading Animation.
Decide the animation type of load more function
Pagination Styles
-
Pagination Font Size in px.
Specify pagination numbers size -
Pagination Font Color.
Specify the color of pagination numbers -
Pagination Icons Size in px.
Change the size of pagination right and left arrow icons -
Pagination Icons Color.
Change the color of pagination right and left arrow icons -
Pagination Position.
Choose the position of pagination icons
Lightbox Options
Internationalization
-
Lightbox style.
Pick up one among 4 available lightbox styles -
Slide Animation Type.
Sliding image in lightbox may have 9 different animation, choose one of them -
Speed.
Decide the speed of sliding -
Slider Animation.
Select to have sliding animation or not -
Overlay Close.
Select to be able to close the lightbox by clicking on any place of overlay -
Loop.
Loop option will slide to the first image after the last image -
Esc Key close.
Select the option to close the lightbox with Esc button -
Keyboard navigation.
Slider through images with right and left buttons on keyboard -
Arrows.
Select to have navigating arrows in the lightbox -
Download.
Select to have image download ability or not -
Default Title.
If your image doesn’t have it’s own title then it may display default title text
Slideshow
-
Slideshow.
Select to enable slideshow ability in lightbox -
Slideshow auto.
Select to start the slideshow automatically -
Slideshow Speed.
Choose the level of speed for slideshow
Dimensions
-
Popup size fix.
Select to have fixed size for the lightbox or allow it vary due to the image dimensions
