Home Documentation Highslide JS for Joomla HsExpander Example 3: Adding captions containing HTML (old)
02 | 04 | 2023
NOTICE: If you intend to use Highslide JS on a commercial website you MUST purchase a license from the author. Please go to Highslide.com for more details.
HsExpander Example 3: Adding captions containing HTML (old)
Sunday, 01 June 2008 21:02

In this example we will take a closer look at the following thumbnail/popup that appeared on the Highslide JS Examples page. Click on the thumbnail below and notice the PREVIOUS, NEXT, MOVE and CLOSE links.

Highslide JS

The HsExpander dialog entries used to create this thumbnail/popup look like this.

Thumbnail tab

The thumbnail tab contains the url to the thumbnail image. Notice the Title. This is the text that is displayed when you hover the mouse over the thumbnail. Try it.

Popup tab

The Popup tab contains the url to the full-sized image as well as some other interesting entries. The popup outline is defined to be 'rounded-white' for this popup and the alignment is set to 'Center'. This tells Highslide to move the popup image to the center of the browser window. This example also uses a wrapper class to apply custom CSS rules for this popup's caption. 'highslide-white' is defined in the CSS configuration as follows:

/* Individual CSS-classes: white */
.highslide-white {
background-color: white;
.highslide-white .highslide-image {
border: 5px solid white;
.highslide-white .highslide-caption {
background-color: white;
.highslide-white .control, .highslide-white .control * {
color: #666;
.highslide-white .highslide-html {
border: 2px solid white;

We examined the concept of a wrapper class in the previous example HsExpander Example 2: Adding captions to your thumbnail/popup.

Caption tab

And finally, the Caption tab. It contains a caption id to tie the Caption to this thumbnail/popup and the caption text. I have cleaned up the caption text a bit in order to better show what was really entered. JCE (tinymce is should say) adds a lot of stuff that basically reiterates what was actually entered. It tends to really garbage up the display of the caption text in the dialog window, but it doesn't really have an effect on how the caption is actually displayed. You'll see what I mean when you get to adding your own captions containing HTML. I have this on my list of 'todos' to try and figure out a better way to display this information in the dialog window.

Lets take closer look at what is actually contained in the caption text. Basically, it consists of an HTML DIV the contains 4 links for PREVIOUS, NEXT, MOVE and CLOSE. Each link contains an onclick attribute that calls highslide to perform the associated function. You can read more about these functions on the Highslide JS documentation page. Notice that each of these links uses a .control class. The control class is defined in our CSS configuration as follows:

.control {
float: right;
display: block;
margin: 0 5px;
font-size: 9pt;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
.control:hover {
color: black !important;

Also, the link for the MOVE function has a class definition that contains 'highslide-move control'. This means that both CSS rules 'highslide-move' and 'control' are applied to this link. Again, you can read about the 'highslide-move' rule at the Highslide JS documentation page. Have a look at the thumbnails below to see these links in action.

As a side note, the 'Allow multiple instances' option in the highslide configuration for this article was modified to 'No'. This tells Highslide that you don't want multiple popups open at the same time. That is why the current popup closes and the previous/next popup opens when you click the associated link in the popups below.

The slideshow Group inline option on the Popup tab can be specified to tell Highslide that you want to restrict previous/next navigation to other thumbnail/popups with the same slideshow Group identifier. For the 3 above, the Slideshow group option of each thumbnail/popup was given the value 'group-shared'. Without this, clicking previous on the 1st popup would cause the popup-image at the very beginning of this article to open.


Last Updated on Wednesday, 17 June 2009 07:45