Joomla! 3 PHP 7.4 Maintenance Only

Joomla! 4 PHP 7.4 PHP 8.0 PHP 8.1

ochresponsiveimages4Are looking for a solution that automitically adds a lightbox on your images (popup)? Or add multiple images on your page into a lightbox gallery? Do you want the lightbox and / or gallery to perfectly fit your sites template?

Time to automate image lightboxes and galleries and 'wow' your visitors!

ochGlightbox is a Joomla! system plugin that builds upon GLightbox. Glightbox is a pure JavaScript lightbox. It can display images, iframes, inline content and videos with optional autoplay for YouTube, Vimeo and even self hosted videos!

  • Small - only 11KB Gzipped lightbox script!
  • Fast and Responsive - works with any screen size
  • Gallery Support - Create multiple galleries
  • Video Support - Youtube, Vimeo and self hosted videos with autoplay
  • Inline content support - display any inline content
  • Iframe support - need to embed an iframe? no problem
  • Keyboard Navigation - esc, arrows keys, tab and enter is all you need
  • Touch Navigation - mobile touch events
  • Zoomable images - zoom and drag images on mobile and desktop
  • Themeable - create your skin or modify the animations with some minor css changes and Joomla template overrides!

Screen-shots

Tags

{ochglightbox dir="demo-mountains" layout="flexbox" loop="true" previewwidth="300" previewquality="100" previewrandom="true"}

 

{ochglightbox dir="demo-mountains" layout="flexbox" loop="true" previewwidth="100" previewquality="90" zoomable="false"}

 

{ochglightbox dir="demo-masonry" layout="masonry" previewrandom="true"}

 

{ochglightbox dir="demo-boxed" layout="boxed" previewwidth="200" previewrandom="true"}

 

Ooops (error demo: this will show when there is an error (can be turned off))

Image Elements

<a href="/images/ochglightbox/demo-elements/aaron-burden-5fedGbqYwvM-unsplash.jpg" class="ochglightbox" data-title="Winter Time" data-description="Lorem ipsum ..."><img src="/images/ochglightbox/demo-elements/aaron-burden-5fedGbqYwvM-unsplash-small.jpg" alt="" /></a>

Youtube Elements

<a href="https://youtu.be/WmVLcj-XKnM" class="ochglightbox"> <img src="/images/site/extensions/youtube-some-call-me-nature.jpg" alt="image" width="480" height="360" /> </a>

image

Video (mp4 on site) Element

<a href="/images/site/extensions/pexels-video-1550080.mp4" class="ochglightbox"> <img src="/images/site/extensions/pexels-sebastian-voortman-189349.jpg" alt="image" width="480" height="320" /> </a>

image

Requirements

  • Joomla 3.8+ or Joomla 4.0+
  • Basic Joomla! knowledge available between the chair and the keyboard :)

Installation is easy!

  1. Download the plugin
  2. in the Back-end go to menu Extensions > Manage
  3. in the tab [Upload file package] click [browse] and select your downloaded plug-in
  4. click [Upload & Install], wait for the installation to finish

Configuration

  • in the back-end go to menu Extensions > Plugins
  • search / locate the 'ochGlightbox' system plugin
  • open the plugin
  • in the tab [Plugin] set status to [Enabled]
  • in the tab [Plugin] configure on which components the plugin should be handling the images, leave empty to use on all components
  • in the tab [Tags Configuration] configure the generic Tags options: All options have detailed instructions / description when hovering the label
  • in the tag [Glightbox Configuration] configure the default settings to use for the automatic lightboxes / galleries: All options have detailed instructions / description when hovering the label
  • in the tab [Advanced] configure the advanced options to your liking > look at the tool-tips for information about what each setting does
  • click [Save & Close] and you are good to go

Activate Joomla! One Click update integration

Updating of the plugin is integrated with the Joomla! One Click Update manager. In order to activate follow the steps below:

  1. On this site: In the menu [Tools > My Subscriptions] copy your 'Download ID#'
  2. On your site: In the plugin configuration click the [Advanced] tab and paste the 'Download ID#' in the [Download ID]  field
  3. Click [Save] or [Save & Close], You will be prompted with an informational message that your Download ID was changed.

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

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!

Setting element attribute tag parameter Description
Slide options:      
title data-title  - na -  The title used on the slide, when the image has an alt attribute, that will be used when no title specified
description data-description  - na - The description used on the slide
descPosition data-descPosition  - na - Global position for slides description, you can define a specific position on each slide (bottom, top, left, right).
effect data-effect  - na -  
width data-width  - na - Default width for inline elements and iframes, you can define a specific size on each slide. You can use any unit for example 90% or 100vw for full width
heigth data-height  - na - Default height for inline elements and iframes, you can define a specific size on each slide.You can use any unit for example 90% or 100vw For inline elements you can set the height to auto.
zoomable data-zoomable  - na - Enable or disable zoomable images you can also use data-zoomable="false" on individual nodes.
draggable data-draggable  - na - Enable or disable mouse drag to go prev and next slide (only images and inline content), you can also use data-draggable="false" on individual nodes.
Lightbox options:      
skin data-skin skin Name of the skin, it will add a class to the lightbox so you can style it with css.
openEffect data-openEffect openEffect Name of the effect on lightbox open. (zoom, fade, none)
closeEffect data-closeEffect closeEffect Name of the effect on lightbox close. (zoom, fade, none)
slideEffect data-slideEffect slideEffect Name of the effect on slide change. (slide, fade, zoom, none)
moreText data-moreText moreText More text for descriptions on mobile devices.
moreLength data-moreLength moreLength Number of characters to display on the description before adding the moreText link (only for mobiles), if 0 it will display the entire description.
closeButton data-closeButton closeButton Show or hide the close button. e.g. data-closeButton="false"
touchNavigation data-touchNavigation touchNavigation Enable or disable the touch navigation (swipe). e.g. data-touchNavigation="true"
touchFollowAxis data-touchFollowAxis touchFollowAxis Image follow axis when dragging on mobile.
keyboardNavigation data-keyboardNavigation keyboardNavigation Enable or disable the keyboard navigation.
closeOnOutsideClick data-closeOnOutsideClick closeOnOutsideClick Close the lightbox when clicking outside the active slide.
startAt data-startAt startAt Start lightbox at defined index. "0" is first element, "null" will open element that is clicked on.
width data-width width Default width for inline elements and iframes, you can define a specific size on each slide. You can use any unit for example 90% or 100vw for full width
height data-height height Default height for inline elements and iframes, you can define a specific size on each slide.You can use any unit for example 90% or 100vw For inline elements you can set the height to auto.
previewWidth - na - previewWidth The width (number in pixels) of the preview image
previewQuality - na - previewQuality The quality of the preview image (50, 75, 90, 100)
previewRandom - na - previewRandom Display the preview images in random order instead of alphabetically on file name. Usage: previewRandom="true"
layout - na - layout The name of the template layout file e.g. "flexbox" will select template layout file "gallery-flexbox"
cursor data-cursor cursor Change the mouse pointer into a looking glass. e.g. data-cursor="true"
useAltAsDesc data-useAltAsDesc useAltAsDesc Use the image alt text as slide description? usage: data-useAltAsDesc="false"
videosWidth data-videosWidth videosWidth Default width for videos. Videos are responsive so height is not required. The width can be in px % or even vw for example, 500px, 90% or 100vw for full width videos
descPosition data-descPosition descPosition Global position for slides description, you can define a specific position on each slide (bottom, top, left, right).
loop data-loop loop Loop slides on end.
zoomable data-zoomable zoomable Enable or disable zoomable images you can also use data-zoomable="false" on individual nodes.
draggable data-draggable draggable Enable or disable mouse drag to go prev and next slide (only images and inline content), you can also use data-draggable="false" on individual nodes.
dragToleranceX data-dragToleranceX dragToleranceX Used with draggable. Number of pixels the user has to drag to go to prev or next slide.
dragToleranceY data-dragToleranceY dragToleranceY Used with draggable. Number of pixels the user has to drag up or down to close the lightbox (Set 0 to disable vertical drag).
dragAutoSnap data-dragAutoSnap dragAutoSnap If true the slide will automatically change to prev/next or close if dragToleranceX or dragToleranceY is reached, otherwise it will wait till the mouse is released.
preload data-preload preload Enable or disable preloading. Usage data-preload="true"
autoplayVideos data-autoplayVideos - na - Autoplay videos on open. Usage data-autoplayVideos="false"

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

Agency Bundle - 12 months
Agency Bundle - 12 months
Get access to and support for all our Joomla! extensions and more!
More Information
ochGlightbox - 12 months
ochGlightbox - 12 months
Automatic and hassle free adding fully controllable image light-boxes and or galleries to your web pages.
More Information

Tips & Tricks

  • [TAG] The preview images will be located in subdirectory _preview (so when using gallery-1 as directory, the preview images will be located in gallery-1/_preview).
  • [TAG] The preview images have the following name syntax: [previewWidth]-[previewQuality]_[orginal image name].[image extension].
  • [TAG] When you delete one or more preview image or delete the complete _preview directory, the removed images or complete preview directory will be recreated.

Technical support and feature requests via our forum (You need a valid subscription to be able to post)