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

A specific CSS class for the wrapping div to enhance CSS control.
By giving each expander a specific class name, you can distinguish the CSS properties of all underlying elements using CSS's cascading properties.

Please note that if all the expanders should have the same style (which is generally a good idea), you don't use this approach. In that case you simply change the existing CSS for your exanders.

Details

Type string
Default value null
Overrideable inline Yes

Example

Distinguishing the border-color of two expanders

1. Define a different wrapperClassName for each:

<a class="highslide" href="../samples/full1.jpg" 
      onclick="return hs.expand(this, 
      { wrapperClassName: 'my-red-popup' })">
   <img src="../samples/thumb1.jpg" alt=""/>
</a>
<a class="highslide" href="../samples/full3.jpg" 
      onclick="return hs.expand(this, 
      { wrapperClassName: 'my-blue-popup' })">
   <img src="../samples/thumb3.jpg" alt=""/>
</a>

2. Define the corresponding cascading CSS rules:

.my-red-popup .highslide-image {
    border-color: red;
}
.my-blue-popup .highslide-image {
    border-color: blue;
}

The effect:

New, Edit