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.onCreateOverlay

Fires before the overlay is added to a single hs.Expander obect.
boolean hs.Expander.prototype.onCreateOverlay ( hs.Expander sender, object e)
Returning false prevents the overlay from being connected to the expander. The overlay div can be accessed through e.overlay.

Details

Requires events, overlays
Type event
Returns bool

Parameters

sender
The sender object in this context is the hs.Expander instance.
e
e.overlay is a pointer to the overlay div.

Example

Display a custom text in the overlay


Note: since version 4.0 you can do this more easily using the hs.headingOverlay or hs.captionOverlay options.

This example shows how replace a template variable in a predefined overlay.

1. In a script tag in the head section of your page, call the hs.registerOverlay function. In this case thumbnailId is set to null, as we want the overlay to tie to all expanders.

hs.registerOverlay(
    {
        thumbnailId: null,
        overlayId: 'my-overlay',
        position: 'top left',
        hideOnMouseOut: true,
        opacity: 0.8
    }
);

Also in the script tag, define the event handler to replace the text in the overlay.

hs.Expander.prototype.onCreateOverlay = function (sender, e) {
   e.overlay.innerHTML = e.overlay.innerHTML.replace("{altattrib}", sender.thumb.alt);
};

3. A div containing your overlay, with an id corresponding to the overlayId above, is created somewhere in the body of your HTML page. Styles can be set inline or using CSS rules. Notice the variable name that we are replacing, in this case we called it {altattrib}.

<div class="highslide-overlay" id="my-overlay" 
      style="background: black; font-weight: bold;
      color: white; margin-top: 2em; padding: 1em">
   The alt attribute of this thumbnail is:
   <br/>
   <span style="font-size: 150%;color:white">{altattrib}</span>
</div>

4. The normal expander markup.

<a class="highslide" href="../samples/full3.jpg" onclick="return hs.expand(this)">
   <img src="../samples/thumb3.jpg" alt=""/>
</a>

This is the effect of the above:

The alt attribute of this thumbnail is:
{altattrib}
Rafting A green Norwegian fjord

See also

New, Edit