Our responsive eXtro Lightbox consists of a module and a plugin. Both versions have their own advantages:
The module automatically creates thumbnail images of the images to display, all you have to do is to define the folder that contains your images. It can be published at any module position, or directly in an article by using the loadmodule plugin. The lightbox creates a so called roadtrip, ie all images are linked togehter and can be switched by clicking the left/right buttons.
The plugin version of the eXtro responsive Lightbox allows to display thumbnails with lightbox function anywhere on your site. However, the plugin doesn't automatically create thumbnails, thumbnail and full image must be defined separately in order to display correctly. Like the module, the plugin can also create a roadtrip of the images displayed in which the images are linked together and can be switched by clicking next/previous. The plugin allows the admin to use optimized tumbnails, or custom thumbnails which display completely different content as the full image.
Module as well as the plugin are completely built in responsive design. This allows the lightbox to display optimally on small screens (smartphones) as well as up to large desktop displays.
Quickstart guide Plugin:
After installation and activation in Joomla, the Plugin can be used. Add the tag
{extrolb **parameters**}at any place in your article, a list of available parameters can be found below. In the plugins backend, you can select whether jQuery should be loaded or not by the plugin.
General tag with all parameters:
{extrolb tnimg=images/joomla_black.gif|fimg=images/joomla_black.gif|tnw=120|tnh=90|title=Imagetitle|class=myclass|olc=#000|olo=75|fio=500|fii=500|foi=500|eoc=true}
Only the parameter tnimg and fimg are mandatory until V3.2.0. From V4.0.0, only the parameter fimg is mandatory, since from this version, the plugin can create the thumbnail image automatically.
Description of the single parameters:
- tnimg:
- This is the thumbnail image (tnimg) which will be displayed, on clicking it, the lightbox with the full image will be displayed. Use the full path for the image, eg images/myfolder/mythumbnail.jpg
- fimg:
- The parameter fimg defines the full image that will be displayed in the lightbox. Use the ful path for the image, eg images/myfolder/myimage.jpg
- title:
- The parameter title sets an optional title for your thumbnail and for the full image in the lightbox mode.
- class:
- When using the parameter class, you can create a so called roadtrip, ie all images with the same class are linked together and can be switched in the lightbox with the previous and next buttons.
- tnw:
- The Thumbnail width determines the width of the thumbnail image that will be automatically created if you do not provide the tnimg parameter, i.e. if you do not use your own thumbnail image.
- tnh:
- The Thumbnail height determines the height of the thumbnail image that will be automatically created if you do not provide the tnimg parameter, i.e. if you do not use your own thumbnail image.
- olc:
- The Overlay Color (olc) defines the background color for the full screen lightbox view. By default, this is set to #000000 . Enter this color in default CSS mode, eg #000000 for black and #ffffff for white.
- olo:
- The overlay Opacity (olo) defines the opacity of the background in full screen lightbox view in percent. Allowed values are from 0 to 100 , the default is 75.
- fio:
- Fade In Overlay duration (fio) defines the fade in duration of the overlay. This value is in milliseconds and must be > 0
- fii:
- Fade In Image duration (fii) defines the fade in duration of the image. This value is in milliseconds and must be > 0
- foi:
- Fade Out Image duration (foi) defines the fade out duration of the image. This value is in milliseconds and must be > 0
- eoc:
- The exit on background click (eoc) parameter defines whether a click on the background closes the lightbox (true) or not (false). Only true or false is allowed as value. The default is set to true.
Quickstart guide module:
In the Modules backend, you can set all parameters that are also available in the plugin, plus some more.
- Load jQuery:
- Lets you define whether the module should load jQuery or not
- Load CSS file:
- load the modules CSS file - if you have multiple instances of the module, you can load the CSS file once
- Select image folder / override image folder:
- Select the folder where your images are stored. You can manually override this setting by entering your own folder (please use the full path)
- Width and height of the thumbnail:
- Thumbnail images created by the module will have this size
- Sorting of images:
- The images will be displayed in this order.
- Display image name:
- Select yes to display the image name in the lightbox view.
- Activate switching of images:
- Select yes if you want to enabled switching to the next/previous picture.
- Exit on background click:
- On yes, a click on the background will close the lightbox.
- Overlay color/transparency:
- Select the background overlay color and its transparency.
- Duration of Overlay fade / Image fade in / Image fade out:
- This defines how log it takes to fade the overlay and image on opening / closing the lightbox
- Images for arrow left / right / close icon / loading icon:
- Select here the images you want to use for your arrows right and left, close icon and loading image.
- Thumbnail overlay image:
- Here you can select a overlay image for your thumbnails that will be displayed on hover.
2024-02-13