Home Documentation Highslide JS for Joomla Configuration: Custom Overlay
12 | 10 | 2019
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

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.

custom overlay settings thumbnail id example

Thumbnail Id example

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.

custom overlay settings slideshow group example

Slideshow group example

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