Using field tokens to create a lightbox effect for images in EasyTable Pro
With EasyTable Pro's field options you can combine several fields to produce a custom URL for each record. There are lots of things you can do with URL's you may want a custom text for each click link or you may want to set a subject in an Email link, we've already looked at both of these so in this FAQ we'll take that a little bit further by combining it with another Joomla component.
When combined with the popular JCE (Joomla Content Editor) you can make use of the JCE MediaBox to provide advanced pop-ups for your images (or just about any other type of media). We're using JCE's MediaBox for this example because really JCE should be installed on every Joomla website.
First up make sure you have a current version of JCE and JCE MediaBox installed (don't forget to check the MediaBox plug-in is enable).
This FAQ assumes you know about EasyTable Pro's field tokens, you may want to read this article about the basics of using field tokens for substitution functions.
For the purposes of this FAQ we're assuming our table has fields with the following names and alias.
| Name | Alias |
| Portrait | portrait |
| Thumbnail | thumbnail |
| President | president |
Some typical records might be:
| Portrait | Thumbnail | President |
| GeorgeWashington.jpg | thmb_GeorgeWashington.jpg | George Washington |
| JohnAdams.jpg | thmb_JohnAdams.jpg | John Adams |
A Lightbox Effect
As we have a thumbnail image, a full sized portrait image and the name of a President you can create a thumbnail that is linked to the full sized portrait and has the correct Title text (most light box effects use the title text in the display of the larger image). Again as with most light box effects you can group media together so that you can navigate back and forth between multiple media elements of the same group — in most systems you do this by setting a "rel" value.
Using the example table and records to achieve this with EasyTable Pro you need to take several steps first:
- set the field "Thumbnail" to a type of "TEXT" (this prevents EasyTable Pro apply type specific formatting to the field).
- set the field options to the following:
<a rel="presidents" target="_blank" title="#president# portrait." href="/images/stories/USPresidents/#portrait#" class="jcepopup">
<img src="/images/stories/USPresidents/#thumbnail#" alt="Click for larger view."></a>NB: the URL to the larger image is wrapped around the image URL — it also has the class "jcepopup" attached so that the JCE Javascript catches it.
Now when EasyTable Pro renders the table any field tokens will be replaced by the values in those fields. With our example table this will produce the following HTML:
RSForm!Pro is a powerful Joomla! form creator, helping you to create custom forms in minutes. The new product makes form management much easier and gives you the time to handle your clients better.
For only €19.00 how can you go wrong?
( We've used it for years... Shouldn't you? )


