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.Expander.prototype.createOverlay

Create a custom overlay for a single expander instance
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:

Rafting A green Norwegian fjord

See also

New, Edit