Joomla Gallery User Manual – Huge-IT

Gallery Joomla

Adding process of Huge-IT Image Gallery Extension

PRO version should be installed straight on the FREE version without deleting it, in order you don't lose your changes. For installation of Image Gallery go: Extensions > extensions manager > choose the zip file > upload and install
Adding-process-of-Huge-IT-Gallery-Extension

Create Component

Menu > main menu> choose one of your menu items> select our extension as menu item type>choose the gallery from the list of created galleries
create-component

Create Article with plugin

Extensions > Plugins > find our Image Gallery extension > and activate it Now you can use it as article item. While creating an article use shortcode. [huge_it_gallery id="id"] Copy/paste the shortcode into your article
create-article-with-plugin

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

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
instaling-module

Inserting the Image Gallery Extension

Menu > Main Menu > "page" > Select > Sliders > choose our Slider > Save
dummy image

General option of Image Gallery Extension

Gallery/Content-popup

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 for the overlay on the video thumbnail
  • Zoom Image Style.
    Pick up a color for zoom icon, white or black
popup-Content-Styles

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-Styles

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
Slider-Description

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-Title

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
lement-Link-Button

Popup Title

  • Popup Title Font Size.
    Decide the size for title in popup
  • Popup Title Font Color.
    Give color to title in popup
popup-title

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
popup-link-button

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
Content-Container

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
Content-Link-Button

Title

  • Title Font Size.
    Give a size to title in slider
  • Title Font Color.
    Give some specific color for title in slider
Content-Title

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
Content-Description

Lightbox Gallery

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
Lightbox-image

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
Lightbox-title

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
slider-title

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
Slider-Slider

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
Slider-Description

Navigation

  • Show Navigation Arrows.
    Select to be able to see navigation arrows
  • Navigation Dots Position / Hide Dots.
    Adjust where to place dots, or vanish them from slider
  • Navigation Dots Color.
    Give color to navigation dots in general
  • Navigation Active Dot Color.
    Give color to navigation dot, which is active
slider-navigation

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
Thumbnails-Image

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
Thumbnails-Container-Style

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
Thumbnails-Title

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
Justified-Element-Styles

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
Justified-Title