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

New, Edit