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

Fires when the onclick event is set on an element in unobtrusive mode.
boolean hs.onSetClickEvent ( object sender, object e )

The onSetClickEvent event offers a way to distinguish between different classes of expanders when Highslide is used in unobtrusive mode. In inline mode, individual parameters are sent to the hs.Expander object through the second parameter of the hs.expand function within the onclick attribute. In unobtrusive mode no onclick attribute is defined for the HTML element, so you may use class names or other identifiers to distinguish different thumbnails, then add the onclick event as desired.

Returning false from the event handler results in no Highslide action being set for the element.

Details

Requires events, unobtrusive
Type event
Returns boolean

Parameters

sender
The sender object in this context is the hs object.
e
e.element
A link to the HTML element.
e.type
If e.type is undefined the instance is an image expander (rel="highslide"). If e.type is "ajax" or "iframe", the instance is an Ajax or iframe expander (rel="highslide-ajax", rel="highslide-iframe").

Example

Setting slideshowGroup

In this example we set the hs.slideshowGroup option for four expanders based on the parent item's class name. We also print out the group name in the caption for debugging purposes.

Define the onSetClickEvent event handler in the head section of your page:

<script type="text/javascript">
hs.onSetClickEvent = function ( sender, e ) {
   // set the onclick for the element, output the group name to the caption for debugging
   e.element.onclick = function () {
      return hs.expand(this, { slideshowGroup: this.parentNode.className, 
         captionText: this.parentNode.className });
   }
   // return false to prevent the onclick being set once again
   return false;
}
</script>

The markup looks like this:

<div class="group1">
   <a href="../samples/full1.jpg" rel="highslide" class="highslide">
      <img src="../samples/thumb1.jpg" alt=""/>
   </a>
   <a href="../samples/full3.jpg" rel="highslide" class="highslide">
      <img src="../samples/thumb3.jpg" alt=""/>
   </a>
</div>

<div class="group2">
   <a href="../samples/full1.jpg" rel="highslide" class="highslide">
      <img src="../samples/thumb1.jpg" alt=""/>
   </a>
   <a href="../samples/full3.jpg" rel="highslide" class="highslide">
      <img src="../samples/thumb3.jpg" alt=""/>
   </a>
</div>

The effect:

See also

New, Edit