Add a Litebox style image popup with JCE 1.1

Here are the steps to use the new "lightbox" image popup using the new version of JCE (1.11).

To understand what a lightbox popup is click on the image below.

click to enlarge

What you see above is a thumbnail created automatically by JCE when it uploaded the larger logo image using the JCE Image Manager. To view a tutorial on the basics of using the JCE Image Manager (not including the Lightbox Popup) please see this tutorial .

Directly below the logo image you see a caption I added to make it real obvious for the viewer that they should click on the image.

The process we are going to use follows these steps:

1. Upload and auto thumbnail your photo from your local computer to the website using JCE Image Manager.
2. Adjust the popup settings in Image Manager.
3. Insert/Update your settings Image Manager
4. Create caption using JCE Insert Caption.

I am assuming you already are familar with using the JCE Imager Manager so I will be skipping step on and going right on to step 2. (to understand step 1 see this tutorial.

click to enlarge

Above is the new icon tool bar for JCE. Note the new look for Imager Manger Icon and Insert Caption.

Step 2: Adjust the popup settings in Image Manager.

Once you have uploaded (and auto thumbnail) your image you need to click on the Popup Image tab at the top of the Image Manager window.

JCE Image Manager Popup Image Tab

Click on the Enable check box and then select your image file from the file list at the bottom of the Image Manager window, then a window will pop up asking if you want to use the images thumbnail. Click YES.

Input the settings as they are above. Input a caption if you want some text to appear underneath the large image when it pops up.

Now go to the Article Image tab and it should look something like this:

JCE Image Manager Article Image Tab

This tab shows the same kind of image display details as the previous version of JCE albiet in a different window layout.

Step 3: Insert/Update your settings Image Manager

Once you are done tweaking your settings click on Insert or Update at the bottom of the Image Manager window.

Now back in main JCE edior window you will see the image floating right of the text

4. Create caption using JCE Insert Caption.

To create a caption, click on the image and then click on the Caption Icon.

click to enlarge

Fill out the caption window as below.

Note the image of a strawberry is used as an example so you can see how your formatting will look. Change these settings above to suit the look you are going for.

When you are done tweaking click on Update.

Now back in main JCE edior window you will see the results of your formatting. Finish your Joomla article and save. View the article from the frontend of you site to see how cool your new Lightbox popups are.

Note: You must have Lightbox functionality installed into JCE for it to work. We started installing this feature on our client websites launched December 2006 onwards. To have this functionality added to your Joomla site please contact us for more info.