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