hs.expand
The function used to open an image popup inline.
boolean hs.expand( DOMElement element [, Object overrides [, Object custom]] )
The hs.expand function is used to open an image popup from the onclick attribute of a HTML element. It returns false on success and true on failure. The logic behind this is that when true is returned from an onlick attribute, the default action of the click fires. This presents a safe fallback for Highslide, as the default action of a properly defined element will be to go the image URL stated in the href attribute. The second and the third parameters of hs.expand presents ways to customize each single image popup.
If the "Unobtrusive" option is checked in the Configurator, the onclicks can be omitted alltogether, and Highslide anchors be identified by rel="highslide". In that case, hs.onSetClickEvent is the key to sending individual settings to the expander.
Details
| Type |
function |
| Returns |
boolean |
Parameters
- element
- Reference to the HTML element that opens the expander. When hs.expand is used in an onclick attribute, this parameter will be
this.
- overrides
- An object containing new definitions of hs settings. All settings defined in the hs.overrides array can be overridden for each single expander. See hs.overrides for further explanation and examples.
- custom
- A custom variable can be sent to the hs.Expander object through this parameter. The variable will then be available within the hs.Expander as
this.custom. To send more variables, use the {} object notation. See hs.Expander.prototype.custom.
Example
In it's simplest form
All hs settings will be taken from the global definitions.
<a class="highslide" href="../samples/full3.jpg" onclick="return hs.expand(this)">
<img src="../samples/thumb3.jpg" alt=""/>
</a>
The effect:
Even simpler, using the unobtrusive markup
All hs settings will be taken from the global definitions.
<a class="highslide" href="../samples/full3.jpg" rel="highslide">
<img src="../samples/thumb3.jpg" alt=""/>
</a>
The effect:
Defining settings for a single expander
The hs.outlineType and hs.targetX properties are overridden through the second argument of hs.expand.
<a class="highslide" href="../samples/full3.jpg"
onclick="return hs.expand(this,
{ outlineType: 'rounded-white', targetX: 'thumb1' })">
<img src="../samples/thumb3.jpg" alt=""/>
</a>
The effect:
Passing custom variables
Variables passed through the third parameter of hs.expand can be accessed within the hs.Expander object. In this example the custom variable is alerted when the user clicks the "Click me" text in the caption.
<a class="highslide" href="../samples/full3.jpg" onclick="return hs.expand(this, null,
{ myAlert: 'This is a custom variable' } )">
<img src="../samples/thumb3.jpg" alt=""/>
</a>
<div class="highslide-caption">
<h1 onclick="alert(hs.getExpander(this).custom.myAlert)">Click me</h1>
</div>
The effect:
Click me
For another example of using the custom parameter, see hs.Expander.prototype.custom.
Opening the expander from JavaScript without using an anchor
The first parameter of hs.expand is normally a reference to the opener anchor. When opening from JavaScript directly we don't have an opener anchor, so we pass null instead. Now the animation starts from the center of the screen. Also, since we don't have an anchor, we can't get the URL of the image (or iframe, Ajax or SWF file) from the opener's href. So we need to pass a hs.src.
hs.expand(null, {
src: 'image1.jpg'
});See also
