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.

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;
}

Highslide JS API Reference

Object: hs

Variables

Functions

Events

Object: hs.Expander