HsHtmlExpander Example 5: JW FLV MediaPlayer

This example demonstrates how you can display the JW FLV MediaPlayer 5.4 in an highslide popup. Click here to see the player in action.

The highslide HsHtmlExpander was used to create the link above. It loads an external html file into an Iframe via highslide. The external html file loads and initializes the media player. All the files used in this example are stored in a directory named images/stories/flash.

You can see the contents of the external html file by right clicking on the 'here' link above and selecting 'open link in new window' from the context menu. This should open a page with just the player on it. Right click on that page and select 'view source' from the context menu to see the contents of the external html file.

The settings used in the HsHtmlExpander are shown below.

htmlexpander1

 

htmlexpander2

htmlexpander3

 

 

 

 

HsHtmlExpander Example 4: AJAX Content

This example will show how you can add a highslide ajax html thumbnail/popup to an article, like the two shown below. Click on the thumbnails to see the html popup.

full6 full9

To begin, add the first thumbnail image by positioning your cursor in the document where you want the thumbnail to appear and clicking on the JCE Image Manager icon.

htmlexample_4a

This invokes the JCE Image Manager where you can navigate through the file system and select your image.

htmlexample_4b

Notice the Details pane in the image above. The size of the image file that I selected is actually 600 pixels wide and 478 pixels high. I chose to let the browser resize the image to thumbnail size rather than creating an actual thumbnail sized image. You can do this by entering the horizontal size that you want the browser to use in the Dimensions area on the Image tab. Just enter the horizontal size and tab through the vertical size. Since the proportional checkmark is set, the vertical size will automatically be calculated to the correct size. Also, to put a little white space around the thumbnail, I entered a margin value of 10. After clicking Insert, you should have a thumbnail image in your document as shown below.

htmlexample_4c

Repeat the steps above using a width of 150 pixels to add the second thumbnail. Now with the thumbnails in place, you are ready to add the highslide ajax popup information. When the user clicks on the thumbnail, we want the contents of an html file that we have created to be displayed in the highslide popup. The html file contains a larger sized version of the image that was clicked on along with some text . To do this, click on the first thumbnail to select it and then click on the HsHtmlExpander icon to bring up the Highslide HTML expander plugin dialog.

htmlexample_4d

This will bring up the HsHtmlExpander plugin dialog window. The URL parameter must  point to the Html file that you want to appear in the popup, so click on the browse button next to the URL input field.

htmlexample_4e

That should invoke the file browser where you can select the html file that you wish to use.

htmlexample_4f

After clicking 'Insert' in the file browser, the URL parameter should point to the Html document.

htmlexample_4g

To understand the next step, we need to examine the html file that is going to be displayed in the highslide popup window. The contents of the file used in this example is shown below.

 

  1 

  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
 10 
 11 
 12 

 13 
 14 
 15 

 16 

 17 

 18 

 19 

 20 

 21 
 22 
 23 
 24 
 25 
 26 

 27 
 28 
 29 

 30 

 31 

 32 

 33 

 34 

 35 
 36 
 37 
 38 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
  http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Demo AJAX page</title>
</head>
<body>

<div id="horse1">
    <h3>Horses on the run</h3><p><div >
    <img style="float: left; padding: 5px; margin: 5px 5px 5px 5px;
      border: 2px solid black"
    src="/images/stories/imageflowdemo/full6.jpg"
    alt="Horses on the run" width="400px" /></div>
    <p>Highslide's AJAX engine lets you put your content in a 
      separate file and display
    it within a Highslide popup. If the file is HTML, you can 
      specify a specific <code>id</code>
    for Highslide to fetch. In this case, the <code>id</code> <i>
      horse1</i> was fetched.</p>
    <p>To see the source of the linked AJAX file, right click on
      the thumbnail that you clicked
    to open this popup, then choose <i>Open in new window/tab</i>.
      </p>
    <p>Highslide caches the AJAX content upon page load, so that 
      it sits ready to display
    instantly when the user clicks the thumbnail or link.</p>
</div>

<div id="horse2">
    <h3>Sunrise or Sunset?</h3><p><div >
    <img style="float: right; padding: 5px; margin: 5px 5px 5px 
      5px; border: 2px solid black"
    src="/images/stories/imageflowdemo/full9.jpg"
    alt="Horses on the run" width="250px" /></div>
    <p>Highslide's AJAX engine lets you put your content in a 
      separate file and display
    it within a Highslide popup. If the file is HTML, you can 
      specify a specific <code>id</code>
    for Highslide to fetch. In this case, the <code>id</code> <i>
      horse2</i> was fetched.</p>
    <p>To see the source of the linked AJAX file, right click on
      the thumbnail that you clicked
    to open this popup, then choose <i>Open in new window/tab</i>.
      </p>
    <p>Highslide caches the AJAX content upon page load, so that 
      it sits ready to display
    instantly when the user clicks the thumbnail or link.</p>
</div>
</body>
</html>

 

Notice that there are two DIV sections declared in the document (lines 10 and 24). One has an id of 'horse1' and the other has an id of 'horse2'. In this example, we will be using the same document to display the popups for both of the thumbnails. This is done by adding the id of the DIV that we want to use after the URL in the HsHtmlExpander window. So for the first thumbnail, I entered '#horse1' after the URL. This tells Highslide to use that DIV for the popup display.  In addition to the URL parameter, the Object type parameter should be set to 'Ajax'.

htmlexample_4h

On the Options tab for this example, the inline overrides outline, alignment, easing, easing close and fade in/out were set. These inline parameters are optional and will default to the highslide configuration settings if left unset.

htmlexample_4i

Finally, the parameters in the HTML tab were set as shown below.

htmlexample_4j

The content id parameter is an id that assigned to the DIV that will be added to the document for the thumbnail/popup link. It doesn't really matter what the value of it is as long as it is a unique id on the page. This id ties the Content text information to the thumbnail so that when you click on the thumbnail, the information in the content text section is referenced.

The style parameter of 'width: 600px;' tells highslide how wide to make the popup when it is displayed. Highslide will automatically determine from the width and the content being displayed how tall the popup needs to be. The width of the popup could also have been set using the 'object width' parameter.

Preserve content tells highslide whether you want to preserve changes made to the content or position of the popup. The first thumbnail in this example used a value no and the second popup was set to yes. Try it. Click on the first thumbnail to open the popup, move the popup window to another location on the page and then close it. Reopen the popup and it should open in the same place that it did originally. Now try the second thumbnail. After moving the popup and then closing it, it should reopen in the same place that you last closed it.

The content text area contains the HTML necessary to support the popup. Lets examine it more closely.

 

 1 
 2 
 3 

 4 
 5 
<div style="padding: 2px; height: 20px;">
<a href="#" onclick="hs.close(this)" class="control">{hs.lang.closeText}</a>
<a href="#" onclick="return false;" class="highslide-move control">
  {hs.lang.moveText}</a>
</div>
<div style="padding 0px 10px 20px;" class="highslide-body"></div>

 

Line 1 defines the DIV container for the popup links. The style parameter reserves a space of 20 pixels for the move and close links.

Lines 2 and 3 define the move and close links. Notice the use of {hs.lang.closeText} and {hs.lang.moveText} instead of the words 'Close' and 'Move'.  At page load time, these expressions are replaced with the proper text  for the preferred language that the viewer has set in their browser.  So, for example, someone with a preferred language of 'French' would see the word 'Fermer' for the close link instead of the english default 'Close'.

Line 4 teminates the DIV container for the popup links.

Line 5 defines to highslide, via the class name of 'highslide-body', the container that is to be used to display the contents of our external html file.

Thats it. Repeat the same steps for the second popup, using an id of '#horse2' after the URL.  Note, once you have successfully added a thumbnail/popup, you can click on the thumbnail to select it, copy it using CTRL+C and then paste the copy into the document using CTRL+V.  It is then just a simple matter of selecting the copy and updating it to produce a subsequent thumbnail/popup.

Article Content

A variation of this procedure can be used to display the contents of a Joomla article in a highslide popup.

Article link <--- Click on this link to see the example.

First, create a normal link to an article by highlighting the link text and selecting the Advanced link plugin.

htmlexample_4k

This brings up the Advanced Link plugin window.  Select an article from the Content menu in the Link Browser section and click Insert.

htmlexample_4l

Now, click on the new link to make sure it is selected and then click the HsHtmlExpander button.

htmlexample_4m

This will bring up the HsHtmlExpander window.  Click in the URL field and append &tmpl=component to the link information that is already filled in.  This tells Joomla to display only the contents of the article instead of the entire webpage.

htmlexample_4n

All that remains is to fill in the remaining fields in the Popup and HTML tabs just as was done in the previous example.

Self-Rendering Mode

The first example in this document showed how you can provide a content id and html content on the HTML tab.  The html in the content area can be modified as you wish to suit your requirements.

The last example used an alternative method called self-rendering mode.  In this mode the content id and html content in the HTML tab is omitted.  When a content id is not specified, Highslide will internally create the html content as defined or defaulted by the skin specification in the highslide configuration.  The default skin is basically the same as the html that was used in the first example. When using self-rendering mode, you must specify the width parameter on the HTML tab to control the width of the popup.

Conclusion

As you can see, Highslide can be used to easily add some very impressive popups to your articles.

Good luck.

 

 

 

 

 

 
 HsExpander Example 3: Adding captions containing HTML (old)
 

In this example we will take a closer look at the following thumbnail/popup that appeared on the Highslide JS Examples page. Click on the thumbnail below and notice the PREVIOUS, NEXT, MOVE and CLOSE links.

Highslide JS

The HsExpander dialog entries used to create this thumbnail/popup look like this.

Thumbnail tab

The thumbnail tab contains the url to the thumbnail image. Notice the Title. This is the text that is displayed when you hover the mouse over the thumbnail. Try it.

Popup tab

The Popup tab contains the url to the full-sized image as well as some other interesting entries. The popup outline is defined to be 'rounded-white' for this popup and the alignment is set to 'Center'. This tells Highslide to move the popup image to the center of the browser window. This example also uses a wrapper class to apply custom CSS rules for this popup's caption. 'highslide-white' is defined in the CSS configuration as follows:

/* Individual CSS-classes: white */
.highslide-white {
background-color: white;
}
.highslide-white .highslide-image {
border: 5px solid white;
}
.highslide-white .highslide-caption {
background-color: white;
}
.highslide-white .control, .highslide-white .control * {
color: #666;
}
.highslide-white .highslide-html {
border: 2px solid white;
}

We examined the concept of a wrapper class in the previous example HsExpander Example 2: Adding captions to your thumbnail/popup.

Caption tab

And finally, the Caption tab. It contains a caption id to tie the Caption to this thumbnail/popup and the caption text. I have cleaned up the caption text a bit in order to better show what was really entered. JCE (tinymce is should say) adds a lot of stuff that basically reiterates what was actually entered. It tends to really garbage up the display of the caption text in the dialog window, but it doesn't really have an effect on how the caption is actually displayed. You'll see what I mean when you get to adding your own captions containing HTML. I have this on my list of 'todos' to try and figure out a better way to display this information in the dialog window.

Lets take closer look at what is actually contained in the caption text. Basically, it consists of an HTML DIV the contains 4 links for PREVIOUS, NEXT, MOVE and CLOSE. Each link contains an onclick attribute that calls highslide to perform the associated function. You can read more about these functions on the Highslide JS documentation page. Notice that each of these links uses a .control class. The control class is defined in our CSS configuration as follows:

.control {
float: right;
display: block;
margin: 0 5px;
font-size: 9pt;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}
.control:hover {
color: black !important;
}

Also, the link for the MOVE function has a class definition that contains 'highslide-move control'. This means that both CSS rules 'highslide-move' and 'control' are applied to this link. Again, you can read about the 'highslide-move' rule at the Highslide JS documentation page. Have a look at the thumbnails below to see these links in action.

As a side note, the 'Allow multiple instances' option in the highslide configuration for this article was modified to 'No'. This tells Highslide that you don't want multiple popups open at the same time. That is why the current popup closes and the previous/next popup opens when you click the associated link in the popups below.

The slideshow Group inline option on the Popup tab can be specified to tell Highslide that you want to restrict previous/next navigation to other thumbnail/popups with the same slideshow Group identifier. For the 3 above, the Slideshow group option of each thumbnail/popup was given the value 'group-shared'. Without this, clicking previous on the 1st popup would cause the popup-image at the very beginning of this article to open.

 

 
 

 

HsHtmlExpander Example 3: Scrolling HTML Content

Preliminary....

Scrolling HTML Content

These are the settings used in the 'Scrolling HTML Content' example above.

Options tab.

htmlexample3a.jpg

HTML tab.

htmlexample3b.jpg

Code to grap (<div style="border-bottom: 1px solid silver; padding: 5px; height: 20px;">
<a href="#" onclick="return hs.close(this)" class="control">{hs.lang.closeText}</a>
<a href="#" onclick="return false" class="highslide-move control">{hs.lang.moveText}</a>
</div>
<div class="highslide-body" style="padding: 10px;"></div>
<div style="border-top: 1px solid silver; text-align: center;" ><small>Powered by <i>Highslide JS</i></small>
</div>)

The Flash tab is not applicable.

 

 

Loading...
 
     
     
     

 

 

 

HsExpander Example 2: Adding captions to your thumbnail/popup (old)

This example builds on HsExpander Example 1: A simple thumbnail/popup image. You might want to view that example if you haven't already. Now that we have created a Highslide JS expander, it might be nice to add a caption to the image. There are several ways of accomplishing this. The Site/Article specific configuration has a 'Captions' section that allows you to choose what type of caption you would like to use.

Configuration 'Captions' section

Notice the options for 'Popup caption':

  • No Caption. This is the default.
  • ALT Attribute from IMG Tag. This will cause the ALT attribute from the thumbnail image to be used as the caption for all expanders.
  • Title Attribute from IMG Tag. The Title attribute from the thumbnail image will be used as the caption for all expanders.
  • Title Attribue from A HREF Tag. The Title attribute from the popup image will be used as the caption for all expanders.

To set one of these options in your configuration, you must log on to your administrative back-end, click on the Highslide JS Configuration menu item in the Components menu and select the appropriate configuration. For this example, I am going to create an article specific configuration entry and set the Popup caption to use the 'Title Attribute from A HREF Tag' option.

Popup Caption option

Click on the save/publish icon to save the configuration to the database and at the same time publish the configuration for use by the Highslide JS plugin. TIP

Now we need to edit our Highslide JS expander and add caption text in the Title attribute of the popup image. Click on the thumbnail to select it and then click on the HsExpander button to bring up the Highslide Expander dialog. Enter some text in the appropriate attribute, depending upon what you chose in your configuation, and click update.

Caption option

Your popup image should now have a caption similar to the one below.



Hover the mouse over the option name in the configuration window to display tooltip information about the option. Overrideable Inline information indicates whether the option can be overriden by a highslide expander/HTML expander.

Thumbnail image

This method is somewhat limited in that you must use the same attribute for all expanders in the article. Also, including HTML in the caption is not really an option. Thankfully, there is another way that we will explore next. It solves all of these restrictions and more. It involves the use of the the 'Caption' tab in the HsExpander dialog window.

Caption tab

Here you specify a caption id that is unique to the thumbnail/popup that you are inserting/updating and the caption text to be used as the caption. The caption text can contain any HTML content that you wish. What this actually does is define a hidden HTML DIV tag with a classname of 'highslide-caption' and an id equal to the caption id. The hidden DIV contains the caption text that you specified in the dialog. The caption id is used to tie the hidden DIV to the thumbnail/popup in which it was defined.

Lets take a look at one of the examples that was used on the Highslide JS Examples page. First the Caption tab.

Caption tab

A caption id of 'Caption-thumb3' is specified along with its associated caption text. Note that you must specify a caption id. Any caption text that you specify will be ignored unless a caption id is given. You can remove a caption from a thumbnail/popup simply by clearing out the caption id and saving. Next the thumbnail tab.

Thumbnail tab

Not much here, it just specifies the thumbnail image. Finally, the Popup tab.

Popup tab

The full-size popup image is specified here. Notice the Inline overrides section. A wrapper class of 'highslide-no-border' was specifed. What is a wrapper class? A wrapper class is used to give each thumbnail/popup it's own CSS properties. You can define a CSS rule that inherits a general rule but whose properties overwrite those of the general rule. For this example, a CSS rule named 'highslide-no-border' was defined as follows:

/* Individual CSS-classes: no border */
.highslide-no-border .highslide-image {
border: none;
border-bottom: 1px solid white;
}
.highslide-no-border .highslide-caption {
border: none;
border-bottom: 1px solid white;
background-color: #3659BA;
color: white;
}
.highslide-no-border code {
color: yellow;
}

The CSS rules above were added to the Highslide CSS portion of the article specific configuration for this example. Notice that the .highslide-no-border rule inherits from the .highslide-caption rule. It specifies no border, a solid white bottom border of 1 pixel, a background color and the color white for the text. The highslide-no-border rule also inherits the highslide-image rule. This also specifies no border and a solid white bottom border of 1 pixel. Finally, highslide-no-border code defines a color of yellow for any elements in the caption. Click on the thumbnail below to see the result.

Thumbnail image

Of couse, you don't have to go through all of this just to use captions, but as you can see, this can be used to produce some very attractive results.

If you've been following along adding captions to your own content, you've probably already noticed a problem. The addition of the hidden DIV for the captions is great, except that it isn't hidden when in comes to viewing the document in JCE. This can result in a very messed up display in the editor. For example, here is how the Highslide JS Examples page looks in the editor.

example2i.jpg

As you can see, this is not very WYSIWYG. Fortunately, for Firefox users, there is a solution. The JCE configuration defaults to using the template.css file from your current template to define the CSS rules that the editor uses for its display. Go to your current template /css directory and create a copy of the template.css called 'editor_content.css'. DO NOT modify your template.css file. Add the following lines to the new css file that you just created.

.highslide-caption { display: none; }
.highslide-html-content {
position: absolute;
display: none;
}

Log on to your administrative back-end and click on the JCE Administration/Configuration menu item. In the Formatting section, change the Use Template CSS option to No as shown below.

example2j.jpg

Also, make sure that the Use Custom CSS file option is specifed as shown above. Save the configuration. With this modification to the JCE configuration, the Highslide JS Examples page now displays in the editor like this:

example2k.jpg

Unfortunately, I haven't been able to get this to work in IE7 but it works beautifully in Firefox. I can't speak to other browsers because I don't have them to try it out. If anyone gets it to work in IE7 or can confirm that this works in something other than Firefox, please let me know and I will add that information here.

 

 

 

HsHtmlExpander Example 2: Display Flash

Using Self-Rendering Mode

Highslide JS can be used to display flash content in the expander popup window.  By far, the easiest way is to use Highslide's self-rendering mode.  Self-rendering mode simply means that you don't specify the HTML used for the popup in the expander, but rather, a 'predefined' content wrapper is automatically used to render the popup.  The content wrapper or skin can be changed in the Highslide configuration if the default skin does not meet your needs.  Click on the  HTML expander link below to see an example of self-rendering mode.

Self-Rendering HTML expander

As you can see, self-rendering mode provides a 'move' and 'close' link above the video portion of the display. The HsHtmlExpander settings used for the self-rendering example are explained below. First the Expander tab.

htmlexample2a

The expander tab is where you provide the link to the flash content that you want displayed in the popup.  Notice that 'Object type' is set to 'Flash'.

htmlexample2b

In the example, the Options tab was used to set the 'rounded-white' graphic outline for the popup window and to provide some caption text in the popup.  These settings are totally optional.

htmlexample2c

The Flash tab is where you define flash specific information. The object width and height values define the size of the video in the popup window and must be provided.  The remaining parameters on the tab are advanced Flash specific variables.  Unless you have a special requirement, you can ignore these for the most part.  The params setting shown above are only included to provide an example of how to specify the values.  You can find more information about flash variables, etc. on the highslide website.

Providing Your Own HTML Wrapper

If self-rendering mode does not meet your needs or you have a special requirement for a particular video, you can specify your own HTML wrapper in the HsHtmlExpander.  The expander below provides its own HTML wrapper to give the popup next and previous links as well as the move and close links.

Display Flash

The HsHtmlExpander settings for this expander are the same as the self-rendering mode example with the addition of the HTML tab settings.

htmlexample2d

The content id parameter is a required entry and is used to give your html wrapper a unique HTML id on the web page.  This can be used for css styling if desired. The value can be anything as long as it is a valid HTML id and is unique to all other ids defined on the page.

The style parameter is used to define the width of the popup window.  The height of the window is automatically determined by Highslide.

The html content area defines the HTML wrapper that you want to use for your popup content.  The HTML in the example can be broken down as follows:

A DIV is defined to provide space for the next, previous, move and close links followed by the 4 links themselves. A second DIV  with a class name 'highslide-body' is defined to tell highslide that this is where you wish the content, i.e. the flash video, to be placed in the popup.

Notice the {hs.lang.xxxx} values in the links.  These are language variables that get resolved at page load time. They are replaced with the appropriate text as defined by the viewers browser language setting.  For example, rather than hard coding the word 'Close' in the close link, the value {hs.lang.closeText} was used.  When the page is viewed by someone that has their browser's preferred language set to 'english', the variable is replaced with the word 'CLOSE'.  If another viewer with a  browser setting of 'french' views the same page, the variable will be replaced with the french term for close, i.e. 'FERMER'.

 

 

 

Loading...
 
     
     
     
 

 

HsExpander Example 1: A simple thumbnail/popup image (old)

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.

 

Thumbnail image

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.

Thumbnail image

 

 

 

 

HsHtmlExpander Example 1: Content in an IFrame

Content in iframe

 

Preliminary....

These are the settings used in the 'content in iframe' example on the front page.

Options tab.

htmlexampe1a.jpg

HTML tab

htmlexampe1b.jpg

 Code to pickup (<div class="html-header" style="border: 0pt none ;">
<a href="#" onclick="return hs.close(this)" class="control">{hs.lang.closeText}</a>
<a href="#" onclick="return false" class="highslide-move control">{hs.lang.moveText}</a>
</div>
<div class="highslide-body"></div>
<div style="border-top: 1px solid silver; padding: 5px 0pt; text-align: center;"><small>Powered by <i>Highslide JS</i> </small></div>)

The Flash tab is not applicable.

 

 

 

Loading...
 
     
     
     

 

 

How to use the HsExpander JCE plugin
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.

Thumbnail image

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.

 

 

 

 

HsExpander Example 4: Adding A Custom Overlay (old)
 

 

With Highslide JS you can create a custom overlay that overlays or superimposes content on top of the popup-image. To do this, you create an HTML DIV in the caption text and give it a class name of 'highslide-overlay'. The div also needs a unique id. Note that you cannot use this id to apply styles. Instead, you can apply additional class names to control CSS styles. Look at the Caption tab below.

Caption tab

You MUST specify a unique Caption Id even if you don't wish to have caption text displayed under the popup. This is because the HTML DIV that you define for the overlay is actually contained inside the DIV for the caption text. In the example above, you can see that a DIV was defined with the class names 'highslide-overlay' and 'overlay-text'. It was given an id of 'my-textoverlay'. The following rule was added to the Highslide CSS configuration to style the text in the overlay.

.overlay-text {
text-align: center;
background: blue;
font-weight: bold;
font-size: 120%;
color: white;
padding: 10px;
}

As you can see, bold white text should be centered on a blue background and oversized by 120%. The overlay id in the Custom Overlay section contains the id that was given to the 'highslide-overlay' div. This is used to register the overlay with Highslide JS. The remaining properties in the Custom Overlay section tell Highslide JS where on the popup-image to position the overlay and whether to remove the overlay from the image when the mouse is moved outside the popup. Also, an opacity value can be specified to vary the opacity of the overlay if desired. Click on the thumbnail below to see the result.

Thumbnail image

The next example shows how this can be used to add a navigation bar to your image. It contains a DIV with a class name of 'highslide-overlay' and an id of 'my-controlbar'.

Caption tab

Another DIV with a class name of 'controlbar5' is defined within our overlay DIV. This DIV contains the 4 basic navigation links. These links are the same as those described in the HsExpander Example 3: Adding Captions Containing HTML. The following rules were added to the Highslide CSS configuration to define the controlbar.

.controlbar5 {
background: url(/plugins/content/highslide/graphics/controlbar5.gif);
width: 83px;
height: 18px;
/* float:right; */
}
.controlbar5 a {
display: block;
float: left;
height: 18px;
}
.controlbar5 a:hover {
background-image: url(/plugins/content/highslide/graphics/controlbar5-hover.gif);
}
.controlbar5 .previous {
width: 20px;
}
.controlbar5 .next {
width: 20px;
background-position: -20px 0;
}
.controlbar5 .highslide-move {
width: 20px;
background-position: -40px 0;
}
.controlbar5 .close {
width: 20px;
background-position: -60px 0;
}

Again, in the Custom Overlay section, the overlay id of 'my-controlbar' is specified to tell register the overlay DIV with Highslide JS. The navigation bar will be positoned in the top right of the popup, will not be visible once the mouse moved over and out of the popup and will be displayed with full opacity. Click the thumbnail below to see the result.

Thumbnail image

One final note. Once you have defined a custom overlay for a thumbnail/popup, you can use that same overlay in other thumbnail/popups on THAT SAME PAGE. Navigate through the thumbnails below.

All three thumbnail/popups are using the custom overlay 'my-controlbar' that was defined above.

 

 

 

 


        Highslide JS Examples
  Thumbnail image      Thumbnail image      Thumbnail image  
             
  Thumbnail image   Thumbnail image   Thumbnail image  
             
  Thumnail22   Thumbnail image   Thumbnail image  
             
 

HTML Content

 

Scrolling HTML Content

 

AJAX Content

 
             
 

Dynamic AJAX Content

   

Content in iframe

 

Display flash