Highslide Integration

This document is intended to demonstrate and explain the steps required to integrate the Highslide Javascript into Etomite. It will not go into great detail regarding the configuration or customization of the highslide package itself as that information is available on the Highslide site.

What is 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.

First you need to download the Highslide package, available in zip format, extract the package files, and upload them onto your server. The current release, as of this writing, is highslide-4.0.4, and I have loaded the file set into ./assets/highslide-4.0.4/ off my Etomite root directory.

Second, we need the Doc2Highslide snippet which I have written. This snippet reads in a document, created using the Xinha WYSIWYG editor, which contains the images we want included in our slidehow.

Snippet: Doc2Highslide <?php
// Doc2Highslide
if(empty($id)) return;
// onhover text for tumbnail link
$title = "View Larger Image";
// regexp pattern for img tags
$pattern = "<img[ ^<>]+>";
// fetch the document content based on id
$doc = $etomite->getDocument($id, $fields="content");
// parse the content to fetch all img tags, minus open and close
preg_match_all($pattern, $doc['content'], $images);
// convert two dimensional array into a single
$images = $images[0];
// define our image counter
$i = 0;
// loop through the img's and process each one
foreach($images as $image)
{
  // increment our counter
  $i++;
  //$output .= "<{$image}><br/>\n";
  // fetch the src attribute
  preg_match('/src=\"([ ^\"]*)\"/', $image, $src);
  // convert two dimensional array into a single
  $src = $src[0];
  // fetch the alt attribute
  preg_match('/alt=\"([ ^\"]*)\"/', $image, $alt);
  // convert two dimensional array into a single
  $alt = $alt[0];
  // explode the src attribute into $pieces array
  $pieces = explode("/", $src);
  // get the number of pieces
  $count = count($pieces);
  // the image name is always the last $piece
  $img = $pieces[$count - 1];
  // construct the thumb name
  $thumb = str_replace($img, ".thumbs/.".$img, $src);
  $href = str_replace("src=", "href=", $src);
  // construct the thumb code block for this image
  $output .=
<<<IMGCODE
<a id="thumb{$i}" $href class="highslide" onclick="return hs.expand(this)" title="$title">
  <img height="80" $alt $thumb />
</a>
IMGCODE;
}
// return rendered output to caller
return $output;
?>

Third, we need the Highslide Chunk which is used to configure and launch the Highslide slideshow.

Chunk: Highslide

<script type="text/javascript" src="./assets/highslide-4.0.4/highslide/highslide.js"></script>

<script type="text/javascript">
// remove the registerOverlay call to disable the controlbar
hs.registerOverlay({
  thumbnailId: null,
  overlayId: 'controlbar',
  position: 'top right',
  hideOnMouseOut: true
});
hs.graphicsDir = './assets/highslide-4.0.4/highslide/graphics/';
hs.outlineType = 'rounded-white';
// Tell Highslide to use the thumbnail's alt text for captions
hs.captionEval = 'this.thumb.alt';
</script>

<div class="highslide-overlay controlbar" id="controlbar">
  <a title="Previous (left arrow key)" onclick="return hs.previous(this)" class="previous" href="#"></a>
  <a title="Next (right arrow key)" onclick="return hs.next(this)" class="next" href="#"></a>
  <a title="Click and drag to move" onclick="return false" class="highslide-move" href="#"></a>
  <a title="Close" onclick="return hs.close(this)" class="close" href="#"></a>
</div>

To be continued...

R.A.D. Computer Consulting