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.
- First of all upgrade WP to the latest version, I am using v2.7.1
- Install NextGEN if you haven’t already from here (I am using v1.1.0)
- 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 
You can leave a response, or trackback from your own site.
56 Responses to “Highslide, NextGEN and WordPress integration”
Leave a Reply
Subscribe
You made this so so easy. I absolutely love highslide and thanks for posting such clear instructions on how to integrate!
Hey Matt,
I’m glad you like it and found it useful. Have fun
Hello, first thank you for this great and simple tutorial wich was really helpfull for me.
My only problem is that the title of the image do not show in the highslide window (I still have the text :i can see what you see not).
I followed all the steps and the rest of the plugin works perfectly.
any ideas ?
thank you for your answer
cheers
Olivier
Hi Oliver, glad it was helpful
Can you please give a link to your web site or test page where I can see the problem? It should be Ok but I have to check the code to figure out the problem.
Be sure you have this line
hs.headingText = 'I can see what you see not...';in your highslide.config.js file.
hello thanks for quick answer,
I have this line in my config file, I can see the title in the bottom of the window image but not in the top. I think the “I can see…” text should be replaced by my image title ? Am I right ). I f not i’m just farting in the wind
I cannot post the website adress because i work on a offline project presentation (hosted on my machine with MAMP server).
anyway thanks for your effort and time
cheers
Hey Oliver, reading your description you’re probably right but I really can’t tell without seeing any code. Use Firebug to see what is going on there. Hope you get it right
THANK you a million times!
This worked great…thanks!
Now, how do I display the title below the thumbnails?
Glad you found it useful
As for captions in pre-1.0 versions of NGG, the default thumbnail gallery style (nggallery.css version 1.43) natively supported captions under the thumbnails. But now, in NGG 1.0+, there are no captions, and to get them back requires you to modify a template PHP file (gallery.php) and get it to call a new class in nggallery.css or something.
Its a real pain to get this working because you will have to tweak it with each new version of the plugin. Try to google it and you will find different solutions for this one.
To answer Oliver’s question above: I had to make a slight change in the config file, from “hs.headingText = ‘I can see what you see not…’;” to “hs.headingEval = ‘this.thumb.alt’;”. This did the trick. I now see the title and description (or caption) that I entered in through nextgen.
However, I have another question. I don’t like the default flash gallery, which uses “imagerotator,” and would instead like to show groups of images using the highslide gallery. The latter has “prev” and “next” buttons, etc. and enlarges on clicking, which is looks great.
Currently, highslide only activates when I show thumbs, which makes sense because you activate highslide within the nextgen options for “thumbnail effects”. But how do you show a highslide gallery?
Thanks ahead of time for any help.
Hi again,
I realize now that problem seems to be that the controls are not showing. So the user can’t turn on a slide show or simply go forward and backward after they’ve expanded an image. The image has to be minimized and another one clicked. Here is our (beta) site; the gallery is the bottom post:
http://csws.uoregon.edu/beta_v1/
I believe I followed your directions to exactly but if you want to see some of the code, I’ll send it along.
Thanks!
Hey Jonna, one thing to make it clear you can only have a slide-show if you add a gallery from Nextgen, if you add picture by picture you can not do it with the code I have made.
I have entered your website and it seams to be working
now, it looks great, good job (this is the link I have entered http://csws.uoregon.edu/beta_v1/?p=113) I can use the button to move back and forward and also the play button. If you solved your problem perhaps you could share the solution.
I love highslide too……THANKS
First I Had to diable other plugins in controlpanel
3 small questions…….
1. How du you integrate Your “[Show as slideshow] ” on top of demo thumbs on your page……….
2 where do I edit font color “when highslide running” text under large picture “title tag I think”
3 where do I edit font color “when highslide running” text over large picture “alt tag I think”
Hey erik, glad you like it.
Erik what plugins you had to disable and why?
1. This is an option from NextGen I think you can find it under Slideshow options in NextGen.
2. and 3. All the font colors need to be changed from highslide.css. For example for the top text .controls-in-heading .highslide-heading is the css selector (line 391), for the bottom text the css class is highslide-caption (line 44 I think)
Hope this helps…
Great post, thanks so much.
Hi Radu, thank you very much for putting this together! Just what I was looking for
Your instructions are excellent, and I believe I have done everything as you say, but I’m not getting any Highslide-code inside the -tag around my images after publishing here: http://blog.infinitesoup.com/?p=97
I should be seeing class=”highslide” onclick=”return hs.expand(this, { slideshowGroup: ‘you_are_being_watched’ })” inside the a tags, but for some reason I don’t.
I publish the gallery from the WordPress editor using NextGENGallery syntax: [gallery=1]
I’m sure I’m missing something obvious – do you have any idea what I’m doing wrong, please?
Wordpress version 2.8.3, Highslide version 4.1.5
Ok – I figured it out:
You need to navigate to Gallery -> Options -> Effects. Select Highslide from the Javascript Thumbnail effects dropdown list and click Update. I’m a newb at NextGenGallery, so I hadn’t realized you need to activate Highslide as an effect.
Thanks again for your post
Hi Radu,
I did everything as you said.
If I want to open a picture it’s only loading and the pictures isn’t opened.
Can you pleeease help?
Hey Marc, do you have a demo link to see for myself… Thanks
Hey, thanks for tutorial, but I have the same problem as Marc has. It says “loading” and does nothing^^ Here’s the link – http://septicity.ru/nature. In advance thanks for your help.
Hey septikos, glad you found it useful.
Now try to correct your config file (http://septicity.ru/wp-content/plugins/highslide/highslide.config.js)
You have there hs.graphicsDir = ‘http://yourdomain.com/wp-content/plugins/highslide/graphics/’;
Change the path with your own sever path, and also with all the files and then try again.
I used firbug to test on you site and works
so change all the paths correctly.
Oh my bad^^ thanks! I should pay more attention to “update all the paths with your web addres.”
Great tutorial … everything is up and running!
I have one problem, I can’t get highslide to work when I change the permalink structure. When I revert back to the default setting, everything works again.
Any ideas would be appreciated.
Hey Joe, can you give me a demo link so I can see what you have there
thanks
Hi Radu,
The site has personal info (family pictures etc.) and I would rather not give a link. However, I would be happy to post the code in any of the files if that would help. I also think you can replicate the problem by changing the permalink option in any site that has used the steps above to install highslide. The image will still load for me but without the hs effect. When I change the permalink option back to the default setting, hs effect kicks back in.
Thanks for the time.
Hey Joe, I tried that here and works fine, could you give me the code so I can take a look at it?
fnery seems to have the same problem I do:
http://wordpress.org/support/topic/220846
I finally figured it out. When I originally set up my blog I had put the following code in my .htaccess file to enable ssl.
RewriteCond %{HTTP_HOST} ^xxx.com [NC]
RewriteRule ^(.*)$ http://www.xxx.com [L,R=301]
RewriteCond %{SERVER_PORT} !^443$
RewriteRule ^(.*)$ https://www.xxx.com/$1
I removed the code and added
define(‘FORCE_SSL_ADMIN’, true);
to my wp-config.php file. I no longer have the permalink problem and nextgen works with highslide perfectly. Thanks for all of the help Radu!
Hi Radu,
I am trying to integrate high slide with nextgen for my friend’s gallery – http://www.djritz.com/blog and I seem to be able to scroll through the pics on the thumbnails to the right but on the gallery page it does not seem to be working. Also is the screen supposed to grey out abit in the background when you click an image?
Thanks!
Heu Sanj,
I think you are trying to use the slideshow on your Gallery page. Try to go to your admin page in the Gallery and then Options. From there select the SlideShow tab and be sure that you have Path to the Imagerotator correctly set. For example I have my path set to http://radumicu.info/blog/wp-content/uploads/imagerotator.swf
If you don’t have the path set there go and download image rotator from here. Then upload imagerotator.swf to your server and set the path to imagerotator.swf in that field. Save it and try again.
No the screen shouldn’t gray out when you click your image. If you want a more nicer look check the latest version of this tutorial here. Let me know if this works for you.
Thanks Radu for the prompt response. I will try again tonight when I get home. Have a great day.
hey Radu, haven’t try the highslide tutorial you provided but i have a question regarding your gallery: how do you center the thumbnails on the very last of your post? is it center aligned or left aligned? I try to center my thumbnails without success. you can view one of my gallery:
http://wisatabaharilamongan.com/gallery/wahana/galeri-kapal-dan-kerang
thank you. i will definitely upgrade to highslide soon
Hello Fansi, I entered your link and from my point of view works fine here is a screen-shot. So I don’t really know what you mean.
To center images I am using the editor from WordPress. Just add an image and hover your mouse over it in the editor you will see 2 buttons, one to delete it an one that will pop-out a properties pane and from there select align center. The code that is generated in HTML is:
[caption id="" align="aligncenter" width="480" caption="CAPATION TITLE"]<img title="IMG TITLE" src="http://yoururl/image.jpg" alt="ALT INFO" width="480" height="360" />[/caption]Also do not forget to check the last version of my tutorial here.
Thanks again Radu! I got it working now using the Highslide and Imagerotator.
Awesome issue, didn’t thought reading this would be so interesting when I looked at the title.
hello, i tried to follow instructions but could not make it. I had already installed “highslide-integration” plugin + nextgen gallery on my local site and something was going wrong, maybe on paths or i do not know. Having “highslide-integration” plugin gives you basic highslide functionality and i wanted to be able to add some extra features. Most important is the static image, so site’s visitors do not have to move their mouse in order to go from one pic to another. And the most important addition i needed was the ‘next,previous,pause,close’ arrows and icons on each image(you can see this effect on http://highslide.com/editor/ by going to gallery>controls>preset style>large dark buttons, for instance).
there are 3 steps i followed in order to achieve this:
————————————
————————————
1)
i use the pixel theme but i guess it will be the same on any other. Went to my pixel theme directory and opened header.php and added the following code
hs.addSlideshow({
// slideshowGroup: ‘group1′,
interval: 5000,
repeat: false,
useControls: true,
fixedControls: true,
overlayOptions: {
className: ‘large-dark’,
opacity: .6,
position: ‘bottom center’,
hideOnMouseOut: true
}
});
// Optional: a crossfade transition looks good with the slideshow
hs.transitions = ['expand', 'crossfade'];
2)
if i recall well i replaced the highslide.css file that comes with the “highslide-integration” plugin, with the original highslide.css files that is included on the original highslide zip file that you can download from http://highslide.com/download.php. This file has 850 lines of css code. I then added the folowing css style on top of it:
.large-dark .highslide-controls, .large-dark .highslide-controls ul, .large-dark .highslide-controls a {
background-image: url(../graphics/controlbar-black-border.gif);
}
please make sure that controlbar-black-border.gif is included on your graphics folder and that you have the correct path for it.
although there is a ighslide-controls style on this file, the addition of these lines makes the difference.
3)
check on your highslide.js file inside “plugins>highslide-integration>js” folder
that the div class on
skin : {
controls:
is set to highslide-controls (i think it is by default)
——————————–
——————————–
hope i don’t forget anything else but these 3 steps solved my problem and gave me the chance to use navigation controls on any image that i open. i forgot to tell you that the
“fixedControls: true”, on header.php file, keeps every new pic on the same place.
hope my notes will help you to try an alternative solution when using the “highslide-integration” plugin along with nextgen gallery on wordpress.
Yiannis first of all please take note that in this article I showed you how to make this integration without using any plugin. Perhaps you installed a plugin from the WordPress repository that affected this scripts from my article. Unless you give me a link to see what is going on I really can’t help you
Try to deactivate your plugin and use the second version of my article to integrate those two: Highslide Nextgen and WordPress Integration Ver-2
exactly, i had already installed “highslide-integration” from wordpress repository. i am sure this messed things.
I will try ver-2 on a fresh installation since it offers very nice integration and effect on galleries.
Ver2 is for the latest version of wordpress?
thanks for your reply!
Yes is works also on WordPress 2.9 (is actually the version of my WordPress right now)
Hi Radu,
Thanks for this tutorial. Always loved HighSlide. I am trying to implement the floating-thumbs gallery where the entire gallery pops from on thumb. I don’t want to display all of my thumbs until the highslide comes up. Am I making sense?
Thanks in advance!
Yes you are making sense and I think this could be done without no problem. Just let me a few days to test it out and see that what I am thinking works and I will get back to you all with an article on how to do just that.
So without altering the Nextgen Gallery you can’t really do it easy
But if you still needed you can hard code your page with the following example
<a id="thumb1" class="highslide" title="caption" onclick="return hs.expand(this, { slideshowGroup: 'set_1' } )" href="test.jpg" rel="nofollow"><img src="test_thumb.jpg" alt="" /></a><div class="hidden-container">
<a class="highslide" title="caption" onclick="return hs.expand(this, { slideshowGroup: 'set_1' } )" href="test2.jpg" rel="nofollow"></a>
</div>
The firs <a> has an image and is your first thumb image then in the <div class="hidden-container"> you will place all the others images and the Highslide CSS will hide that div using our class. Now you have one thumb but on click you can see all the gallery.
Hope this helps a little bit.
[...] I think the best gallery for WordPress. I have found interesting and very helpful article about Highslide, NextGEN and WordPress integration. And another one explaining how to create Albums in the NextGen Gallery . Thank you all [...]
I absolutely enjoy this fantastic post that you have provided for us all. I confirm this would be beneficial for a lot of people.
Thanks Jeremy I am glad you like it. Be sure to check out the second part of this tutorial here.
Another thanks – saved a lot of time to have those editor lines in the config file specified. It wouldn’t (and mustn’t) have been much fun figuring that out. Works great.
Has anyone figured out how to integrate NGG custom fields with highslide, get them to display?
Hey Norbert, glad you found this one useful. As for the custom fields, I am currently writing a WP plug-in and hopefully soon I will launch it to the wild
Hey Radu,
Highslide is indeed ace. I have it installed in WordPress and running ok. I have discovered, however, that it is only able to display images on the same page (even if all images are in same gallery).
Can you tell me how i place all but 5 images in a hidden div so that i can still make use of Highslide?
Hello Daniish, glad you like it.
The feature I think you are trying to achieve I already explained here: http://radumicu.info/blog/2009/02/19/highslide-nextgen-and-wordpress-integration/comment-page-1/#comment-3718 Let me know if it works for you.
Yes Radu that is what i’m looking for.
Sorry to be a n00b but how do i access the page code that i need to edit – i’m rather new to WordPress and not too familiar with it.
Doh. So it goes just there! How do i alter this line to return all the images in a folder, not just ‘test2.jpg’ :
slideshowGroup: ‘set_1′ } )” href=”test2.jpg” rel=”nofollow”>