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

Define transitions other than the default zoom in and out

The transitions property is an array with one or two items. The first item applies to opening or closing the expander on it's own. If a second parameter is given, this will apply when hs.previous or hs.next is called through links or key listeners. Valid transitions from version 3.3 are "expand" (default) and "fade". Using the fade transition looks good on HTML content, but it is processor heavy and should be used with care for image expanders. Also note that the crossfade transition forces hs.preserveContent to be false on HTML expanders.

This is the way to define a transition with two levels:

hs.transitions = ["expand", "crossfade"];

Details

Requires transitions
Type array
Default value []
Overrideable inline Yes

Example

Example 1: Two image expanders with crossfade transition.

These thumbnails use a crossfade transitions between them, but an expand transition on opening and closing.

Put this in the head section of your page:

<script type="text/javascript">
   hs.transitions = ["expand", "crossfade"];
</script>

Use the right and left arrow keys to navigate between the thumbnails and notice the crossfade:



Example 2: A HTML expander with fade transition

Put this in the head section of your page:

<script type="text/javascript">
   hs.transitions = ["fade"];
   hs.outlineType = "rounded-white";
</script>

Tested on a HTML expander:

Click me

See also

New, Edit