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}
See also
