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
