Home Documentation Highslide JS for Joomla Highslide JS for Joomla!®
10 | 31 | 2014
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.
Highslide JS for Joomla!®
Sunday, 20 April 2008 02:14

Highslide JS is a fabulous javascript thumbnail viewer written by Torstein Hønsi. It is highly configurable and its uses are limited only by your imagination. Click on the example images and links below to get a taste of what Highslide JS can do.

Highslide JS Examples

Click to enlarge Highslide JS Highslide JS
Highslide JS Highslide JS Highslide JS

Highslide JS Highslide JS Highslide JS

HTML Content

Scrolling HTML Content

AJAX Content

Dynamic AJAX Content

Content in iframe

Display flash


Though Highslide JS is very configurable, its implementation into the Joomla environment can be somewhat intimidating, especially for novice users.

Highslide JS for Joomla exposes all of the flexibility of Highslide JS through a clear and concise configuration screen and JCE editor dialogs. The intent is to allow anyone, regardless of their skill level, to take full advantage of all that Highslide JS has to offer while minimizing, as much as possible, the need to get down to hardcore HTML coding.

Highslide JS for Joomla consists of the following software components:

  • Highslide JS Configuration Component. This Joomla administrative component comes with a default site configuration that you can use to implement Highslide JS in your web content almost immediately. In addition, you can add article specific configurations to override the site configuration for any article..
  • Highslide JS Plugin. This Joomla plugin inspects your web content as it is being prepared for display and automatically includes any necessary javascript and css files that are required for Highslide JS to function. The Highslide JS software is also installed along this plugin.
  • HsExpander JCE plugin. This Joomla content editor plugin allows you to define a Highslide JS thumbnail image along with its associated full-size image, optional caption, custom overlay and more. All in a single JCE dialog.
  • HsHtmlExpander JCE plugin. Similar to the HsExpander plugin, you can define a Highslide JS html expander, its associated html and more.

Requirements

Highslide JS for Joomla was written for Joomla 1.5.2 native or later. To use the entire package effectively, you must have JCE 1.5.2 installed. JCE is a very popular content editor for Joomla, written by Ryan Demmer, and can be downloaded (for free) from joomlacontenteditor.net.

How It Works

The Highslide JS configuration component adds 1 table to your MySQL database during initial installation. The HsConfig table initially contains 1 entry called the Site Configuration. It is preconfigured with default settings that you may alter as you deem necessary. In addition to the Site Configuration, you may create article specific configuration entries for any article in your Joomla site. The article specific configuration entry will be used, if published, in lieu of the Site Configuration whenever that article is displayed.

Before any configuration entry can be used by the Highslide JS plugin, however, it must be published. Publishing consists of creating a javascript and css file that contains the specifics of the configuration. Whenever an article is prepared for display, the Highslide JS plugin examines the contents of the article to see if any Highslide related links are present. If so, the header section of the document is updated to include either the article specific javascript and css Highslide configuration files if they exist or the Site Configuration files.

The JCE HsExpander and HsHtmlExpander plugins are used to define and maintain the necessary Highslide JS links in your web content.

Installation

After downloading the individual software components from the Downloads section, log on to your administrative back-end and go to the Extensions/Install/Uninstall menu item and perform the following steps:

  1. Click on the browse button in the Upload Package File section. Select the Highslide JS Configuation Component (com_hsconfig_n_n_n.zip) that you previously downloaded and click on 'Upload File and Install'. This should result in a message indicating that the configuration component was installed successfully.
  2. Again, click on the browse button in the Upload Package File section. Select the Highslide JS Plugin (plg_highslide_n_n_n.zip) that you previously downloaded and click 'Upload File and Install'. This should result in a message indicating that the plugin was successfully installed.
  3. Select the Extensions/Plugin Manager menu item. Locate the 'Content - Highslide' plugin in the plugin list. Either click on the red circle with the 'X' in it to enable the plugin, or turn on the check mark next to the plugin name and click on the 'Enable' icon. This should enable the plugin.
  4. From the Components menu, select the Highslide JS Configuration menu item. This should result in the display of your highslide configuration entries. There should only be the Site Configuration entry. Click on 'Site Configuration' to display the configuration page. Click on the 'Save/Publish' icon to save and publish the site configuration.
  5. From the Components menu, select the JCE Administration/Install menu item. Click on the browse button in the Upload Package File section. Select the JCE HsExpander plugin (jce_plugin_hsexpander_n_n_n.zip) that you previously downloaded and click on the 'Upload File and Install' button. You should get an indication that the plugin was successfully installed.
  6. Click on the browse button in the Upload Package File section. Select the JCE HsHtmlExpander plugin (jce_plugin_hshtmlexpander_n_n_n.zip) that you previously downloaded and click on 'Upload File and Install'. You should get an indication that the plugin was successfully installed.
  7. If you are new to JCE make sure your login or global configuration is setup to use the JCE editor when you edit an article rather than the default tinyMce editor.

Thats it. You now have everything you need to get going with Highslide JS for Joomla. Have a look at the Documentation section of the site for tips and examples. If you have problems, questions or would just like to make a comment in general, feel free to visit the forums. Good luck.

Last Updated on Saturday, 13 July 2013 08:44