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.
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) Add this code to your CSS file or to a style tag in your head section. The CSS applies to the HTML as defined in the hs.skin.controls variable. It uses a single background image to draw the controls in three phases: active, hover and disabled. See CSS sprites for a better understanding of the technique involved.
/* Controls. See http://www.google.com/search?q=css+sprites */
.highslide-controls {
width: 195px;
height: 40px;
background: url(highslide/graphics/controlbar-black-border.gif) 0 -90px no-repeat;
margin-right: 15px;
margin-bottom: 10px;
margin-top: 20px;
}
.highslide-controls ul {
position: relative;
left: 15px;
height: 40px;
list-style: none;
margin: 0;
padding: 0;
background: url(highslide/graphics/controlbar-black-border.gif) right -90px no-repeat;
}
.highslide-controls li {
float: left;
padding: 5px 0;
}
.highslide-controls a {
background: url(highslide/graphics/controlbar-black-border.gif);
display: block;
float: left;
height: 30px;
width: 30px;
outline: none;
}
.highslide-controls a.disabled {
cursor: default;
}
.highslide-controls a span {
/* hide the text for these graphic buttons */
display: none;
}
/* The CSS sprites for the controlbar */
.highslide-controls .highslide-previous a {
background-position: 0 0;
}
.highslide-controls .highslide-previous a:hover {
background-position: 0 -30px;
}
.highslide-controls .highslide-previous a.disabled {
background-position: 0 -60px !important;
}
.highslide-controls .highslide-play a {
background-position: -30px 0;
}
.highslide-controls .highslide-play a:hover {
background-position: -30px -30px;
}
.highslide-controls .highslide-play a.disabled {
background-position: -30px -60px !important;
}
.highslide-controls .highslide-pause a {
background-position: -60px 0;
}
.highslide-controls .highslide-pause a:hover {
background-position: -60px -30px;
}
.highslide-controls .highslide-next a {
background-position: -90px 0;
}
.highslide-controls .highslide-next a:hover {
background-position: -90px -30px;
}
.highslide-controls .highslide-next a.disabled {
background-position: -90px -60px !important;
}
.highslide-controls .highslide-move a {
background-position: -120px 0;
}
.highslide-controls .highslide-move a:hover {
background-position: -120px -30px;
}
.highslide-controls .highslide-full-expand a {
background-position: -150px 0;
}
.highslide-controls .highslide-full-expand a:hover {
background-position: -150px -30px;
}
.highslide-controls .highslide-full-expand a.disabled {
background-position: -150px -60px !important;
}
.highslide-controls .highslide-close a {
background-position: -180px 0;
}
.highslide-controls .highslide-close a:hover {
background-position: -180px -30px;
}
3) 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
