"ARI Smart Content - Media Gallery" module shows a responsive image gallery in module positions. The module can be enabled/disabled and configured on "Extensions → Module Manager" page on Joomla! backend. The module offers the following parameters:
- Images is a main and required parameter. It is used to select the data source which will be used to select images which will be shown into the gallery. If a data source is not selected, the module will show nothing. It is possible to select data sources from Media data section.
- Use constant ID if the parameter is set to 'Yes', gallery container will have the constant ID based on module ID. It can be useful for caching or other purposes.
- Load method is used to specify load method on client side. If it is set to 'On Load', the gallery will be created when page and all resources (images, styles and etc.) are loaded by a browser. If it is set to 'DOM Ready', the gallery will be created immediately when page is loaded (it doesn't wait till all resources are loaded, they will be loaded in parallel). In other words, 'DOM Ready' event occurs before 'On Load' and if possible it is preferable to use it instead of 'On Load'. This parameter can be useful to resolve conflict with some 3rd party extensions, if the extension doesn't work properly when it's set to 'DOM Ready', try to switch it to 'On Load'.
- Module Class Suffix will be applied to the CSS class of the module. This allows for individual module styling.
"Lightbox integration" section contains parameters which are used to integrate the gallery with a lightbox extension. If the gallery is integrated with a lightbox extension, images (or web pages) will be shown into the lightbox when a user clicks by a gallery image. It will work if the selected data source contains thumbnails or links to web pages are defined for images in the data source (for example in description file for Local images). The section contains the following parameters:
- Lightbox integration is used to select a lightbox application which will be integrated with the gallery. If the parameter is set to "None", the extension will be not integrated with a lightbox extension. The selected lightbox application should be installed and enabled.
- Lightbox width is width of the lightbox. This parameter is used if a web page (it is not applied for images) is shown into the lightbox. Possible values: 400, 80% and etc.
- Lightbox height is height of the lightbox. This parameter is used if a web page (it is not applied for images) is shown into the lightbox. Possible values: 400, 80% and etc.
- Grouping items if the parameter set to "Yes", it will be possible to navigate between images (pages) into the lightbox.
- Background color is a background color which will be used for content which is shown into the lightbox. It is supported only by Sexy Lightbox application.
"Gallery parameters" section contains parameters to customize gallery:
- Width is maximum width of the gallery. Possible values: 500px, 100% and etc.
- Theme is used to choose a theme.
- Item width is used to specify a width of gallery item. If the value of the parameter is empty, the width will be calculated automatically. Possible values: auto, 150px, 30% and etc.
- Visible item count is used to specify number of items which will be shown into the gallery. Other items will be hidden and can be shown into the lightbox. If value of the parameter is empty or set to 0, all items will be shown.
- CSS class is used to specify CSS class(es) which will be added to galley container. It can be used to create custom CSS styles for the gallery. If you want to enter several classes, separate them by spaces.
- Link target is used to specify where links (to images or to pages) will be open when a user clicks by a gallery image.
- Custom link target is used to specify a custom target (for example frame name) if values from Link target parameter are not suitable.
- Use paging is used to enable/disable paging and configure some paging settings. The following parameters are available if the parameter is set to "Yes":
- Paging position is used to select position(s) where paging control will be shown.
- Start page number the gallery will open the selected page when page is loaded.
- Paging options parameters section is used to specify option which will be available in page size drop-down. The following parameters are available:
- Page size is used to specify how many items will be shown per page.
- Page label this label will be shown in drop-down for the defined page size. If the parameter is empty, value of Page size parameter will be shown.
- Default is used to specify page size which will be used by default.
- CSS Styles is used to specify additional CSS styles. It is possible to use {$id} predefined variable which will be replaced with ID of gallery container. For example the following code change font size to 20px for image titles:
#{$id} .ari-media-gallery-item {font-size:20px;}