Lightboxes are used on modern, javascript-enabled web sites for a long time. Our first Joomla module for making Lightbox slide shows was released over 4 years ago (Hot Lightbox). Requirements of modern web design let us create a new, responsive and touch-friendly version of this module. It works similarly to the old module, but the code is written from start. This version of Lightbox module is much better than the old one, especially when visitors access your site on mobile devices (smartphones and tablets) or if they are looking at your site on touch-sensitive screens.
Hot Responsive Lightbox will create thumbnails from your images. All you need to do is to upload the images and enter the path (relative to your Joomla) in the module parameters.
Basically, Lightbox is a popular name for a script that allows us to show a larger version of a small image (thumbnail) in a pop-up window. The idea is to show a collection of several small images (thumbnails) and allow visitors to see a larger version of any image by clicking on the smaller image. Furthermore, after seeing a larger version of the first image, visitors can continue browsing the larger versions of other images from the set without leaving the Lightbox mode. The next or previous image from the set will be shown after clicking on the right or left navigation arrow or after swiping on the screen from right to left or from left to right (on touch screens).
Hot Responsive Lightbox Module Parameters
- Unique ID If you are using multiple instances of the module on the same page, please add different IDs for each instance. This can be any word without special characters.
- Lightbox Mode There are several modes available. Each mode enables or disables some Lightbox elements, such as navigation arrows, screen overlay, close button, and activity navigation. Select the mode that suits your needs best.
- Thumbnails Width / Height / Quality Define the dimensions and image quality of the thumbnail images that will be created by the module. Hot Responsive Lightbox will create all thumbnails automatically and store them in the /thumbs sub-folder in your folder with images.
- Thumbnails Vertical / Horizontal Margin These parameters define the margin (horizontal and vertical distance) between the thumbnail images. The value is in pixels.
- Thumbnails Padding These parameters define padding (inner distance) between the thumbnail image and its border. The value is in pixels.
- Border Width / Color / Hover Color These parameters define border width (in pixels) and border color and hover color (mouse over color).
- Thumbnails Background / Hover Background These parameters define the background colors of the space around the thumbnail images. To see this space, a positive value for padding must be added.
- Overlay Color This is the color overlay around the big image when Lightbox is activated. The value should be entered as RGB values of the color (0,0,0 for black or 255,255,255 for white). You can find out the RGB value of any color with this online HEX to RGB converter.
- Alt Values You can add alt values of your images as comma-separated strings. The number of alt values should match the number of images in your gallery. For example: my alt 1,my alt 2,my alt 3. The alt value of each image will be displayed as the image's description text in certain Lightbox Modes.
Make sure that you checked our demo with both desktop and mobile devices. Also, we have used this module in Joomla Portfolio Template and Law Agency Template. Please check the demos of these templates as well as our official module demo to get a better idea of how this module works.
Plugin Also Included
Together with the Hot Responsive Lightbox Joomla module, you will also get Responsive Lightbox Joomla plugin. The plugin has the same parameters, shares the same code, and can be used for similar purposes as the module. However, as you probably know, there's a difference between Joomla modules and plugins. The modules must be placed in the module positions only. On the other hand, the plugins can be used directly in articles. So, in order to include this plugin anywhere in your article content, you should enter this shortcode:
{*responsivelightbox}path-to-your-images-folder{/responsivelightbox*}
Please remove the asterisks (*) from the above sample. Also, the path to your images folder should be relative, for example, "images/gallery".
You can see this plugin live on our plugin demo page.