3.3

JOOMLA EXTENSIONS | gallery


User Manual

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