Stage 1. Addition of Huge-IT Gallery Extension
For installation of slider go: Extensions > extensions manager > choose the zip file > upload > module manager > activate
Stage 2. Use of Gallery Module
Gallery module allows to manage gallery within your website: place in in different positions within page, select the pages where to display and where not display.
2.1 Installing module zip file
Extensions > Module Manager > Activate Huge-IT Image Gallery > Choose slider from list and Position within specific theme (on right panel) > Menu assignment > Choose where you need to display it.
Stage 3. Inserting the Image Gallery Extension
Menu > Main Menu > “page” > Select > Sliders > choose our Slider > Save
Stage 4. General option of Image Gallery Extension
4.1 Gallery/Content-popup.
Content Styles
- Show Content In The Center. Move the gallery to the center of the theme container
Element Styles
- Element Width. Give width to image box while popup closed
- Element Height. Give height to image box while popup closed
- Element Border Width. Adjust width size of element’s border
- Element Border Color. Give a color to the border of element
- Element’s Image Overlay Color. Choose another color for the overlay on the image box while hovering on it
- Element’s Image Overlay Transparency. Set the extent of transparency of the image overlay
- Zoom Image Style. Pick up a color for zoom, white or black
Popup Styles
- Popup Background Color. Give a specific color to popup background area
- Popup Overlay Color. Give overlay color to popup
- Popup Overlay Transparency. Decide extent of transparency for popup overlay
- Popup Close Button Style. Choose white or black color for close button
- Show Separator Lines. Select to see separation lines in popup, which separates title, description and image
Popup Description
- Show Description. Select to see description of the image
- Description Font Size. Choose size extent for description font
- Description Font Color. Give some specific color to description text
Element Title
- Element Title Font Size. Decide the dimension of the title on element (thumbnail)
- Element Title Background Color. Give some specific color to title background on element
- Element Title Font Color. Give color to title on element (thumbnail)
Element Link Button
- Show Link Button On Element. Select to see link button on the element
- Link Button Text. Write some other phrase instead of “view more” on element
- Link Button Font Size. Decide size extent for link button text on element
- Link Button Font Color. Give some specific color to link text on element
- Link Button Background Color. Give color to link button background on element
Popup Title
- Popup Title Font Size. Decide the size for title in popup
- Popup Title Font Color. Give color to title in popup
Popup Link Button
- Show Link Button. Select to see link button in popup
- Link Button Text. Write any other phrase instead of “view more” in popup
- Link Button Font Size. Decide size extent for link button text in popup
- Link Button Font Color. Give some specific color to link text in popup
- Link Button Font Hover Color. Give some specific color to link text in popup while hover on it
- Link Button Background Color. Give color to link button background in popup
- Link Button Background Hover Color. Give color to link button background in popup while hover on it
4.2 Content Slider
Slider Container
- Main Image Width. Choose size for image/video
- Slider Background Color. Give some specific color to slider’s back space
- Arrow Icons Style. Choose color: black or white for arrows in slider
- Show Separator Lines. Select to see separation lines between description, title, and link
Link Button
- Show Link Button. Select to see link button in slider
- Link Button Text. Write new text instead of “view more” in slider
- Link Button Font Size. Decide size extent for link button text
- Link Button Font Color. Give some specific color to link text
- Link Button Font Hover Color. Give some specific color to link text in slider while hover on it
- Link Button Background Color. Give color to link button background
- Link Button Background Hover Color. Give color to link button background in slider while hover on it
Title
- Title Font Size. Give a size to title in slider
- Title Font Color. Give some specific color for title in slider
Description
- Show Description. Select to see the description of the image
- Description Font Size. Decide size for description font
- Description Font Color. Give some specific color to description font
4.3 Ligthtbox Gallery
Content Styles
- Show Content In The Center. move the gallery in the middle of the theme container
Image
- Image Width. Adjust width of the images
- Image Border Width. Set borders and adjust their width size
- Image Border Color. Give some specific color to borders of the images
- Border Radius. Set radius extent on image borders
Title
- Title Font Size. Adjust size of the title
- Title Font Color. Give color to tile font
- Title Font Hover Color. Give another color to title, which will change while hover on it
- Title Background Color. Give some specific color to title background area
- Title Background Transparency. Decide the extent of title background transparency
4.4 Slider
Title
- Title Width. Decide title box width, laying on slider
- Title Has Margin. Select to have margin for title
- Title Font Size. Decide font size extent on title
- Title Text Color. Give specific color to your title
- Title Text Align. Set the position of title within title box
- Title Background Transparency. Give extent of transparency on title background area
- Title Background Color. Give specific color to title background area
- Title Border Size. Select to have and decide border size of the title
- Title Border Color. Give specific color to title border
- Title Border Radius. Change the radius extent for title border’s corners
- Title Position. Decide where to place title within slider
Slideshow
- Image Behaviour. In “natural” mode you can see image with actual dimension
- Slider Background Color. The extra space color (in natural mode)
- Slideshow Border Size. Select to have borders, and decide their size
- Slideshow Border Color. Give specific color to slider borders
- Slideshow Border radius. Decide radius extent for slider border’s corners
Description
- Description Has Margin. Select to have margin for description
- Description Font Size. Decide size of the description font
- Description Text Color. Give specific color to description
- Description Text Align. Decide the position of description within description box
- Description Background Transparency. Adjust extent of transparency for description background area
- Description Background Color. Give specific color to description background
- Description Border Size. Select to have and adjust size of the description borders
- Description Border Color. Give specific color to description borders
- Description Border Radius . Adjust radius degree for description borders
- Description Position. Decide where to put the description within slider
Navigation
- Image Behavior. Select to see the whole image size, unselection will cut the image
- Image Width. Decide the width for images/videos
- Image Height. decide the height of images/videos
- Image Border Width. Adjust to have and customize the width of image/video borders
- Image Border Color. Give some color to image/video borders
- Border Radius. Set radius extent for borders
- Margin Image. Adjust margin value of them images
Container Style
- Box padding. Decide the size of container box padding
- Box background. Set some color on box background
- Box Use shadow. Select to have shadow on container box
- Box Has background. Decide if you need your box to have background
Title
- Title Font Size. Choose dimension of the title font
- Title Font Color. Define font color for title on image/video
- Overlay Background Color. Set any color on background overlay
- Title Background Transparency. Set title background transparency extent in percents
- Link Text. Write some new text instead of “view picture” button
4.5 Thumbnails View
Image
- Image Behavior. Select to see the whole image size, unselection will cut the image
- Image Width. Decide the width for images/videos
- Image Height. decide the height of images/videos
- Image Border Width. Adjust to have and customize the width of image/video borders
- Image Border Color. Give some color to image/video borders
- Border Radius. Set radius extent for borders
- Margin Image. Adjust margin value of them images
Container Style
- Box padding. Decide the size of container box padding
- Box background. Set some color on box background
- Box Use shadow. Select to have shadow on container box
- Box Has background. Decide if you need your box to have background
Title
- Title Font Size. Choose dimension of the title font
- Title Font Color. Define font color for title on image/video
- Overlay Background Color. Set any color on background overlay
- Link Text. Write some new text instead of “view picture” button
4.6 Justified View
Element Styles
- Image height. Specify the height of images/videos within the view
- Image margin. Decide margin between images/videos
- Image Justify. Select and get width level up to the 100% of theme container. Unselect to see them all in actual size
- Image Randomize. Select display all images/videos randomly on frontend
- Opening With Animation. Select to appear the gallery animated
- Opening Animation Speed. Decide the time of animation speed
- Element Title
- Show Title. Selection will show title on image/video
- Element Title Font Size. Adjust size level for title font
- Element Title Font Color. Define a color for title
- Element Title Background Color. Color for title background area
- Element’s Title Overlay Transparency. Choose the extent of transparency on imposition