It is currently Sat Dec 20, 2014 10:51 pm Advanced search

How do I add a button to the gallery controls?

Frequently asked questions.

How do I add a button to the gallery controls?

Postby torstein.honsi » Thu Jun 04, 2009 11:31 am

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 Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9204
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Return to Highslide FAQ

Who is online

Users browsing this forum: No registered users and 1 guest