Home Documentation Highslide JS for Joomla How to use the HsExpander JCE plugin
12 | 14 | 2018
NOTICE: If you intend to use Highslide JS on a commercial website you MUST purchase a license from the author. Please go to Highslide.com for more details.
How to use the HsExpander JCE plugin
Thursday, 29 May 2008 15:59
This document shows how to use the various features and options of the HsExpander JCE plugin to add Highslide thumbnail/popup images to your content.  Edit your article with the JCE editor and position your cursor whereever you would like the Highslide thumbnail to appear.  Click on the HsExpander button. hsexpander.gif

This should bring up the Highslide Expander Dialog window as shown below.

hsexpander_example1a

Expander Tab

Inserting a thumbnail/popup

From the Expander tab, either enter the name of your full-size image in the Popup Image URL field or click on the button to the right of the URL field to bring up a file browser window to locate and select your image.

hsexpander_example1b

Do the same operation for the Thumbnail Image URL to specify your thumbnail image. TIP

hsexpander_example1c

That's it. Click on Insert and save your document. You should now have a thumbnail that expands to the full-size image when you click on it.

You can also add a popup image to a text link or an already existing image.  See 'Text link' below.

Text link.

Just select the text or image that you wish to use and click on the HsExpander button.

hsexpander_example1e

When the HsExpander dialog window appears, enter the Popup Image Url information as was done in the previous example.  In the case of a text link,  the Thumbnail Image section will be blank and anything entered in those fields will be ignored.  For an already existing image, the Thumbnail Image Url should contain the name of the image that you selected.

Updating a thumbnail/popup

To update an existing expander, click on the thumbnail image or the text link to select it and then click on the HsExpander button in the editor. This should bring up the Highslide Expander dialog window again, only this time it should already show the URL information that was entered previously.  In the following example, the Title field in the Popup Image section is being updated with the value 'Click'.  This will cause a tooltip to be displayed when the user hovers the mouse over the thumbnail/popup link. (Notice that an Alternate Text value of 'Thumbnail image' is present in the Thumbnail Image section.  This is automatically added to thumbnail images if you don't specify an alternate text value when the expander is inserted.)

hsexpander_example1f

The expander should now display a tooltip when the mouse hovers over it. (Note: Internet Explorer 7 will display the Alternate Text value rather than the Title information). TIP

Thumbnail image

Unobtrusive Markup

Some users prefer seperating content from behavior.  Basically, this means that the html markup for an expander is restricted to only the attributes needed to describe the content of the expander.   Attributes that determine how the expander behaves or appears when the popup is activated are not allowed.  Instead, the behavioural attributes are taken from the highslide configuration and are completely seperate from the article content itself.  This is referred to as 'unobtrusive markup'.  You can elect to use 'unobtrusive markup' by simply selecting the 'Unobtrusive markup' checkbox on the Expander tab.

hsexpander_example1g

Notice that when unobtrusive markup is selected, the only tab available in the HsExpander dialog is the Expander tab.  These are the only attributes allowed for this type of expander.   Behavioural attributes of the expander and all expanders in the artiicle using unobtrusive markup, are dictated by the highslide configuration for the article.  Attributes such as outline type, popup alignment.. etc must be set there.

Last Updated on Saturday, 19 September 2009 12:31