Introduction

A feature of the Highslide JS for Joomla configuration component is the 'Slideshow Presets' section on the Slideshow tab.  These presets  provide quick access to a set of predefined slideshow configurations that you can use to create slideshow galleries in your articles. See below.

Select the preset that you wish to use, optionally set the additional preset parameters to suit your taste and publish the configuration.  You can then add highslide thumbnail/popup expanders to your article for inclusion in the gallery display.

NOTE: Do not set the 'Enable slideshow' parameter in the Slideshow Settings section to 'Yes' if you are only intending to use a slideshow preset.  Selection of the preset is all that you need to do to activate it.  Setting the 'Enable slideshow' parameter activates the settings in the 'Slideshow Settings' section and can interfere with the preset settings.

With a few exceptions, once you have added the highslide expanders to your article, you can switch from one slideshow preset to another by simply selecting a different preset and republishing your highslide configuration.

A sample gallery page for each preset has been provided to show each slideshow configuration in action.

1. borderless-floating-caption.
2. controls-in-heading.
3. dark-design.
4. gallery-floating-thumbs.
5. gallery-horizontal-strip.
6. gallery-in-box.
7. gallery-in-page.
8. gallery-thumbstrip-above.
9. gallery-thumbstrip-below.
10. gallery-vertical-strip.
11. no-border-floating-caption.
12. white-design.
13. caption-overlay-small-thumbstrip

Adding images to the slideshow

You can use the Imageloader module or plugin to add images to your article for use with the gallery presets.  Imageloader gives you the ability to load the images from a directory of your choice and/or from a text configuration file.

If you decide that Imageloader does not fit your requirements, continue on with the sections below for details about using JCE HsExpander to add images for your slideshow.

Creating the gallery expanders

There are a couple of things to consider when adding highslide expanders to an article for inclusion in a slideshow gallery.

Which expanders will be included in the slideshow?

If you are going to have highslide expanders on the page other than those that will be included in the gallery or if you want to have more than one gallery on the page, you must somehow identify which expanders go in the galley and which ones do not.

This is done by assigning a slideshow group to the slideshow configuration as shown below.

For multiple galleries, you can specify additional slideshow groups by seperating them with a comma, i.e. gallery1, gallery2 ...etc.  Then,  assign each expander to one of the slideshow groups.

Which gallery expanders do you want visible on the page?

The example pages presented here hide all but one of the expander thumbnails from view.  To do this, decide which expander you want to be visible and assign a unique id to the thumbnail image of that expander as shown below.

For each expander that you want hidden, assign a class name of 'hidden-container' to the thumbnail image. This hides the thumbnail from view.

Also, on the options tab, set the Thumbnail Id parameter to the unique id of the visible expander ('thumb1'). This allows Highslide to expand/contract the gallery from the visible thumbnail image  For example, when you close the gallery while viewing one of the hidden images, the gallery will contract into the visible thumbnail.

Other Configuration Options

There are additional configration options  than you can use to indicate whether the gallery should repeat when reaching the last gallery image or whether to autostart the slideshow when the gallery is opened.  You can also specify how long the gallery image is to be displayed before transitioning to the next.  These are all a matter of choice.