The example can be seen live at http://www.highslide.com/studies/custom-control.html .
1) Add this to a script tag in the head section of your page or in a separate .js file. It overwrites the default hs.skin.controls.
Code: Select all
hs.skin.controls = '<div class="highslide-controls"><ul>'+
'<li class="highslide-previous">'+
'<a href="#" title="{hs.lang.previousTitle}">'+
'<span>{hs.lang.previousText}</span></a>'+
'</li>'+
'<li class="highslide-play">'+
'<a href="#" title="{hs.lang.playTitle}">'+
'<span>{hs.lang.playText}</span></a>'+
'</li>'+
'<li class="highslide-pause">'+
'<a href="#" title="{hs.lang.pauseTitle}">'+
'<span>{hs.lang.pauseText}</span></a>'+
'</li>'+
'<li class="highslide-next">'+
'<a href="#" title="{hs.lang.nextTitle}">'+
'<span>{hs.lang.nextText}</span></a>'+
'</li>'+
'<li class="highslide-move">'+
'<a href="#" title="{hs.lang.moveTitle}">'+
'<span>{hs.lang.moveText}</span></a>'+
'</li>'+
'<li class="highslide-full-expand">'+
'<a href="#" title="{hs.lang.fullExpandTitle}">'+
'<span>{hs.lang.fullExpandText}</span></a>'+
'</li>'+
// Start new button code
'<li class="highslide-spinner">'+
'<a href="#" title="Spinner" onclick="alert(\'You just hit the spinner\')">'+
'<span>Spinner</span></a>'+
'</li>'+
// End new button code
'<li class="highslide-close">'+
'<a href="#" title="{hs.lang.closeTitle}" >'+
'<span>{hs.lang.closeText}</span></a>'+
'</li>'+
'</ul></div>';
Code: Select all
<style type="text/css">
/* Add 30px (or the width of the button) to the width of .highslide-controls. It is by default 195px. */
.highslide-controls {
width: 225px;
}
/* Add a background graphic for the button. For simplity this example uses a graphic from the download package. */
.highslide-controls .highslide-spinner a {
background: url(../highslide/graphics/loader.white.gif) no-repeat 8px;
}
</style>