Highslide js add control bar

Question

When I open an image in highslide there is no control bar. I downloaded the js from http://highslide.com/configurator.php and it is working but without controls like next, prev, move and close buttons.

the html code is:

<a id='1p' class='highslide' onclick='return hs.expand (this)' href='1.jpg'><img src='1_t.jpg' /></a>

Any solution?

Answer 1

Finaly I found the solution:

I've added this to head part of html code:

<script language="javascript" type="text/javascript">
hs.registerOverlay({
thumbnailId: null,
overlayId: "controlbar",
position: "top right",
hideOnMouseOut: true,
});
</script>

then this to body part (it can be placed anywhere):

<div id="controlbar" class="highslide-overlay controlbar">
<a class="previous" title="Previous (left arrow key)" onclick="return hs.previous(this)" href="#"></a>
<a class="next" title="Next (right arrow key)" onclick="return hs.next(this)" href="#"></a>
<a class="highslide-move" title="Click and drag to move" onclick="return false" href="#"></a>
<a class="close" title="Close" onclick="return hs.close(this)" href="#"></a>
</div>

Now the control buttons are enabled.

Answer 2

Better to use the dedicated addSlideshow function:

<script type="text/javascript">
hs.addSlideshow({
    interval: 5000,
    useControls: true,
    fixedControls: false,
    overlayOptions: {
        opacity: .6,
        position: 'top center',
        hideOnMouseOut: true
    }
});
</script>

You don't need to add anything else to the body. The highslide-full.js script and highslide.css stylesheet take care of the rest.

A simple example: http://highslide.com/examples/gallery-white.html