Automatic Highslide Integration for WordPress Images and Galleries

Highslide really makes your pictures and galleries look a lot better in WordPress. I’ve been using Lightbox, Shadowbox, and Thickbox for quite some time, but I’ve always wanted the ability for a thumbstrip like you see in Blogspot and Flickr. Highslide is an amazing image display that offers huge amounts of customization. Basically, you create your custom look over at the Highslide Editor. Then you Publish your work and download it as a ZIP.

I couldn’t find a Highslide plugin that offered customization for galleries and single images that took full advantage. I followed some instructions over at Roadrash.no to get Highslide working on WordPress and then used some code from this WordPress forum discussion to get Highslide working on single images.

Here is a sample screenshot of a Highslide gallery with thumbstrip:

How to use Highslide in WordPress

If you follow the steps below, you will have Highslide integrated into your WordPress installation and never have to use special shortcodes or do anything different than you now are for single self-linked images or the default WordPress gallery. This method or any method/plugin will most likely have issues if you try to use other image javascripts! Turn off Lightbox or any other image javascript you might be using.

Note to Woothemes users: go to the end of this post to see how to fix a potential issue.

The following tutorial looks harder than it really is. It should take about 10 minutes if you are slow. Difficulty: low-medium

Step 1: Integrate Highslide into your WordPress Template for stand-alone images and Galleries:

There is an extremely detailed process with images over at Roadrash.no. I recommend you read that if the instructions below aren’t clear enough.

1. Go to Highslide.com/editor and customize your look for galleries (tip: check box next to Enable Galleries on the Gallery tab)
2. When you’re done, click the green Publish button and accept the License (you may not use the plugin commercially if you don’t pay)
3. Click the “Download a zip archive” link. Once downloaded, move the folder “Highslide” to your desktop and delete 2 folders: “highslide-custom” and “sample-images”
4. Open “highslide.config.js” in a text editor (NOT Microsoft Word) and change hs.graphicsDir = 'highslide/graphics/'; to hs.graphicsDir = 'http://yourwebsite.com/highslide/graphics/';
5. Change slideshowGroup: 'group1', to
   slideshowGroup: (function() {
var groups = [];
$('.gallery').each(function(i, $item) {
groups.push($item.id);
});
return groups;
})(),
6. Delete the following lines at the end of the file:
   // gallery config object
var config1 = {
slideshowGroup: 'group1',
   and then delete the }; at the end of the file.
7. Change any remaining lines at the bottom from:
   numberPosition: 'caption',
   to the following format with hs. and = and  ; (add the ;  even if there is no , ):
   hs.numberPosition = 'caption';.
8. Add the following above hs.graphicsDir:
   $(document).ready(function() {
   Add the following at the very end (if you want single images background to match galleries with darkening background, change the line below starting with dimmingOpacity: 0 to 0.75 or whatever value you chose in the Highslide Editor for galleries):
   // for gallery
$('.gallery-item a').addClass('highslide');
$('.gallery-item a').each(function() {
this.onclick = function() {
return hs.expand(this, {
slideshowGroup: this.parentNode.parentNode.parentNode.id
});
};
});
// For single images
hs.onSetClickEvent = function(sender, e) {
e.element.onclick = function() {
return hs.expand(this, singleConfig);
}
return false;
};
var singleConfig = {
slideshowGroup: 'single-image',
outlineType: 'drop-shadow',
wrapperClassName: 'borderless',
numberPosition: null,
dimmingOpacity: 0
};
hs.registerOverlay({
slideshowGroup: 'single-image',
html: ' <div onclick="return hs.close(this)" title="Close"></div>',
position: 'top right',
fade: 2
});
});.
9. Put the following in your WordPress header.php for CSS and the Javascript (DON’T forget to change “yourwebsite”) :
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="http://www.yourwebsite.com/highslide/highslide-full.packed.js"></script>
<script type="text/javascript" src="http://www.yourwebsite.com/highslide/highslide.config.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.yourwebsite.com/highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="http://www.yourwebsite.com/highslide/highslide-ie6.css" />
<![endif]-->
10. Last but not least: Upload the folder “highslide” to the root of your website (ex: http://yourwebsite.com/highslide)

Step 2: Automatically add Highslide to all Self-Linked Images:

Insert the following code into your Functions.php template file before your closing PHP tag (?>):
define("IMAGE_FILETYPE", "(bmp|gif|jpeg|jpg|png)", true);
function addhighsliderel_replace($string) {
$pattern = '/<a(.*?)href="(.*?).(bmp|gif|jpeg|jpg|png)"(.*?)>/i';
$replacement = '<a$1href="$2.$3" rel='highslide' class='highslide'$4>' ;
return preg_replace($pattern, $replacement, $string);
}
add_filter('the_content', 'addhighsliderel_replace');


Fix Woothemes Conflict

I originally tried this method on the Royalle theme. Woothemes had setup the featured image in the post to self-link and rel=lightbox. This made Highslide not work for these featured images. For Highslide to work correctly, it needs to make both the class and rel highslide.
Here’s how to fix it (its probably similar with other Woothemes): Open admin-functions.php in your theme editor. On line 471 or about, look for
} else { // Default - output with link
if ( ( is_single() OR is_page() ) AND $single == false ) {
$rel = 'rel="lightbox"';
Replace $rel = 'rel="lightbox"'; with $rel = 'rel="highslide" class="highslide"';
To be safe you can also do CTRL+F to find the 2 other instances of “lightbox” and change it to “highslide”.

Credits:
http://roadrash.no/wp-highslide/how-to-highslide-gallery/
http://wordpress.org/support/topic/automatic-adding-lightbox-rel-and-group-to-images-in-posts