Step 1. Adding a Gallery

To add a new gallery go to Huge-IT Gallery > Add New Gallery

• Add Images. Use the standard WordPress Image uploader to add an image from media library or upload from computer.
• Title. Add a title to your image.
• Description. give some information or describe the topic.
• URL. Provide some link of your post. Click to open in new tab or don’t click to open in the same tab.

Or

• Add videos. Use the standard WordPress video uploader to add a video from Youtube or Vimeo. Just insert a link.
• Title. Add a title to your videos.
• Description. Give some information or describe the topic.
• URL. Provide some link of your post. Click to open in new tab or don’t click to open in the same tab.

Inserting Created Image Gallery.

When you finish creating your Image Gallery. Find on the right site 3 blocks.

1. Views. Here, among 7 views, mentioned above, chose the view for your Image Gallery.
2. Usage. Here you can find a shortcode of your Image Gallery. You can Copy&Paste this shortcode wherever you need in your posts or page, where you want your slider be. Or you can add this code automatically, when posting your slider there is a button to add slider, pressing on it the shortcode inserts into your post.
3. Template Include. This code made to be inserted into your template, it makes the inserting slider easy for using in custom location within theme.

Step 2. General Options of Image Gallery

In this section you can modify your image gallery in more details. That will change the features of each view you choose.

2.1 Gallery/Content-popup.

Element Styles

• Element Width. Sets the width of posted image / video
• Element Height. Sets the high of posted image / video
• Element Border Width. Set the border with of the element
• Element Border Color. Choose the color for the border
• Element’s Image Overlay Color. Choose a color for the overlay on the image / video while hovering
• Element’s Image Overlay Transparency. Set the level of transparency of the image / video overlay
• Zoom Image Style. Changes the color of zoom icon

Popup Styles

• Popup Background Color. Change the background color of popup
• Popup Overlay Color.Choose. the color for popup overlay
• Popup Overlay Transparency. Set the level of background transparency
• Popup Close Button Style. Change the color of “X” icon
• Show Separator Lines. tick to show separation lines between title and text

Popup Description

• Show Description. Tick to show the description of the image
• Description Font Size. Choose the size of description font
• Description Font Color. Change the color of description text

Element Title

• Element Title Font Size. Change the size of title font
• Element Title Background Color. Choose the color of title background
• Element Title Font Color. Change the color of title

Element Link Button

• Show Link Button On Element. Tick to show “View More” button on the image
• Link Button Text. Change content of the “View More” text
• Link Button Font Size.change the size of link button
• Link Button Font Color. Change the color of link font
• Link Button Background Color. choose color for link background

Popup Title

• Popup Title Font Size. Choose title font size in popup
• Popup Title Font Color. Choose Title font color in popup

Popup Link Button

• Show Link Button. Tick to show link button in popup
• Link Button Text. Change the text of link button in popup
• Link Button Font Size. Change font size of link button in popup
• Link Button Font Color. Change color of link button in popup
• Link Button Font Hover Color. Choose color of link button when hover on it
• Link Button Background Color. Set background color of the link button in popup
• Link Button Background Hover Color. Set background color of the link as you hover on it

2.2 Content slider

Slider

• Main Image Width. Set the size of the image
• Slider Background Color. Set the color of background
• Arrow Icons Style. Set black or white color of arrows in slider
• Show Separator Lines. Click to show the lines between text, title, and link

Title

• Title Font Size. Set the font size of the title
• Title Font Color. Set the color of the font

Description

• Show Description. Click to show the description of the text
• Description Font Size. Set the font size of description
• Description Font Color. Set the color of font in description

Link Button

• Show Link Button. Choose whether to display Show More button.
• Link Button Text. Define the text of the Show More button.
• Link Button Font Size. Set the font size for the Show More button.
• Link Button Font Color. Select the font color for the Show More button.
• Link Button Font Hover Color. Select the font color for the Show More button when hovered.
• Link Button Background Color. Select the background color for the Show More button.
• Link Button Background Hover Color. Select the background color for the Show More button when hovered.

2.3 Ligthtbox Gallery

Image / Video

• Image Width. Set the size of the image / video
• Image Border Width. Set the width of borders
• Image Border Color. Choose the color for border
• Border Radius. Choose the radius of border corners

Title

• Title Font Size. Set the font size of the title
• Title Font Color. Set the color of the title
• Title Font Hover Color. Set the color of the title while hovering on it
• Title Background Color. Choose title background color
• Title Background Transparency. Choose the level of title background transparancy

2.4 Slider

Title

• Title Width. Choose the width for title box
• Title Has Margin. Click if you need the title to have
• Title Font Size. Set the font size of the title
• Title Text Color. Set the color of the title
• Title Text Align. Set the location of the title in the box
• Title Background Transparency. Set the level of background transparency
• Title Background Color. Choose the color of title background
• Title Border Size. Set the size of the title border
• Title Border Color. Choose the color for the title border
• Title Border Radius. Set the radius for border corners
• Title Position. Choose the position for the title

Slideshow

• Image Behaviour. Choose resized if you need your images have the size of the slider
• Slider Background Color. Choose the color of background while images has its natural size
• Slideshow Border Size. Set the size of the slider border.
• Slideshow Border Color. Choose the color for the slider border
• Slideshow Border radius Choose the radius for slider border

Description

• Description Has Margin. Choose if description need to have margin
• Description Font Size. Set the font size for description
• Description Text Color. Set text color for description
• Description Text Align. Set the location of the description in the box
• Description Background Transparency. Set the level of transparency for background of description
• Description Background Color. Choose the color for description background
• Description Border Size. Set the size for the border in description
• Description Border Color. Set the color of description border
• Description Border Radius . Set the radius of the description box corners
• Description Position. Set the position of description on image

Navigation

• Show Navigation Arrows. Click to show navigation arrows
• Navigation Dots Position / Hide Dots. Choose the location for dots, or choose to remove them
• Navigation Dots Color. choose the color for navigation dots
• Navigation Active Dot Color. Choose the color of moving dots

2.5 Thumbnails View

Image / Video

• Image Behavior. Click to give your image / video a behavior
• Image Width. Set the width of thumbs.
• Image Height. Set the height of thumbs.
• Image Border Width. Set the width of the border between thumbs.
• Image Border Color. Set the color of the border between thumbs.
• Border Radius. Set the radius of the border.
• Margin Image. Set the distance between each thumb

Title

• Title Font Size. Set the size of the text font.
• Title Font Color. Choose the color of text.
• Overlay Background Color. Choose the overlay color of the title.
• Title Background Transparency. Set the level of background transparency.

Box style

• Box Has background. Click to have background for thumbs.
• Box background. Set the Color of surrounded box.
• Box Use shadow. Click if you need to have shadows in the box.
• Box padding. Set the distance between the box and image / video.

2.6 Justified View

Element Styles

• Image height. Set the height of the images/videos in tape
• Image margin. Set the distance between each image/video in the tape.
• Image Justify. Select to make the width of all image/video up to 100% in container. So all them together will fit the container of your theme, and tick off to bring each of them with it’s natural size.
• Image Randomize. Select to show your images randomly.
• Opening With Animation. Choose to see the tape of images/videos appearing animated.
• Opening Animation Speed. Select the speed of the animation.

Element Title

• Show Title. Choose to show the title or not.
• Element Title Font Size. Choose the font size for the title of the image/video.
• Element Title Font Color. Select preferable colour for the title of the image/video.
• Element Title Background Color. Choose the colour of title background.
• Element’s Title Overlay Transparency. Select the level of transparency for the title overlay.

2.7 Block Styles Gallery

General Styles

• Width. Change the width size of the block.
• Content Position. Decide where to place the content within the page.
• Image Position. choose, where to place your image relatively to title and description text.
• Space Between Containers. Set the space between each project.
• Separator Line Style. Choose a style for separation line between each item of the gallery.
• Separator Line Size. Choose the size for the separation line, which divides gallery among projects.
• Separator Line Color. Pick up a color for separational line.
• Content Per Page. Decide how many images/videos you need to show per page.
• Pagination Font Size. Choose font size for pagination numbers.
• Pagination Font Color. Change color for pagination font.
• Pagination Icons Size. Decide the size of the icons on pagination.
• Pagination Icons Color. Change the color of pagination icons.
• Pagination Position. Decide where to place the navigation of pages

Title Styles

• Show Title. Select, if you need to display the title of the project.
• Font Size. Choose title font size .
• Font Color. Decide font color for the title.
• Background Color. title has background, pick up a color for it.
• Background Transparency. Adjust title background Transparency level.
• Text Align. Choose text align for title.

Description Styles

• Show Description. Select whether to see the description text or not.
• Font Size. Change the font size for the description.
• Font Color. Pick up font color for description text.
• Background Color. Change color for description background.
• Background Transparency. Adjust description background transparency level.
• Text Align. Chose the text align for description.