Following my previous article about how to integrate this two in your blog I received lots of messages about how to configure them with more options, so here is version 2 of this tutorial where will be integrating the new features found in Highslide and share configuration options around Highslide and NextGen.
This tutorial is not intended to the average user so a little bit of “Knowledge” is required. I said this one before so I will say again the last part also I think anyone can do it with a little patience.
Step 1 – Meeting all requirements
- First of all upgrade WP to the latest version, I am using v2.8.5
- Install NextGEN if you haven’t already from here (I am using v1.3.6)
- Download Highslide from here (I am using v4.1.8)
Step 2 – Folder structure and paths
On your web server 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
Folder Structure
Step 3 – Set Highslide Options
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 article I will use gallery-horizontal-strip but I will update new set of options later on.
Create a new file called highslide.config.js. This will be our config file in which we will add all the options for Highslide. Copy and paste all the code from the example you picked (it should be in the page source) in this 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.fadeInOut = true;
hs.dimmingOpacity = 0.8;
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'controls-in-heading';
hs.fadeInOut = true;
hs.marginBottom = 105; // make room for the thumbstrip and the controls
hs.numberPosition = 'caption';
// This line will put the title of the pictures (from nextgen) into the caption field in highslide.
hs.captionEval = 'this.a.title';//Is the description of the image taken from NextGen
hs.headingText = 'HEADING TEXT';//Will be show for every image (Ex: your website, slogan, etc)
// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: false,
overlayOptions: {
className: 'text-controls',
position: 'bottom center',
relativeTo: 'viewport',
offsetY: -60
},
thumbstrip: {
position: 'bottom center',
mode: 'horizontal',
relativeTo: 'viewport'
}
});
Using the Highslide API we can add extra info to our images so I’ve added 2 extra code lines (Line 13 and 14) that will take the description of the pictures from NextGEN and add it to the caption field of Highslide and for the heading field just add a simple text, for example your blog url or slogan, something 
// This two lines will take the description of the pictures from NextGEN and add it to the caption field in Highslide. hs.captionEval = 'this.a.title'; hs.headingText = 'HEADING TEXT';
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.
Upload the file to the highslide plugin folder we have created above.
Step 4 – CSS URL Paths Updates
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. Remember this is a really important step, if some of your paths are broken the “system” won’t work as it should be. What I do in order to see where I have a broken path is to use Firebug with Firefox. You can open the Net Panel set it to HTML and refresh your page, you will see all your broken GET requests that your browser is makeing, hover one of them and if the path is your Highslide folder we created but is wrong go and correct it in the CSS files and upload again.
Step 5 – Edit template files
The final step is to edit the header.php from your template in order to integrate our new files. The path to your template should be something like this:
http://www.yourdomain.com/wp-content/themes/[THEME NAME]/
Open the file and just add 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>
Save the file, upload and overwrite and that’s it. Be sure to remember to update all the paths with your web address instead of yourdomain.com 
Step 6 – Set Nextgen options to use Highslide
Now for the final setting go to Gallery \ Options \ Effects and chose from the dropdown Highslide. Save Changes and go test it.
Step 7 – Test the god damn script 
If The Matrix is bug free or the planets are all aligned after you HIT F5 on your keyboard to refresh you should see your gallery working with Highslide
Bellow is an example of a Nextgen gallery workin with Highslide
You can leave a response, or trackback from your own site.
57 Responses to “Highslide, NextGEN and WordPress integration – Ver 2”
Leave a Reply
Subscribe
Thank you! You are Number One!!!
Thanks for the write up! Awesome.
I have one issue, my images inserted into posts (using WP Media uploader) do not open using Highslide, is this only for images related to NextGen?
Hey David, Yep the changes are only related to NextGen. But you can make it work really easy for every image on your page. As I said to Kiely here You can go to HTML and add something like this:
<a onclick="return hs.expand(this, { slideshowGroup: 'set_1' })" class="highslide " title="Photo Title" href="Path to Big Image"> <img src="THUMB-PATH" alt="Alt-Text" title="Photo Title"> </a>And that should do it. Let me know if this works for you.
Hi Radu,
Thanks for your tutorial! It worked quite well!
Two questions:
1) How can I remove the “Powered by Highslide JS”? It’s bothersome…
2) According to http://highslide.com/ref/hs.headingEval, I added a line “hs.headingEval = ‘this.thumb.title’;” to my highslide.config.css but it failed. It just keeps “Loading…” and nothing appears.
Thanks ahead of time!
Hey Vitamin
1. You will have to buy a license and then you can get rid of that text (here).
2. I have tested on my site hs.headingEval = ‘this.thumb.title’; and works perfect. I also took a look on your JS file and there’s something with you character set or with the editor you are using because it displays like this: //hs.headingEval = ??this.thumb.alt’; The ‘ char is not ok. Try to use Notepad++ with the default chars set and rewrite the char in question here and try it again.
Hi Radu,
Thanks for your answers!
Now the title of photos works well, only one little bit problem exists: How can I configure the title (e.g. where to display, using what font, font size, etc.) ’cause right now it seems not quite well (you can have a look at here: http://blog.concretevitamin.com.cn/?p=429). At presents the title is not aligned accurately with the left border of the photo. Also, I want to move it underneath the photo, just right above the caption.
Sorry to bother, thanks ahead of time!
To properly align the title you will have to play with the css file a bit.
In highslide.css at line 511 there is a class selector .controls-in-heading .highslide-heading from there you should remove the padding property and then it should be OK. As for moving the title down … try to see if Highslide has some property (I really don’t know), if not then the amount of coding will to much for a single comment here.
[...] more: Highslide, NextGEN and WordPress integration – Ver 2 | I can see what you see not Tags: [...]
Thank you – awesome tutorial! After much searching for the right gallery solution, I’m happy to have found this NextGen/HighSlide combination.
However, I had to make an adjustment in your tutorial to get past the “loading…” icon:
Step 5, says to add the highslide code to the header.php file, just above the tag.
I needed to add the highslide code to just above the
tag.
After that, everything works perfectly!
hi radu!
i’m absolutely stuck…i’ve checked everything, and i found out there’s a bug when my test portfolio site loads….here’s the permalink:
http://devonfenimore.com/test/?p=546
it’s looking for /test/<div class= and i can't find that string anywhere. can you help me figure this out? i made it to the loading phase! i'm so close!
devon
Hey Devon,
You are missing the css files so please go through Step 4 – CSS URL Paths Updates again. Also you are missing all the .js .css files in the head tag so go ahead and repeat also step 5.
Hope this helps.
Well, I love the idea of highslide, but after trying it over and over with no success, I have to call it quits for now. I followed your instructions exactly so I can’t figure out why it didn’t work. Thanks for the write-up, though.
Hey Introvert,
I have check your site and it seems all your paths are wrong:
For example this CSS file doesn’t exist http://whisperofamemory.com/wp-content/plugins/highslide/highslide.css
Let me know if you want more help.
I followed these instructions to the letter, and Highslide seems to be working, but only in its most basic form. I don’t have the controls to go to the next photo, or a gallery view. I want e galelry-horizontal-strip version, but whatever code I put in I always get the same basic version.
Thanks
Solved! I had the WP-Highslide plugin enabled from before I found these instructions and it seems it must have been clashing. I disabled it and viola, it works now
I have got it working, but it’s not perfect. The background doesn’t dim when it opens the viewer, and the icons at the bottom are shown as text instead. I have checked my paths and they all seem to be correct.
Hey Ashley, I’ve checked your site and seems be working Ok. Do you still have problems?
Hello Radu.
Great contribution! Am helping friend with a website and cant seem to get past the loading phase of images. I think i checked all the paths – the only thing I can think of is that I uploaded an invalid highslide.config.js file type or placed the given text in the wrong place in the header.php. Am new to this interweb world so any advice would be greatly appreciated.
Thanks
Hey Mark, I need to see a demo page so I can check the code to see where is the mistake
Hey Radu. Sorry for that
. Now the photos load but without the dimming background and gallery thumbnail strip.
http://bit.ly/c4F27o
Thanks again for any help! And thanks again for a great post and your committed support!
Hey Mark, you don’t have all the options required for the strip and the fade in your config file. Here try my own configuration and let me know if it works.
Here is the code that I modified for you http://pastie.org/895638
Copy all the code there and insert it in highslide.config.js.
Also if you need to change this settings use the Highslide Editor from here and design yours how you want it.
Hello Radu,I tried your code but it still doesnt work…. Any ideas more would be greatly appreciated. Thanks again. Sorry for ongoing questions/my own incompetence
.
Mark
No problem Mark, glad I can help.
You are missing a CSS file: http://isaakle.com/wp-content/plugins/highslide/highslide.css this path doesn’t exist. Fix it and let me know.
Hey Radu, I think its there now. But if it is not please give me more instructions. Still doesnt work though. Sorry and thanks. Mark
Mark use Firebug as I told in the article, now you are missing http://isaakle.com/wp-content/plugins/highslide/graphics/outlines/custom.png
The big pain in the *** here is that if some of this files are missing it won’t work.
My suggestion for you is to start over. Delete all files and all code from your header file and take the article from the top.
Hi Radu, I really wanted to echo everyone’s comments above about how great the tutorial is
as a result I’m up and running so thank you very much indeed
I’ve got 2 questions if you had a moment to help
?
(1) At http://www.sladeride.com/gallery-test/ (sorry its a bit slow to load – I need to talk to my host and maybe sort namesevers out!) I’ve put the highslide js thumnail effect on and it works great. However, when I’m back to the thumnail view and select the next page in a gallery (the ’1′, ’2′ etc buttons below the thumbs) the screen refreshes and jumps to the top. This is different to the equivalent behaviour when using the shutter js thumbnail effect which doesn’t refresh the screen or change the position on the page but simply refreshes the thumbs (with a corresponding spinning refresh icon). Can you see any way to prevent page refresh / scroll-up when using highslide js thumb effect?
(2) On another site ((http://www.transformmygarden.com/what-we-do/help-advice/) I’m considering using nextgen-imageflow with highslide. It works of a fashion but doesn’t pick up all of the settings from my highslide.config.js even tho I’ve set-up the same as for the above site (with nextgen-imageflow its missing the background dimmingopacity, align-centre and nav buttons). Also, for some reason I can only get it to work with highslide.js / highslide.packed.js not highslide-full.js / highslide-full.packed.js and in trying to get around this I am coming really unstuck (I think) with hs.overrides when editing the highslide.js file. I’ve tried looking at the highslide ref notes and tutorials, checked the nextgen-imageflow support forum (altho not logged a request yet…) … essentially, cheekily perhaps (!) I wondered if you could either help with that or had any plans to get look into that combo in future?
fyi I’m using v1.2 of nextgen-imageflow (I can’t seem to get onclick to work with highslide which a couple of others have flagged in the support forum for the app)
Thanks in advance!
Sorry for the big delay Jon,
(1) The big problem with pagination in NextGen is that when you add all your galleries on the same page the URL required to switch from one page to another is generated by nextgen and when using Highslide (a custom code) all your pages will switch and I guess this happens to you. Instead to navigate to page 2 on only one gallery will switch to all of them. This part I don’t think we can fix without altering the nextgen core code and this means no more easy peachy upgrades and I wouldn’t recommend. But what I would do from a designer and user experience point of view is to separate each gallery to a reserved page and get rid of the pagination. Also if you truly want a page with all of them the set one page with no pagination, the user will scroll it anyway.
(2) I have NO experience with ImageFlow, and I can only help you if I can see a demo page so I can check how the libs are loaded and where it crashes. As I can see the site is set to maintenance. Sorry but this is what I can do to help you here.
Thank you for considering my article and the interest. Have nice one
Hi Radu, thanks hugely for getting back to me and for the much appreciated tips. Apologies for having to switch site #2 to maintenance. Keep up the great work – your tutorial was great and its especially fantastic how attentive and patient you are with all us commenters
My pleasure Jon, sorry I couldn’t help you more
…looks like the site for #1 above is down as host is doing maintenance apparently! should be good to go in a few hours
Sorry Jon but I’m on the road and I can’t look at your link properly so in a few days I will be able to answer you. Thanks.
Hi Radu, thanks you for the response – site #1 above should now be up and visible when you have a moment – no hurry
I’ve had to change site #2 to remove Imagerotator (the friend for whom I’m doing that site has decided to stick with Nextgen) but if you do have time I’d still be interested to see if you can get it working somewhere(ideally with all hs options!) as I may want to use it on the first site at some point. Bye for now
Jon
Isn’t this kind of a lazy or “dirty” way to do this?
Why all the full paths?
And why is the code for the header not inserted automatically through wp_header ?
This can’t simply be made into a real plugin? It doesn’t show up in my list of Plugins on the Dashboard.
And BTW, on line 2 of the header code, you used single quotes. I dunno if it matters, but I changed them to double quotes, like all the rest:
Dirty perhaps
but lazy why? And my code is not using the wp_header because I do not want to alter WP files only your Theme ones.
It could be made as a plugin but I really do not see the point at this moment, perhaps in the near future I could convert it as a plugin.
The single vs double quotes doesn’t matter at all.
Thanks for your insight, best regards.
Or maybe it should go inside the nextgen-gallery plugin file, like shutter is…?
Same here I don’t want to alter any plugin files (on update all your changes will be gone) but it’s a nice idea and I will take it into consideration, thanks.
Inserting code into the wp_header doesn’t alter any WordPress files. That’s how plugins work, they insert code into the header using
add_action('wp_head', 'your_styles');You are right, sorry I explained myself wrong, my bad here. And as I said I think I will take in consideration to build a plugin for WP for this one, but until then I think this is a great solution for a NON Technical person to use so …
Thanks a lot for your work, I followed and it works!
But one thing, the background does not dim to gray when I use firefox to see my website, but it is fine with IE. Could you please help? That would be very appreciate!!
Thanks Nick. I will need a demo page so I can take a look, ca you send me an URL?
My demo page is “http://quickblogger.tk”, I use WP 2.9.1, NextGen Gallery 1.5.3. Firefox 3.6.3 and IE 8.0.
Thanks Radu!
Now this is a strange bug
Can you please move the .js files in the HEAD part of your source as I said in the article so I can check if from there is the problem?
So glad that you can help me to debug with that!
I followed exactly with your article and replace the address of files in the scripts with my own domains.
What do you mean “move the .js files in the HEAD part of your source”?
No problem Nick you can thank me if I will be able to find the problem
Step 5 – Edit template files from my article, I saw in the source that you haven’t inserted the code in the header.php file can you please redo this step?
Until now I have inserted the code into the header.php, please check the source code and search “Highslide Plugin”.
But the problem is still there :S
Well I am looking at the source code and it’s not inside the tag. It should be between not inside but anyway try changing the config file with my own code from here and let’s see what happens then. In that code change only the first line with your folder.
I replaced the config file with yours, and check the address in the first line.
When I tried to click an image to see the effect, it just keep loading, is that the same for you?
Yep
it’s the same on my side. I really do not know Nick, I can’t find something to start looking for. Can you still move the files in the tag as I said so I can eliminate this? If not I will try to simulate with the files in the tag on my dev server but it will take some time.
So sorry Nick, I am stuck as you are and until I get a flash of imagination … try to move them in the head tag and let’s see from there.
I moved the script code from the body tag to the head tag, but the problem remains… I think maybe because we use different version of Nextgen or WordPress.
Thank you Radu anyway!! I appreciate your effort really! Please do not feel bad, your tutorial must be good, since I use firefox to try your demo on this page and it works fine, there must be something wrong with my side.
Talk to you later if I find some way to sove this problem!!
Radu, thanks for all the information. I initially could not get it to work on my WP3 multisite installation and using latesat version of Highslide JS v.4.1.9. Then I thought to try the earlier version, that you had (v.4.1.8, which I had from previous usage) and it worked well.
Have you had, or heard of, such issues with the latest version of Highslide, released about a month ago?
Thanks – you’re bookmarked!
It should be ok with any version, but I still have to make an update to the latest changes so …
Radu, do you know of any way to display more info from NextGen Gallery? For example having the Gallery Title or the Gallery Description for the hs.headingText field…
Thanks!
Use
hs.captionEval = 'this.a.title';to get the title from highslide, hope it works for you.Excellent, I think that should get me what I need (or close…)
Basically I see a lot of meta information in NextGen that is not leveraged by Highslide.
Images have:
- Image alt & title text
- Image description
- Image tags
- Gallery title
- Gallery description
So far I only see the first one displayed in the gallery.
I’d like to show the Gallery title above the image in bold, followed by the Gallery description. Under the image would be Title in bold, followed by description (non-bold) and then show the tags (preceded by “Tags: string)…
I initially assumed I will get this from making changes to NextGEN. But with your latest suggestion, I think the rest may be done through Highslide (using the Highslide Editor… need to investigate that tool more).
Additionally, I would like to have the tags (set in NextGEN) hyperlinked that would lead to galleries of images would that tag (or even a WP page with a listing of them…). Do you think that would be possible?
Also, I would rather have Image Alt value and Image Title value not be the same. W3C is pretty explicit how these serve different purposes (Alt is a description for people that cannot see the image, where Title is more like a short caption providing additional information – reason browsers display Alt if the image is not display and Title in a tooltip if hovering over image). But that’s another story….
Strategerizer you can only get in Highslide the meta info that is written in the source of the page. For example Image tags I don’t think they are written in the page source they only reside in the database for that image so you won’t be able to get that information and show it in the Highslide info bars.
Hope it makes sense what I’m trying to say
Try to right click the page and select View Source and the find your images, there you will find title, alt, and other tag properties with info from NextGen, only that info can be shown in Highslide.
Oh… BTW, I figured out what my issue was with v.4.1.9 – forgot to replace the placeholder path for the graphics directory in the configuration file… dooh!