Mediabox, lightbox pour joomla

Mediabox CK is a multimedia Joomla lightbox which can be used to show images, videos, flash animations, medias from Facebook, Twitter, Youtube, Daylymotion or some PHP pages in a responsive popup. You can add some title and description, and create some albums.

 

 

Responsive and touch reactive

Responsive Design Mediabox CK Lightbox for Joomla!

 

Features

Mediabox CK is a responsive Lightbox that can show any media like your images, videos from your server or from the social network like youtube or else, or any other url or html content.

  • Can show any media : images, videos, html
  • Responsive behavior : resize the media according the screen size
  • Responsive layout : full screen image and bigger buttons to use with your finger
  • Designed to work with touch device : swipe to navigate, tap to zoom on the image, use the finder to pan the zoomed image
  • Mobile detection based on resolution or device type
  • Group your medias into albums to navigate through them
  • Easy integration with the editor button (Pro version)
  • Autoload images from a folder (Pro version)
  • Tags to be used anywhere in your website to create a link (Pro version)
  • Can replace any existing Lightbox : you can select which selector to use for your links
  • Diaporama feature : see all images from an album automatically with a custom duration between each image
  • Compatible with images from Google+

 

Demo of Mediabox CK

 

Simple text link

Click the text to show the image

 

Image with title (you can add some html in the title)

major-league-android

 

Images gallery - Using HTML code

responsive multimedia lightbox responsive multimedia lightbox responsive multimedia lightbox

 

Images gallery - Using the automatic gallery (Pro version)

 

Images gallery - Using the automatic gallery (Pro version) and the Image Effect (see the plugin Image Effect CK)

This demo uses a custom labels.txt file in the images folder for the images title and description.

Videos

YouTube »

Vimeo »

DailyMotion »

 

You can also show the local videos hosted on your server using the formats MP4, WEBM and OGV. All the files must have the same name with each format to be compatible with all systems. You can also put a JPG image with the same name to show if no one of the video files can be played. Example of files to put in your folder :

myvideofile.mp4
myvideofile.ogv
myvideofile.webm
myvideofile.jpg

Audio

You can also show the local audio files hosted on your server using the formats MP3, OGG and AAC.

 

Docs JoomlaCK : Check how to use the labels for your images

A lightbox made for mobiles - Use your images like a mobile app

 

Create an Image Gallery

preview images gallery

Using the Pro version of Mediabox CK you can load a gallery of images directly from a folder. All images will be automatically linked to the original image in the lightbox popup.

 

Customize your images directly from the plugin options, without any code.

 

Use the tag :

code mediabox image gallery

Use a link :

<a rel="lightbox" data-dir="images/demo" data-gallery="1"></a>

 

preview images overlay

Automatic overlay added to the images. All images will have an overlay on mouseover to tell your visitor that the image can be clicked.

 

Customize your image overlay using the plugin options. You can set various styles for the overlay

 

 

How to use Mediabox CK

1/ Using HTML code - Basic method

Mediabox CK will search for all links that have the attribute rel="lightbox" (you can change the attribute name and type in the plugin options). To use the lightbox on your link you must add it the attribute like this :

<a href="/mypage.html" rel="lightbox">Link title</a>

The href can point to a link, to an image, a video or anything else.

Group your medias in an album

To create an album or add some special parameters, you shall edit the html code and add yourself the rel attribute on the link with the tag <a>. Example : rel="lightbox[albumname]"

<a href="/mypage.html" rel="lightbox[myalbum]">Link title</a>

Give specific dimensions to a media

You can also want to override the general settings of the plugin and ask it to open the media with a specific width and height. You can set them in the rel attribute. Example : rel="lightbox[width height]"

<a href="/mypage.html" rel="lightbox[640 480]">Link title</a>

And combined dimensions with an album :

<a href="/mypage.html" rel="lightbox[myalbum 640 480]">Link title</a>

 

2/ Using the Tiny MCE editor 'add link button'

In your editor you probably have a "Add a link" button. You can use it to add a link with the attribute.

apercu bouton link editor

Here you can set the link text and the href (url) and you can also tell to use a Rel named "Lightbox". Then if you want to specify an album of some dimensions you must use the HTML method or the editor button plugin in the Pro version.

 

3/ Using the Mediabox CK Editor Button (Pro version)

The Pro version of Mediabox CK includes a button editor plugin (works with TinyMCE and JCE). To use it you must first publish the plugin in your extension manager.

Once the plugin Mediabox Button installed you will see it in your editor :

apercu bouton mediaboxbutton

Click this button and you will get an interface specific to Mediabox CK that allows you to create your links without coding and without specific knowledge, very quickly. In this interface you can

  • Set the text do display as link
  • Give a title and description that will be shown in the Lightbox popup
  • Select an image from the Joomla media manager
  • Select a folder from a tree just by clicking on it (list all folders in the 'images' folder)
  • Set specific width and height for your Lightbox
  • Set an album name to group the media with other ones in the page
  • Choose if you want to insert a HTML link (on text or image) or if you want to create a tag

Preview of the interface with an image selected and the direct preview on the right :

apercu fenetre mediaboxbutton

Preview of the interface with autoload medias from a folder and the folders tree structure to select the source :

apercu fenetre mediaboxbutton

 

 

4/ Using a Mediabox Tag (Pro version)

You can also use a tag to create a link automatically based on the params you write in it. This is useful to put a text anywhere in your page and create a link (if you don't have any html editor available) or if you have some difficulty to add the attribute to your link.

The Mediabox Tag is also the method that allows you to load directly all images from a folder. Then you will click on the generated link and all images from the folder will be shown into the Mediabox popup, grouped into an album so that you can navigate through them.

This is the code that you must write :

 mediatboxtag

The tag can have multiple parameters, all separated with a "|" (vertical bar).

List of all parameters :

src= : source media to show in the popup, it can be an image or video or url

w= : lightbox width in px

h= : lightbox height in px

alb= : album name to group the medias and show the navigation

t= : title and description shown under the media, separate them with a double point ::

dir= : load automatically all the images contained in the folder, then you can navigate through them into the lightbox. If you use this, you don't need the 'src' parameter.

 

Mobile options for Mediabox CK

Mediabox CK has beed designed to be a responsive Lightbox with support on Touch devices.

Edit the plugin options to set the way the plugin will detect the responsive mode :

  • Detection based on resolution : give the resolution in px under which the Lightbox will turn into the mobile layout
  • Detection based on the device type : mobile and tablet, or mobile only

You can also choose to deactivate the mobile behavior if you don't want to use it.

 

Responsive layout designed for mobile

When the Mediabox detects that it must behave for mobile, it changes the layout to have the image in full screen with big buttons at the bottom. The buttons are big enough so that you can click on them with your finger.

Preview of the Mediabox CK in desktop mode

apercu desktop3

Preview of the Mediabox CK in mobile mode

apercu mobile touch tap

 

Touch behavior to be used on mobile or tablet

When you are using the Mediabox CK on a touch device, you can use your finger to control and navigate.

  • Swipe left of right to navigate into an album
  • Touch / Tap  the image to zoom it and unzoom
  • Once zoomed, use your finger to move the image to see the details

 

Swipe left or right to navigate

apercu mobile touch swipe

Touch / Tap the image to zoom and unzoom

apercu mobile touch zoom

Use your finger to move the zoomed image

apercu mobile touch pan

 

Download the plugin Mediabox CK for Joomla 3.xFree

Download the plugin Mediabox CK Pro for Joomla 3.x9 €

Vote on the JED to help Mediabox CK

Release notes (click to show) :


VERSION 2.2.11 - 25/04/17
  • Fix issue with frontend edition
VERSION 2.2.10a - 12/04/17
  • [PRO] Fix an issue with Chrome browser when no editor is focused
VERSION 2.2.10 - 26/10/16
  • [PRO] Fix an issue with frontend edition in the editor
  • [PRO] Add compatibility with frontend edition using Community Builder
VERSION 2.2.9 - 07/10/16
  • Fix an issue with Vimeo videos
VERSION 2.2.8 - 15/09/16
  • Add the option to force the mobile display on all devices
VERSION 2.2.7 - 25/08/16
  • [PRO] Add the option order=labels to sort the images from a folder according to the order in the labels.txt file
VERSION 2.2.6 - 20/07/16
  • [PRO] Fix an issue with number of thumbs
VERSION 2.2.5 - 08/07/16
  • Fix an issue with iOS and link shown instead of the video
  • Compatible with HTTPS
VERSION 2.2.4 - 13/06/16
  • Fix an issue with text not showing
VERSION 2.2.3 - 11/06/16
  • Fix an issue with the diaporama autoplay
VERSION 2.2.2 - 30/05/16
  • Add IE compatibility to fix the images distortion in gallery mode
  • Fix an issue with the number of thumbnails that limited also the number of images
VERSION 2.2.1 - 24/05/16
  • Fix a css display issue in gallery mode with too much space between images
VERSION 2.2.0 - 12/05/16
  • New Touch Mobile behavior : Zoom the image with pinch (2 fingers)
  • [PRO] Add feature to use a labels.txt file to write the images title and description in gallery mode
  • [PRO] New rendering for html code to be more versatile
  • [PRO] Add compatibility with Image Effect and the gallery mode
  • [PRO] Add option nb=x to limit the number of slides in gallery mode
  • [PRO] Add option random=1 to show the images in random order in gallery mode
  • [PRO] Updated to use the CKBox modal for the editor button
  • Added option for diaporama autoplay
VERSION 2.1.8 - 31/03/16
  • Enable fullscreen for youtube videos
  • Fix box size issue with youtube videos
  • [PRO] Allow accent in the folder and images path
VERSION 2.1.7 - 22/03/16
  • Compatible with Joomla! 3.5
  • Update to be compatible with PHP7
VERSION 2.1.6 - 23/01/16
  • Fix an issue with video on iPad
VERSION 2.1.5 - 07/12/15
  • [PRO] Fix an issue with tag parameters

Fast and powerful creation, customizable and responsive.

Read More