hs.Expander.prototype.createOverlay
void hs.Expander.prototype.createOverlay ( object options)
Using this function in combination with the onBeforeExpand event handler lets you create a specific overlay for each expander on the fly without defining it in your page's content. If you want to add more overlays than the
heading and
caption can offer, you can use this option.
Details
| Requires |
overlays |
| Type |
function |
| Returns |
void |
Parameters
- options
- An object containing a subset of the options for hs.createOverlay, namely:
- fade (mixed)
- Whether the overlay should fade in and out. Possible values 0/false, 1/true, 2. Fading in and out is problematic in IE if you put alphatransparent PNGs in the overlay, either through AlphaImageLoader or not. In this case, set the fade to 2 to skip fading in IE only. An example can be seen at example-no-border.html.
- overlayId (DOMElement or string)
- Albeit somewhat ambiguously named, this parameter takes either a DOM element or the id of a DOM element. In the second case, the element is cloned so that it can be used by other instances later.
- position (string)
- specifies where the overlay will appear related to the full-size image. The first word specifies the vertical position and can be top, center or bottom, and the second word can be left, center or right. If you want to put some air between the overlay and the edge of the image, you use regular CSS margins on the overlay div. You can also display the overlay outside the image in any direction by giving the div negative margins, though an IE bug prevents you from using opacity < 1 on such overlays.
- hideOnMouseOut (bool)
- Defines whether the overlay should be hidden when the mouse leaves the full-size image.
- opacity (float)
- Can be a float number between 0 and 1 (fully opaque).
- zIndex (integer)
- The optional z index of the overlay. Defaults to 4 or 5.
Example
Display a custom text in the overlay
Since version 4.0 this is more easily done using a regular heading, but the example is kept for reference.
This example shows how to create an instance specific overlay without defining it in the HTML of your page, then populate it with content. Note that this approach requires that you use a Highslide configuration with the events component.
Put the following code in the head section of your HTML page or in a separate .js file.
<style type="text/css">
/* Define some presentational styles for the overlay */
.highslide-overlay {
text-align: center;
background: black;
font-weight: bold;
font-size: 150%;
color: white;
padding: 10px;
}
</style>
<script type="text/javascript">
hs.Expander.prototype.onBeforeExpand = function (sender, e) {
// create a new DOM element
var div = document.createElement('div');
// add a class name to allow CSS styling
div.className = "highslide-overlay";
// use the thumbnail's alt attribute as inner HTML
div.innerHTML = sender.thumb.alt;
// attatch it to this hs.Expander instance and add some options
sender.createOverlay( { overlayId: div, position: "top left",
hideOnMouseOut: true, opacity: 0.8, width: '100%' } );
}
</script>
This is the effect of the above:
See also
