SOURCES

Check out the new version of this article here: Highslide Nextgen and WordPress Integration Ver-2

In this tutorial or guide however you want to call it I will show you how to make Highslide and NextGEN Gallery to be lovers in WordPress.

This tutorial is not intended to the average user so a little bit of “Knowledge” is required. Although I think anyone can do it.

1. First of all upgrade WP to the latest version, I am using v2.7.1
2. Install NextGEN if you haven’t already from here (I am using v1.1.0)
3. Download Highslide from here (I am using v4.0.12)

Go to your server and create a folder called highslide in the plugins folder – wp-content/plugins/highslide/.

Copy to this folder the following files/folder that you have extracted from Highslide zip file:

• highslide-full.packed.js
• highslide.css
• highslide-ie6.css
• the whole graphics folder

The folder structure should look like this:

The first step is now complete Highslide and NextGEN are on there way to become lovers.

Now we have to set all the required options for Highslide, so you can check all the examples at this page and chose one from there to use. In this example I will use example-gallery-controls-in-heading.

Now create a new file called highslide.config.js in which we will add all the options for Highslide. Copy and paste all the code from that example (it should be in the page source) in our config file. It should look something like this:

hs.graphicsDir = 'http://yourdomain.com/wp-content/plugins/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'controls-in-heading';
hs.fadeInOut = true;
//hs.dimmingOpacity = 0.75;

// This two lines will take the title of the pictures from NextGEN and add it to the caption field in Highslide.
hs.captionEval = 'this.a.title';
hs.headingText = 'I can see what you see not...';

// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: false,
overlayOptions: {
opacity: 1,
position: 'top right',
hideOnMouseOut: false
}
});

Upload the file to the highslide plugin folder we have created.

As you can see all the options required by Highslide are there. The most important thing is that I’ve added 2 extra code lines that will take the title of the pictures from NextGEN and add it to the caption field of Highslide and for the heading field just a simple text.

// This two lines will take the title of the pictures from NextGEN and add it to the caption field in Highslide.
hs.captionEval = 'this.a.title';
hs.headingText = 'I can see what you see not...';

For more detailed info about this options you can take a look at this page Highslide JS API Reference. The thing you need to remember is that you can make virtually any kind of combinations to show whatever text you like.

We are getting closer

Now update all the image URL-s in the .css files (highslide.css and highslide-ie6.css) with your path to the gallery folder

Initial URL: background: url(/graphics/fullexpand.gif)
New setting: background: url(http://yourdomain.com/wp-content/plugins/highslide/graphics/fullexpand.gif)

You can search and replace to do it really quick.

The final step is to edit the header.php from your template and add just above the </head> tag this lines:

<!-- Highslide Plugin -->
<link rel='stylesheet' type='text/css' href='http://yourdomain.com/wp-content/plugins/highslide/highslide.css' />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="http://yourdomain.com/wp-content/plugins/highslide/highslide-ie6.css" />
<![endif]-->
<script type="text/javascript" src="http://yourdomain.com/wp-content/plugins/highslide/highslide-full.packed.js"></script>
<script type="text/javascript" src="http://yourdomain.com/wp-content/plugins/highslide/highslide.config.js"></script>

Now for the final test just hit F5 in your browser and see the Love , and that’s it. Be sure to remember to update all the paths with your web addres.

I hope you enjoyed this tutorial and you will find it useful. I am open to any sugestions and feedback.

“The Love” doing her thing

[Show as slideshow]