Home Documentation Highslide JS for Joomla HsExpander Example 1: A simple thumbnail/popup image (old)
02 | 04 | 2023
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.
HsExpander Example 1: A simple thumbnail/popup image (old)
Thursday, 29 May 2008 15:59

This example shows how to add a simple thumbnail/popup image to your content.  Edit your article with JCE and position your cursor whereever you would like the thumbnail to appear.  Click on the HsExpander button. hsexpander.gif

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

Highslide Expander Popup tab


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

Highslide Expander Popup tab

Do the same operation from the Thumbnail tab to specify your thumbnail image.

Highslide Expander Thumbnail tab

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.


Now, lets update the thumbnail/popup that you just inserted in your document. Edit your article again, click once on the thumbnail in the document to select it and click on the HsExpander button. This should bring up the Highslide Expander dialog window again, only this time it should already show the URL information that was entered previously. Notice the 'Inline overrides' section on the popup tab. These are options that you can set for this instance of thumbnail/popup only. They override similar options that are present in the Site Configuration or article specific configuration if it exists. Try it. Set 'Outline' to 'rounded-white', for example, click update and save your document.

Highslide Expander Inline overrides

Your expander should now resemble the one below when you click on it.

Last Updated on Wednesday, 17 June 2009 07:44