This example builds on HsExpander Example 1: A simple thumbnail/popup image. You might want to view that example if you haven't already. Now that we have created a Highslide JS expander, it might be nice to add a caption to the image. There are several ways of accomplishing this. The Site/Article specific configuration has a 'Captions' section that allows you to choose what type of caption you would like to use.

Notice the options for 'Popup caption':

• No Caption. This is the default.
• ALT Attribute from IMG Tag. This will cause the ALT attribute from the thumbnail image to be used as the caption for all expanders.
• Title Attribute from IMG Tag. The Title attribute from the thumbnail image will be used as the caption for all expanders.
• Title Attribue from A HREF Tag. The Title attribute from the popup image will be used as the caption for all expanders.

To set one of these options in your configuration, you must log on to your administrative back-end, click on the Highslide JS Configuration menu item in the Components menu and select the appropriate configuration. For this example, I am going to create an article specific configuration entry and set the Popup caption to use the 'Title Attribute from A HREF Tag' option.

Click on the save/publish icon to save the configuration to the database and at the same time publish the configuration for use by the Highslide JS plugin. TIP

Now we need to edit our Highslide JS expander and add caption text in the Title attribute of the popup image. Click on the thumbnail to select it and then click on the HsExpander button to bring up the Highslide Expander dialog. Enter some text in the appropriate attribute, depending upon what you chose in your configuation, and click update.

Your popup image should now have a caption similar to the one below.

Close Move

Hover the mouse over the option name in the configuration window to display tooltip information about the option. Overrideable Inline information indicates whether the option can be overriden by a highslide expander/HTML expander.

This method is somewhat limited in that you must use the same attribute for all expanders in the article. Also, including HTML in the caption is not really an option. Thankfully, there is another way that we will explore next. It solves all of these restrictions and more. It involves the use of the the 'Caption' tab in the HsExpander dialog window.

Here you specify a caption id that is unique to the thumbnail/popup that you are inserting/updating and the caption text to be used as the caption. The caption text can contain any HTML content that you wish. What this actually does is define a hidden HTML DIV tag with a classname of 'highslide-caption' and an id equal to the caption id. The hidden DIV contains the caption text that you specified in the dialog. The caption id is used to tie the hidden DIV to the thumbnail/popup in which it was defined.

Lets take a look at one of the examples that was used on the Highslide JS Examples page. First the Caption tab.

A caption id of 'Caption-thumb3' is specified along with its associated caption text. Note that you must specify a caption id. Any caption text that you specify will be ignored unless a caption id is given. You can remove a caption from a thumbnail/popup simply by clearing out the caption id and saving. Next the thumbnail tab.

Not much here, it just specifies the thumbnail image. Finally, the Popup tab.

The full-size popup image is specified here. Notice the Inline overrides section. A wrapper class of 'highslide-no-border' was specifed. What is a wrapper class? A wrapper class is used to give each thumbnail/popup it's own CSS properties. You can define a CSS rule that inherits a general rule but whose properties overwrite those of the general rule. For this example, a CSS rule named 'highslide-no-border' was defined as follows:

/* Individual CSS-classes: no border */
.highslide-no-border .highslide-image {
border: none;
border-bottom: 1px solid white;
}
.highslide-no-border .highslide-caption {
border: none;
border-bottom: 1px solid white;
background-color: #3659BA;
color: white;
}
.highslide-no-border code {
color: yellow;
}

The CSS rules above were added to the Highslide CSS portion of the article specific configuration for this example. Notice that the .highslide-no-border rule inherits from the .highslide-caption rule. It specifies no border, a solid white bottom border of 1 pixel, a background color and the color white for the text. The highslide-no-border rule also inherits the highslide-image rule. This also specifies no border and a solid white bottom border of 1 pixel. Finally, highslide-no-border code defines a color of yellow for any elements in the caption. Click on the thumbnail below to see the result.

Of couse, you don't have to go through all of this just to use captions, but as you can see, this can be used to produce some very attractive results.

If you've been following along adding captions to your own content, you've probably already noticed a problem. The addition of the hidden DIV for the captions is great, except that it isn't hidden when in comes to viewing the document in JCE. This can result in a very messed up display in the editor. For example, here is how the Highslide JS Examples page looks in the editor.

As you can see, this is not very WYSIWYG. Fortunately, for Firefox users, there is a solution. The JCE configuration defaults to using the template.css file from your current template to define the CSS rules that the editor uses for its display. Go to your current template /css directory and create a copy of the template.css called 'editor_content.css'. DO NOT modify your template.css file. Add the following lines to the new css file that you just created.

.highslide-caption { display: none; }
.highslide-html-content {
position: absolute;
display: none;
}

Log on to your administrative back-end and click on the JCE Administration/Configuration menu item. In the Formatting section, change the Use Template CSS option to No as shown below.

Also, make sure that the Use Custom CSS file option is specifed as shown above. Save the configuration. With this modification to the JCE configuration, the Highslide JS Examples page now displays in the editor like this:

Unfortunately, I haven't been able to get this to work in IE7 but it works beautifully in Firefox. I can't speak to other browsers because I don't have them to try it out. If anyone gets it to work in IE7 or can confirm that this works in something other than Firefox, please let me know and I will add that information here.