Joomla Gallery User Manual

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