hs.headingOverlay
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
