Photo Gallery is advanced solution for WordPress users. 8 advanced and customizable views will help to create beautiful content in minutes.
Free, easy, Huge-IT is an ideal solution for creating site-portfolio for photographers. It is allowing beautiful demonstration of works for designers, showing products and services, and others.
Plugin is a modern and necessary tool to build a photo albums in a web page. Huge-IT new Photo Gallery is full of effects which help to attract the attention of visitors and just give elegancy to your site. It is a modern solution with a pure coding standards and is UI/UX friendly.
While searching for the right view for you photo collection, install our plugin and find 8 beautiful and stunning views which include: Content Popup view, Content Slider view, Lightbox, Slider, Thumbnails view, Justified view, Masonry and Mosaic views.
Details about the views:
- Content Popup view. This view is made for the gallery which has a content text. When you move the mouse over the picture gets a magnifying glass on it, and when clicked opens a full popup with a large version of the image, title and description text next to it, also a “View More” button with link , if needed - in the popup, you can scroll the image of other projects.
- Content Slider view. Content slider view doesn’t slide only image it also slides the title and description of the image which is placed next to it. The content slider also may have a View More button with a special custom page link. Images of the content slider are displayed in the new lightbox, once clicked.
- Lightbox view. For those who want to beautifully present photos in different sizes we offer lightbox view. It is a natural decomposition of photos on a page with it’s original dimensions. It displays the title with mouse hover and redirects to URL on title click. Click on the photo itself opens up a completely new popup with cool functionality.
- Slider. Using a slider is always nice if you give preference to sliders, this view is specially for you. Add layers with text content straight on the slider and decorate the slideshow with many beautiful effects
- Thumbnails view. Showing your masterpiece images in small thumbnails is very compact and looks great. Visitor can press on thumbnail and increase the photo in the lightbox to list through them. Hovering the mouse on thumbnail brings a translucent overlay with title and additional small text.
Justified. Justified view of the plugin allows you to showcase your images and videos with your created gallery next to each other without padding between them, filling the container. The size of images may vary and be random in position.
- Masonry view. Masonry is very popular layout. It place the elements in most optimal position based on free vertical space, sort of like a mason fitting stones in a wall. You could have seen it in use all over the Internet.
- Mosaic view. Mosaic view arranges photos within a flat rectangle layout, automatically picking sizes. It usually neatly fills the entire width of the container, whereas in comparison with Masonry view filling the entire space is not necessarily.
Usage of the plugin is super easy. Ease of use is achieved by using a very minimum number of components, only those required for a particular action and modern coding language. These will help to get rid of confusion and concentrate on the basic functions of your site.
Backend options are made in minimalistic design which is loved by many developers and users. The plugin provides rating buttons to help visitors leave their impressions by liking, disliking the photos. To save more time for loading you may set pagination or load more functionality. As a lightbox tool you may find a new and modern designed lightbox which has several types and many configuration options. By picking up the view make sure it satisfy all your needs and has the right functionality, as every view is different and unique
Main Features
Unlimited Amount Of Galleries And Images
Allows to add unlimited galleries with photos and showcase them on pages, as well as posts. There is no limit in Lite version. The plugin comes as very light plugin and you are free to add a lot of images and photos.
Fully Responsive
Plugin is fully responsive and appears beautiful on mobile devices. You may enjoy scrolling through hoto galleries and images and view them on finger-click. Galleries and images appear to be mobile friendly.
Load More And Pagination
With plugin you may add load more functionality to your galleries and images. Options allow you either add pagination, so that you can click NEXT and PREVIOUS buttons when going through images or use a load more button , so that next collection of galleries would pop below.
Title And Description
Allows users to add both titles and descriptions. Descriptions appear to be more detailed.
The most unique feature of this plugin appears to be its collection of beautiful views. This plugin comes with 8 views , that meet all the modern website design requirements. The good news is that all these views are available in Lite version of the plugin.
Hundreds Of Design Options
We constantly update the plugin and add new features and options in order to help users to expand the functionality.
YouTube and Vimeo Posts
Allows to showcase videos from YouTube and Vimeo too. This is a great idea to add some spice with detailed video instructions, for example.
Lightbox Popup With Many Options
This plugin used to have a basic lightbox , which is still available in the plugin under the name OLD LIGHTBOX. But we have made a NEW LIGHTBOX , which comes by default. This is really a nice and advanced tool for WordPress Photo Gallery users. Why? Because it has a lot of options and functionality to offer and some options are available on this plugin only. The list is really big, starting from big collection of top-social sharing icons and buttons and finishing with watermark and advertisement solutions.
Friendly UI/UX Coding Standards
The Team Huge-IT helps users by bringing plugins that are being tested multiple times by different users. We test the plugins on different devices and programs. This plugin is meeting the most recent UX/UI standards for sure.
Minimalistic backend design
Minimalist back-end and admin panel of plugin appear to be very simple, in order to help users ti find and navigate through options more easily.
If you think, that you found a bug in our
WordPress Photo Gallery plugin or have any question contact us at
info@huge-it.com
Uploading in WordPress Dashboard
- First download the ZIP file from Wordpress website
- Log in to your website administrator panel
- Go to the 'Add New' in the plugins dashboard, click “Upload Plugin”
- Upload WordPress Photo Gallery ZIP file by choosing it from your computer
- Click Install Now button
- Then click Activate Plugin button.
- You can see the Photo Gallery plugin installed on Wordpress left menu.
Using The WordPress Plugins Dashboard
- Go to the 'Add New' in the plugins dashboard
- Search for 'Photo Gallery Huge-IT'
- Click Install Now button
- Then click Activate Plugin button
- You can see the plugin installed on Wordpress left menu
Using FTP
- Download the ZIP file from Wordpress website
- Extract the photo-gallery directory to your computer
- Upload the photo-gallery directory to the /wp-content/plugins/ directory
- Activate the plugin in the Plugin dashboard
- You can see the plugin installed on Wordpress left menu
Step 1 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
-
- Instal 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 click
-
- Activate
- 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.
Step 2 Configuration and Usage
- 1.2 On the left toolbar you will find the plugi WP. enter in Galleries section and start creating a.
- 2.2 Click on Add New to build your gallery
- 2.3 On the right sidebar fill the fields:
- Name. Name your gallery, this title will be seen only for you
- Select View. Choose ofe among 8 availible types
- Displaying Content. Most of the 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.
- 2.4 Click on Add Video to have a video. This option is for premium version, and allows to add links from Youtube or Vimeo
- 2.5 Click on Add Image button to open media library from where you choose the image to add. 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 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
Step 3 - General Options
Every view has it’s options. Choose the view you use, and under that tab make beautiful changes playing with plenty options.
3.1 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
- Element Image Height in px. Adjust height size of the elements
- 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 issubmitted
- Heart Icon Color. Decide the color of heart icon
- Heart Rated Icon Color. Decide the color of heart color which is submitted
3.2 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. 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
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
3.3 Lightbox
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
3.4 Slider
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
- Color. Adjust the color of the title text
- 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. 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 description text
- Background Color. Adjust the color of the description
3.5 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
- Box Use shadowdow. Select to allow box have the shadow
- Box Has background. Select to have or remove the box of background under
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
3.6 Justified
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 issubmitted
- Heart Icon Color. Decide the color of heart icon
- Heart Rated Icon Color. Decide the color of heart color which is submitted
3.7 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 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
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 issubmitted
- 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
Step 4 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.