|
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.
 
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.
This invokes the JCE Image Manager where you can navigate through the file system and select your image.
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.
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.
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.
That should invoke the file browser where you can select the html file that you wish to use.
After clicking 'Insert' in the file browser, the URL parameter should point to the Html document.
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'.
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.
Finally, the parameters in the HTML tab were set as shown below.
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.
This brings up the Advanced Link plugin window. Select an article from the Content menu in the Link Browser section and click Insert.
Now, click on the new link to make sure it is selected and then click the HsHtmlExpander button.
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.
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.
|
