Tarn Aeluin

Technology, soapbox, and crap...

Working with Highslide Pt. 1

by · Published · Updated

If you read my posts on images and wordpress you’ll know that I’m using Highslide for WordPress *reloaded* for my pics, but I’m just too picky to let things rest without them being just the way I like them. So how does Highslide actually work? How can I take the plugin and make it work with thumbnail galleries? After messing around with the plugin a bit I think I need to better understand Highslide first. So how does it work? Read on…

Checking the Docs and Google
So first thing – there are good API docs on the highslide.com site, but they are pretty er well API-ish and don’t really help you understand what is happening. There’s also a tutorial, but it does not really seem to cover things in a logical order. A quick google around the internet and the same result – there are a couple of decent posts on integrating the library with other things, but that’s about it. Thus – this post is born!

Basic Structure
I created 3-4 different configurations of a highslide gallery with the editor, downloaded the zip files, placed them in my local apache config and then loaded those all up in Aptana Studio to examine what’s going  on. This is the easiest way to get a handle on what’s going on IMHO. Pretty basic stuff here an html file to load up, various css and js file and then some sub-folders that contain graphics and additional stuff. You can delete the sample folders to simplify if you like.

Here’s the important files we’ll focus on:

  • highslide-custom-example.htm: this is the file that loads up all the js, css, and stuff.
  • highslide-with-gallery.js or highslide-full.js: These js files are the main source of JavaScript code. If you’re example includes a thumbnail gallery then the former and if not the latter is the one to look at.
  • highslide-config.js: configuration of the various options for your pics – this is the file that the editor creates.
  • highslide.css: the styles- pretty self-explanatory.

Here’s the top of the htm file:

<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
</head>
<body>
<h3>Gallery</h3>
<div>
<ul>
<li>
<a href="highslide/sample-images/thumbstrip01.jpg"
title="Caption from the anchor's title attribute"
onclick="return hs.expand(this, config1 )">
<img src="highslide/sample-images/thumbstrip01.thumb.jpg"  alt=""/>
</a>
</li>

Taking a look at the code – there are a couple of things to notice. The first script include is the full script from highslide and then the custom script – that’s the right way to do it. Don’t customize the main script and instead include all customizations in the custom one so you are “upgrade proof”. Last include is the css file. Then the link definition that calls hs.expand and passes “config1”  – which is the configuration object in my custom .js file. That’s how custom settings get incorporated into the gallery effects. Seems impossibly easy.

You can look thru the main .js file to see the code – its a good idea to get a basic understanding of it – or browse through the tutorial on highslide.com. The next file I’m interested in is the highslide.config.js file. I’ve included three examples below to compare. The first is a plain image expander, the second has a navigation overlay, and the third has a thumbnail gallery.

hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'custom';
hs.captionEval = 'this.a.title';
hs.registerOverlay({
html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
position: 'top right',
useOnHtml: true,
fade: 2 // fading the semi-transparent overlay looks bad in IE
});
 hs.graphicsDir = 'highslide/graphics/';
hs.showCredits = false;
hs.outlineType = 'custom';
hs.fadeInOut = true;
hs.align = 'center';
hs.captionEval = 'this.a.title';// Add the slideshow controller
hs.addSlideshow({
slideshowGroup: ‘group1’,
interval: 5000,
repeat: false,
useControls: true,
fixedControls: ‘fit’,
overlayOptions: {
opacity: 0.70,
position: ‘bottom center’,
offsetX: 0,
offsetY: -15,
hideOnMouseOut: true
}
});// gallery config object
var config1 = {
slideshowGroup: ‘group1’,
transitions: [‘expand’, ‘crossfade’]
};		 hs.graphicsDir = 'highslide/graphics/';
hs.showCredits = false;
hs.creditsPosition = 'bottom left';
hs.outlineType = 'custom';
hs.dimmingOpacity = 0.75;
hs.fadeInOut = true;
hs.align = 'center';
hs.marginBottom = 70;
hs.marginLeft = 100;
hs.captionEval = 'this.a.title';
hs.captionOverlay.position = 'below';// Add the slideshow controller
hs.addSlideshow({
slideshowGroup: ‘group1’,
interval: 5000,
repeat: false,
useControls: true,
fixedControls: false,
overlayOptions: {
className: ‘text-controls’,
opacity: 1,
position: ‘bottom center’,
offsetX: 50,
offsetY: -10,
relativeTo: ‘viewport’,
hideOnMouseOut: false
},
thumbstrip: {
mode: ‘vertical’,
position: ‘middle left’,
relativeTo: ‘viewport’
}});
// gallery config object
var config1 = {
slideshowGroup: ‘group1’,
transitions: [‘expand’, ‘crossfade’]
};

Looking at these examples makes it easy to see the basics for how you can change your gallery appearance. You can look at the reference docs on Highslide.com to see all the options for the various “hs” attributes. Its also pretty easy to play around with them on a local instance. Next up? Getting a nice thumbnail setup working with highslide for wordrpess *reloaded*.

Tags:

Leave a Reply