Saturday, 15 December 2012 16:13

How to get Joomla Article Images to Pop Out Using Lightbox

Written by
Rate this item
(0 votes)

LIGHTBOXI was recently developing a Joomla Website for a client who provided screenshots demonstrating their services. Embedding these images worked well for the article at a glance. However, what happened when a front end user clicked on the image? Using the typical  linking function provided in the Joomla Article editor, you could link to a larger version. However this larger version was simply a link to the actual JPG. This resulted in taking the user outside of your Joomla Websites Structure and into your Internet browser to view the actual JPG File. This was not appealing to the eye, nor for the sites overall content navigation.

As a result of the detailed images (screenshots) that the client provided, this project required the ability to zoom in on these large images. This article provides directions on how to achieve light-box image function ability for images embedded into Joomla Articles.

So what exactly is Lightbox? Lightbox is a JavaScript technique used to display large images. The effect has gained widespread popularity due to its simple yet elegant style and easy implementation.

In order to achieve Lightbox function ability for Joomla Article Images you must first have the following components and plugins installed prior to proceeding:

Attention: The below directives are for those with development experience. If you are new to Joomla, you may want to contact us so that we can assist you in achieving the function ability described in this article.

Download these 3 Components/Plugins

  1. JCE Editor
  2. JCE MediaBox Archive
  3. Rockettheme RoxBox

 Steps to achieve Lightbox Image function ability in Joomla Articles.

  1. Download the the most current JCE Editor and RockeTTheme Rokbox Plugin.
  2. Enable them in the Plugin Manger in the Joomla admin area. Settings for how the lightbox is displayed are set with the plugin in the plugin manger for Joomla, not in any of the JCE settings. This is one advantage of using this system is it gives some control over how your lightbox is displayed.
  3. In the JCE editor, insert or edit the image using the extended image tool. After inserting the small image in your article or module, upload the larger image using the upload dialog or FTP program.
  4. Click the pop-up tab and select RoxBox as the Compatibility mode. Type in the URL for the larger image you uploaded and type a caption if you want to. Make sure to check the enable check box before clicking the update button at the bottom of the page.

The above directives will result in a nice animated light box with a soft drop shadow around the lightbox.

It is also possible to group images with in an article, so that when the lightbox is opened the remaining articles in the image will appear. For example "Image 1 of 5".

If you have interest in such function ability please contact us so that we can assist you!

Read 28240 times Last modified on Saturday, 15 December 2012 21:33