Highslide JS API Reference

Close Move
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dapibus leo quis nisl. In lectus. Vivamus consectetuer pede in nisl. Mauris cursus pretium mauris. Suspendisse condimentum mi ac tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. Donec mollis, mi at tincidunt vehicula, nisl mi luctus risus, quis scelerisque arcu nibh ac nisi. Sed risus. Curabitur urna. Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque nonummy pretium tellus.
Resize

Object: hs

Variables

Functions

Events

Object: hs.Expander

Variables

Functions

Events



hs.addSlideshow

Add a slideshow where images are grouped and given a common control bar.
void hs.addSlideshow ( object options )
The addSlideshow function takes a hs.slideshowGroup as one of it's parameters. Thumbnails that are given this same slideshowGroup will be connected to the slideshow. Adding a slideshow means that the user can start an automatic slideshow display, that previous and next buttons only work within the group, and that a controlbar for the slideshow is created automatically and overlaid on the images. Unlike controlbars in Highslide prior to 4.0, these controls don't need to be assigned using hs.registerOverlay. The controls can be heavily customised using the hs.skin.controls string, or CSS.

Details

Requires slideshow
Type function
Returns void

Parameters

options
An object containing some of the following options:
slideshowGroup (mixed)
This parameter defines which thumbnails to use for the slideshow. When left undefined, all thumbnails are used regardless of slideshowGroup. Since version 4.0.7, the parameter can be an array of slideshowGroup strings or numbers. See hs.slideshowGroup.
interval (integer)
The amount of millisecond that each slide will show. Defaults to 5000.
repeat (boolean)
Whether to start over from the first slide when going to the next from the last slide. Defaults to false.
useControls (boolean)
Whether to let Highslide create a controls overlay for the slideshow.
fixedControls (one of 'fit', true or false)
When this is true, Highslide aligns subsequent slides so that the controls are in the same position for the next image. This means the user can browse through the images using the "Next" button without moving the mouse. If fixedControls is set to 'fit', Highslide fixes the controls when possible, but ensures that the popup stays within the viewport.
overlayOptions (object)
The controls are internally added to the expander as a custom overlay. The appearance of the overlay is controlled by the overlayOptions. These options can be any of those listed under hs.registerOverlay except overlayId, thumbnailId, slideshowGroup and useOnHtml.
thumbstrip (object)
When a thumbstrip object is present, all thumbnails of this slideshowGroup are copied into a table and rendered in one of the overlay positions. The thumbstrip object takes the options listed under hs.registerOverlay to control the appearance of the thumbstrip overlay. Additionally, it takes the mode option which can be one of 'horizontal', 'vertical' or 'float'. See the barebone samples for a live demo.

Example

Example 1: A slideshow with two images

1) Put this code in the head section of your page.

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

// Optional: a crossfade transition looks good with the slideshow
hs.transitions = ['expand', 'crossfade'];
</script>

2) The thumbnails.

<a class="highslide" href="../samples/full1.jpg" onclick="return hs.expand(this)">
   <img src="../samples/thumb1.jpg" alt=""/>
</a>
<a class="highslide" href="../samples/full3.jpg" onclick="return hs.expand(this)">
   <img src="../samples/thumb3.jpg" alt=""/>
</a>

Observe the effect of the above:

Try moving the images by the move handle and then use the previous or next button. Observe how the next image is fixed to the button.

See also

New, Edit