Home Documentation Highslide JS for Joomla Configuration: Custom Overlay
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.
Configuration: Custom Overlay
Wednesday, 04 June 2008 23:56
Article Index
Configuration: Custom Overlay
More Information
All Pages


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.

Custom Overlay Section

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.Custom Overlay HTML section

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

Last Updated on Sunday, 15 April 2012 10:15