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?

Thu Jun 04, 2009 9:31 am

Adding a button the the gallery controls requires that you edit the 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 .

1) Add this to a script tag in the head section of your page or in a separate .js file. It overwrites the default

Code: Select all = '<div class="highslide-controls"><ul>'+
	'<li class="highslide-previous">'+
		'<a href="#" title="{hs.lang.previousTitle}">'+
	'<li class="highslide-play">'+
		'<a href="#" title="{hs.lang.playTitle}">'+
	'<li class="highslide-pause">'+
		'<a href="#" title="{hs.lang.pauseTitle}">'+
	'<li class="highslide-next">'+
		'<a href="#" title="{hs.lang.nextTitle}">'+
	'<li class="highslide-move">'+
		'<a href="#" title="{hs.lang.moveTitle}">'+
	'<li class="highslide-full-expand">'+
		'<a href="#" title="{hs.lang.fullExpandTitle}">'+

	// Start new button code
	'<li class="highslide-spinner">'+
		'<a href="#" title="Spinner" onclick="alert(\'You just hit the spinner\')">'+
	// End new button code

	'<li class="highslide-close">'+
		'<a href="#" title="{hs.lang.closeTitle}" >'+
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;
Torstein Hønsi
CTO, Founder

Return to “Highslide FAQ”