Finn Rudolph

Combinations


Highslide JS
Default
Rounded corners and fading
Rounded corners, fading and captions

Highslide JS

"Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages." - Torstein Hønsi

ImageFlow can be configured easily to be compatible with the Highslide JS effect. In the following I will explain how to install Highslide JS with ImageFlow:

First of all you need to install ImageFlow like described in the Installation Guide. After that you need to grab yourself a copy of the latest Highslide JS version. Unzip the package and copy the highslide.packed.js, highslide.css and the graphics folder to your server. Then include the .js and .css files inside the header of your XHTML page:

XHTML<link rel="stylesheet" href="highslide.css" type="text/css" />
<script src="highslide.packed.js" type="text/javascript"></script>

Now you can create your ImageFlow instances with the option onClick. With it we inject a Highslide JS function into ImageFlow called hs.expand(). Through this function we can entirely configure the Highslide JS behaviour, by passing options to it (yes, it's the same trick like the options with ImageFlow). You can check out the full list of Highslide JS options at the Highslide JS API Reference.

The JavaScript code snippets below are going inside the domReady function at the bottom of the imageflow.js (or the imageflow.packed.js). The CSS can be included in the imageflow.css or anywhere else. The following shows you how to include the Default Example inside the imageflow.js:

JSdomReady(function()
{
	var Highslide = new ImageFlow();
	Highslide.init({ ImageFlowID: 'Highslide', 
                            onClick: function() { return hs.expand(this, 
                                        { src: this.getAttribute('longdesc') } ); } });
});

If Highslide keeps showing you the "Loading..." message and doesn't load any images take a look at the FAQ #14. For everything else Highslide JS related, please consult the friendly Highslide JS Forum.

1 Image 1 Image 2 Image 3 Image 4 Image 5

Default

JSvar Highslide_1 = new ImageFlow();
Highslide_1.init({ ImageFlowID: 'Highslide_1', 
                        onClick: function() { return hs.expand(this, 
                                    { src: this.getAttribute('longdesc') } ); } });

CSS.highslide-container {
	z-index:10003 !important;
}
.highslide-credits {
	display:none !important; 
}

2 Image 1 Image 2 Image 3 Image 4 Image 5

Rounded corners and fading

JSvar Highslide_2 = new ImageFlow();
Highslide_2.init({ ImageFlowID: 'Highslide_2', 
                        onClick: function() { return hs.expand(this,
                                    { src: this.getAttribute('longdesc'), 
                                       outlineType: 'rounded-white', 
                                       fadeInOut: true } ); } });

CSS.highslide-container {
	z-index:10003 !important;
}
.highslide-credits {
	display:none !important; 
}

3 Image 1 Image 2 Image 3 Image 4 Image 5

Rounded corners, fading and captions

JSvar Highslide_3 = new ImageFlow();
Highslide_3.init({ ImageFlowID: 'Highslide_3', 
                        onClick: function() { return hs.expand(this,
                                    { src: this.getAttribute('longdesc'), 
                                       outlineType: 'rounded-white', 
                                       fadeInOut: true,
                                       captionText: this.getAttribute('alt') } ); } });

CSS.highslide-container {
	z-index:10003 !important;
}
.highslide-credits {
	display:none !important; 
}
.highslide-caption {
	color:#333 !important; 
}