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

How do I add a button to the gallery controls?

Adding a button the the gallery controls requires that you edit the hs.skin and add some CSS for the button. In the example below a button is added to the left of the close button. When clicked the button alerts a text. For simplicity, the default loading icon is used as the background image of the button.

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>';
2) Add this CSS to a style tag in the head of your page or to a separate stylesheet.

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>
Torstein Hønsi
CTO, Founder
Highsoft

Return to “Highslide FAQ”