Home Documentation Highslide JS for Joomla HsExpander Example 4: Adding A Custom Overlay (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 4: Adding A Custom Overlay (old)
Monday, 02 June 2008 22:23


With Highslide JS you can create a custom overlay that overlays or superimposes content on top of the popup-image. To do this, you create an HTML DIV in the caption text and give it a class name of 'highslide-overlay'. The div also needs a unique id. Note that you cannot use this id to apply styles. Instead, you can apply additional class names to control CSS styles. Look at the Caption tab below.

Caption tab

You MUST specify a unique Caption Id even if you don't wish to have caption text displayed under the popup. This is because the HTML DIV that you define for the overlay is actually contained inside the DIV for the caption text. In the example above, you can see that a DIV was defined with the class names 'highslide-overlay' and 'overlay-text'. It was given an id of 'my-textoverlay'. The following rule was added to the Highslide CSS configuration to style the text in the overlay.

.overlay-text {
text-align: center;
background: blue;
font-weight: bold;
font-size: 120%;
color: white;
padding: 10px;

As you can see, bold white text should be centered on a blue background and oversized by 120%. The overlay id in the Custom Overlay section contains the id that was given to the 'highslide-overlay' div. This is used to register the overlay with Highslide JS. The remaining properties in the Custom Overlay section tell Highslide JS where on the popup-image to position the overlay and whether to remove the overlay from the image when the mouse is moved outside the popup. Also, an opacity value can be specified to vary the opacity of the overlay if desired. Click on the thumbnail below to see the result.

The next example shows how this can be used to add a navigation bar to your image. It contains a DIV with a class name of 'highslide-overlay' and an id of 'my-controlbar'.

Caption tab

Another DIV with a class name of 'controlbar5' is defined within our overlay DIV. This DIV contains the 4 basic navigation links. These links are the same as those described in the HsExpander Example 3: Adding Captions Containing HTML. The following rules were added to the Highslide CSS configuration to define the controlbar.

.controlbar5 {
background: url(/plugins/content/highslide/graphics/controlbar5.gif);
width: 83px;
height: 18px;
/* float:right; */
.controlbar5 a {
display: block;
float: left;
height: 18px;
.controlbar5 a:hover {
background-image: url(/plugins/content/highslide/graphics/controlbar5-hover.gif);
.controlbar5 .previous {
width: 20px;
.controlbar5 .next {
width: 20px;
background-position: -20px 0;
.controlbar5 .highslide-move {
width: 20px;
background-position: -40px 0;
.controlbar5 .close {
width: 20px;
background-position: -60px 0;

Again, in the Custom Overlay section, the overlay id of 'my-controlbar' is specified to tell register the overlay DIV with Highslide JS. The navigation bar will be positoned in the top right of the popup, will not be visible once the mouse moved over and out of the popup and will be displayed with full opacity. Click the thumbnail below to see the result.

This time we really have text in the caption!
This is some text in an overlay

One final note. Once you have defined a custom overlay for a thumbnail/popup, you can use that same overlay in other thumbnail/popups on THAT SAME PAGE. Navigate through the thumbnails below.

All three thumbnail/popups are using the custom overlay 'my-controlbar' that was defined above.


Last Updated on Wednesday, 17 June 2009 07:46