ochGlightbox (system plugin / module)

Glightbox (automatic) mode works with by adding a class name to the image element in your website. The class name you need to add is configured as 'Class Selector' in the plugin configuration tab 'Glightbox Configuration'.

The default classname is 'ochglightbox'.

e.g. <img class="ochglightbox" src="/location_of_image">

When you have multiple images on one page with the configured class name, you can instruct ochGlightbox how to handle these images via the configuration setting 'Lightbox mode' in tab 'Glightbox Configuration':

• Gallery: add all elements to one Gallery (with next and previous functionality)
• Lightbox: add a Gallery for every element, basically this acts as multiple galleries with only one image in it

You can add a Gallery of images using the tag { ochglightbox dir="directoryname"} anywhere in your content. The tag will be replaced with the Gallery of images.

1. create a directory in you configure Base Directory, e.g. gallery-1
2. upload the full size images that you want to display in the gallery in the created directory
3. in your content set the tag { ochglightbox dir="gallery-1"} (gallery-1 should be replaced with the directory name you created in step 1)

ochGlightbox will now on first display of the page on the front-end create a preview image for every image in the directory.

New in version 2.1.0 is the possibility to automatically add image descriptions to the slides.

In the directory holding the images for your gallery you create a descriptions.json (text) file. This file needs to be in (valid) json format. If there is an error in the file you will see this in the log file for the ochGlightBox plugin. The descriptions.json file is in the following format:

{
    "filename-of-the-image.jpg": "this is a \"test\" description",
    "filename-of-another-image.jpg": "Another beautiful test description"
}

Starting with ochGlightbox version 2.0.0 there is support for the ochGlightbox Module.

You can download the module from the download area and install it like you install any Joomla module.

In the module you can configure the images that should be displayed, the order in which they should be displayed. Set a title and or description for the images and configure the gallery.

The module depends on the ochGlightbox system plugin.

You can display the module on any template position, but also within content with the Joomla core module tag. Like here!

ochGlightbox - Module Demo

Default settings can be configured in the plugin, but almost all settings can be overwritten via data-attributes on the element (Glightbox mode) or via parameters in the tag (Tag mode).

example via data-attribute on element:

<img class="ochglightbox" src="/your image" data-title="title" data-description="this is the description" data-cursor="true">

example via tag parameters:

{ ochglightbox dir="gallery directory" layout="flexbox" cursor="true" loop="false" previewwidth="250" previewquality="100"}

This gives you the ultimate control over every light box / gallery used on your web site!

Everything displayed on the front-end can be customized to fit your site needs via template overrides!

The following template layout files are currently available:

• lightbox.php: this is the lightbox slight container;
• lightbox_slide.php: this is the slide itself;
• gallery_error.php: this is used when a rendered tag gives an error;
• gallery_flexbox.php: this is the tag template for displaying the preview images
• gallery_masonry.php: this is the tag template for displaying the preview images in a wall format
• gallery_boxed.php: this is the tag template for displaying the preview images squared in a wall format

Read here how to do that if you are new to this awesome Joomla! feature: https://docs.joomla.org/J3.x:How_to_use_the_Template_Manager#Creating_Overrides