torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Inject a controlbar into the caption using events

This example is in principle the same as that under onAfterGetCaption, but instad of adding a link we will add an entire controlbar.

1) Make sure you have a version of Highslide supporting events (see the Configurator).

2) Make an event handler and inject some HTML into the caption. In this example the controlbar is injected after the content. See the commented code for how to inject it before the content. Use CSS to style and position the controlbar. Edit the background image files to tweak the looks to your needs.

Code: Select all

hs.Expander.prototype.onAfterGetCaption = function() {
   if (sender.caption) {
      var html = '<div class="controlbar">'
	+'<a href="#" class="previous" onclick="return hs.previous(this)" title="Previous (left arrow key)"></a>'
	+'<a href="#" class="next" onclick="return hs.next(this)" title="Next (right arrow key)"></a>'
	+'<a href="#" class="highslide-move" onclick="return false" title="Click and drag to move"></a>'
	+'<a href="#" class="close" onclick="return hs.close(this)" title="Close"></a>'
	+'</div>';
      
      // inject after caption content
      sender.caption.innerHTML += html;

      // inject before caption content
      // sender.caption.innerHTML = html + sender.caption.innerHTML;
   }
}

Return to “Highslide JS Usage”