Highslide JS API Reference

Close Move
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dapibus leo quis nisl. In lectus. Vivamus consectetuer pede in nisl. Mauris cursus pretium mauris. Suspendisse condimentum mi ac tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. Donec mollis, mi at tincidunt vehicula, nisl mi luctus risus, quis scelerisque arcu nibh ac nisi. Sed risus. Curabitur urna. Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque nonummy pretium tellus.
Resize

Object: hs

Variables

Functions

Events

Object: hs.Expander

Variables

Functions

Events



hs.headingOverlay

Overlay options for the heading, as listed under hs.registerOverlay.
The heading is a subset of custom overlays, and overlay options can be applied to it. This means for example that the heading can be placed in all overlay positions like to the right of the image or on top of the image. For a complete list of options, see hs.registerOverlay. All options except overlayId, thumbnailId and slideshowGroup are available.

Details

Requires overlays
Type object
Default value
Overrideable inline Yes

Example

Displaying the heading on top of the image

We will make it appear on top of the image, with an opacity of .75, width of 100% and hidden on mouse out.

Put this code in the head section of your page. This affects all expanders on your page.

<script type="text/javascript">
	hs.headingOverlay.position = "top";
	hs.headingOverlay.width = "100%";
	hs.headingOverlay.opacity = .75;
	hs.headingOverlay.hideOnMouseOut = true;
</script>

Alternatively, to set the options for a single expander, apply the settings in a nested object in the second parameter of hs.expand, like this.

<a class="highslide" href="../samples/full1.jpg" 
      onclick="return hs.expand(this, { headingOverlay: 
      { position: 'top', width: '100%', opacity: .75, hideOnMouseOut: true } })">
   <img src="../samples/thumb1.jpg" alt=""/>
</a>

The effect:

This is the image title

See also

New, Edit