Home Documentation Highslide JS for Joomla Nesting Highslide Example
08 | 11 | 2020
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.
Nesting Highslide Example
Sunday, 08 June 2008 21:07
Article Index
Nesting Highslide Example
Creating the HTML Popup
All Pages

This example shows how you can nest highslide thumbnail/popups inside a highslide html expander. Click on the thumbnails below to get a better idea of what I mean.





Each popup consists of nothing more than the contents of another article. Nested Page 1 is the article displayed in the first popup and Nested Page 2 the article in the second popup.  These articles are displayed in the popup using using only the article content.  This is accomplished by appending &tmpl=component onto the end of the article link.  More about that later.

IFrame vs. Ajax

The thumbnails above illustrate two types of popups that can be used.  Each has their own advantages/disadvantages.

  • IFrame: The article is displayed in the popup just as though you were displaying it on a separate web page. All javascript, highslide configuration, css, etc. that you may have for the article is included in the popup. The disadvantage of an IFrame is that any popup windows created inside the IFrame cannot extend outside of the popup window.
  • Ajax: The article is displayed in the popup using the configuration of the article containing the thumbnail/popup. Popup windows created inside the Ajax popup can extend beyond the boundry of the popup window.
The popups above illustrate the differences.  Notice when clicking on the thumbnails in the IFrame popup that the navigation control bar works as it should but the popups will not extend outside of the IFrame window.  In the Ajax popup, the navigation control bar displays but does not function correctly.

As a further example, Nested Page 3 has been configured with a Highslide slideshow gallery.  Both thumbnails below use this article in their respective popups.





This tutorial assumes that you already know how to create a thumbnail/popup using the HsExpander plugin. Review the HsExpander Example 1: A simple thumbnail/popup image article if necessary. It is also assumed that you know how to logon to the back-end and edit the Highslide configuration settings.

First, create the article that you want to display in the popup window and populate it with your thumbnail/popups. Logon to the administrative back-end and click on the Content/Article Manager menu item to go to the Article Manager. Find your article in the article list and click on the article name to bring it up in the Article edit window. Set the 'Section' and 'Category' to uncategorized. Also, you will want to publish the article, so set 'Published' to Yes and save the article. Note: Using an uncategorized section/category is entirely optional.


Creating the HTML Popup

Now that we have the popup article created , we can add the thumbnail/popup to the original article. First, you must decide if you want the user to click on a thumbnail image or alternatively a text link to invoke the popup. If you want to use a thumbnail insert the thumbnail image in your article using the usual imagemanager plugin. Then in the editor click on the thumbnail image to select it. If you are going to use text link, enter the text that you wish to use and select it. With either the thumbnail image selected or text selected, click on the advlink plugin. This will bring up the advlink dialog box.


In the 'Link Browser' section, click on 'Content'. This will expand into a list of sections to choose from.  Scroll through the list until you find the article that you created for your popup and then click on it to set the link url.  Before clicking Insert, update the URL in the General section by appending &tmpl=component. This is what tells Joomla to include only the article content.


Click insert to create the link. Again, select either the thumbnail or the text that you used to create the link. Click on the HsHtmlExpander plugin. This will bring up the HsHtmlExpander dialog. We are going to use the HsHtmlExpander plugin to update the link that you created with the AdvLink plugin.

On the Expander tab, set IFrame or Ajax depending upon your preference.


On the HTML tab, set the pixel width and height that you want to use for the popup window.


Thats it. These are the most important parameters required to produce the popup.  Additional parameters on the remaining tabs can be set to achieve various effects but are entirely optional.


Last Updated on Tuesday, 09 February 2010 10:26