ochGlightbox (system plugin)

Joomla! 4.0 (Beta) ready!

Description

ochresponsiveimages4 Are 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

Demo

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>

Documentation

Installation

Requirements

Joomla 3.8 or higher
Basic Joomla! knowledge available between the chair and the keyboard :)

Installation is easy!

Download the plugin
in the Back-end go to menu Extensions > Manage
in the tab [Upload file package] click [browse] and select your downloaded plug-in
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:

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

Glightbox (automatic) mode

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

Tag (Gallery) mode

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.

create a directory in you configure Base Directory, e.g. gallery-1
upload the full size images that you want to display in the gallery in the created directory
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.

Parameters (Tag and Automatic)

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-useAltAsDes="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"

Template overrides

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

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

Download

You need to be subscribed to one of the products below to be able to download this extension:

ochGlightbox - 12 months

Automatic and hassle free adding fully controllable image light-boxes and or galleries to your web pages

€ 10,00

Buy Now!

VAT may apply to EU orders.

FAQ / T&T

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.

Why choose Online Community Hub?

Our extensions are trusted and installed on over 2.000 websites!

Latest Joomla! and PHP versions: We're always developing our components in the latest Joomla! and PHP environments!
100% Open Source and GPL licensed: You can make as many changes to the code as you require, the code doesn't stop working when your subscription ends.
Responsive design (mobile first): All extensions are as responsive as possible built on the Joomla! built-in Bootstrap 2.x.x Library!
Joomla! One-Click update support: All extensions are being shipped with Joomla! One-Click update support, this means you don't have to upgrade manually anymore! The only thing you need to do is make sure you have entered a valid Download Key!
Coding Quality: We code compliant to Joomla! Coding Standards and Joomla! API guidelines. This makes the readability and maintenance of the code a breeze!
Service and Support: We have trust in our capabilities and believe in transparency; therefore our support is handled via the forum which is open to everybody. No secrets here!
All extension subscriptions have a 30 days money back guarantee: If it doesn't do what we advertised, we will fix it. If we can't you get your money back... no questions asked.

Do you have an awesome idea for a new extension or a feature request for an existing extension: feel free to reach out to us! We would love to work with you on making it possible.

Get in touch

This ad is inserted via ochCall2Action and displayed via ochAddAds

Looks like Google ran out of ads to serve... or do you have an ad blocker activated?

ochGlightbox (system plugin)

Description

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

Screen-shots

Demo

Tags

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

Elements

Video Introduction

Documentation

Installation

Requirements

Installation is easy!

Configuration

Activate Joomla! One Click update integration

Glightbox (automatic) mode

Tag (Gallery) mode

Parameters (Tag and Automatic)

Template overrides

Download

ochGlightbox - 12 months

FAQ / T&T

Tips & Tricks

Support

Why choose Online Community Hub?

Over Online Community Hub

Diensten

Extensions

Log In or Sign Up