Configuration: Custom Overlay

This section of the Highslide Configuration enables you to define a custom overlay that will automatically be applied to all qualifying thumbnail/popups. This is most useful for createing a navigation control bar that will be used 'slideshow' style on all popups in an article. Take a look at the configuation below.


The Overlay id 'mycustom-overlay' is the name of the HTML DIV that is created to contain the HTML code in the Custom Overlay HTML section. The presence/absence of the Overlay Id is what determines whether a custom overlay will be created. If Overlay Id is not specified, no overlay will be created even though there may be HTML defined in the Custom Overlay HTML section. Like the custom overlay options in the JCE plugins, the remaining options tell Highslide JS where on the popup image to position the overlay, whether to hide the overlay when the mouse leaves the popup and the opacity of the overlay. Additionally, there is an option to restrict whether the overlay should pertain to HsHtmlExpander popups.configoverlay2

The HTML code in the Custom Overlay HTML section above defines the standard 4 navigation links. The class 'controlbar' is defined in the configuration CSS section as follows:

/* Controlbar example */
.controlbar {
background: url(/plugins/content/highslide/graphics/controlbar4.gif);
width: 167px;
height: 34px;
.controlbar a {
display: block;
float: left;
/*margin: 0px 0 0 4px;*/
height: 27px;
.controlbar a:hover {
background-image: url(/plugins/content/highslide/graphics/controlbar4-hover.gif);
.controlbar .previous {
width: 50px;
.controlbar .next {
width: 40px;
background-position: -50px 0;
.controlbar .highslide-move {
width: 40px;
background-position: -90px 0;
.controlbar .close {
width: 36px;
background-position: -130px 0;

The options specified above will cause any thumbnail/popup in this article to automatically get the navigation control bar, without having to specify anything in the thumbnail/popup definitions themselves. Click on the thumbnails below.

Thumbnail image Thumbnail image Thumbnail image


 Thumbnail image  Thumbnail image

Her er kun defineret Thumbnail id   som er Thumbnail1 samt en slideshow gruppe ved navn test3

One benefit of using this method to create the overlay is that the definition carries over from one page to another.

Thumbnail image Thumbnail image Thumbnail image

None of the thumbnail/popups in this article directly reference the custom overlay. All the definition was done in in the Highslide configuration.

You can restrict which thumbnail/popups qualify for the custom overlay by specifying either a Thumbnail id or Slideshow group in the custom overlay settings. For example, a thumbnail id of 'thumb4' in the custom overlay settings would restrict the overlay to thumbnail/popups with a thumbnail Id equal to 'thumb4' in the Id field of the Thumbnail tab in the HsExpander plugin.



Likewise, a slideshow group of 'group1' in the custom overlay settings would restrict the overlay to thumbnail/popups with a slideshow group equal to 'group1' in slideshow group field of the Popup tab of the HsExpander plugin.



Finally, the use of a custom overlay does not preclude you from using a custom overlay in the HsExpander or HsHtmlExpander plugins. This means that you can define a text overlay, for example, as well has having a navigation controlbar overlay.

Thumbnail image



Last Updated on Sunday, 15 April 2012 10:15