This post has absolutely nothing to do with travelling, so stop reading if you’re not interested in geeky Wordpress stuff. In the process of making Travel-Junkie.com a better experience for my visitors I have discovered the excellent Highslide effect for images and loads of other stuff by Torstein Hønsi. So I started implementing this effect, which should have been pretty straight forward, especially considering that the gallery plugin I use for Wordpress, NextGen Gallery, comes with built in support for Highslide. In the end it took me far longer to get it to work exactly the way I wanted.
The support in NextGen Gallery only gets a basic version of Highslide to work. Captions won’t display and there won’t be any navigation from one picture to the next, both of which I wanted. After I had everything implemented I thought of just writing a little How-To in the NextGen Gallery Forums, but that post would have been a bit too long, hence the post here on my blog. It could even be helpful for people just wanting to get Highslide working on a Wordpress blog, that do not want to install yet another plugin.
Alrighty, let’s get all the necessary files first
First of all, go to the Highslide homepage and get yourself the latest stable release and unzip that. Don’t worry about all the different folders in there. You just need the ‘highslide’-folder. Then download from your server following files from your theme folder:
- header.php
- footer.php
Then grab from your plugin/nggallery/ folder these files:
- nggfunctions.php
- nggwidget.php
Make a backup of those last 4 files in case something goes wrong.
After that open your editor, name the file highslide.css, put following code into it, fill in the WP plugin path and save it into the ‘highslide’-folder:
/*MAKE SURE TO FILL IN THE PATH TO YOUR PLUGIN DIRECTORY EVERYWHERE IT SAYS, SURPRISE...'PATH TO PLUGIN DIR'*/ .highslide{ cursor:url(/PATH TO PLUGIN DIR/highslide/graphics/zoomin.cur), pointer; outline:none; } .highslide-caption{ display:none; border:2px solid white; border-top:none; font-size:10pt; padding:5px; background-color:white; } .highslide-loading{ display:block; padding:2px; border:#000; background-color:#fff; /*you might have to adjust the width and the height to suit your loading image, or if you want text, then edit the option in highslide.js and adjust the css here*/ width:16px; height:16px; background-image: url(/PATH TO PLUGIN DIR/highslide/graphics/loader.gif); background-repeat:no-repeat; background-position:2px 2px; } .highslide-move{ cursor:move; } .highslide-overlay{ display:none; } .controlbar{background:url(/PATH TO PLUGIN DIR/highslide/graphics/controlbar4.gif); width:167px; height:34px; } .controlbar a{ display:block; float:left; height:27px; } .controlbar a:hover{ background-image:url(/PATH TO PLUGIN DIR/highslide/graphics/controlbar4-hover.gif); } .controlbar .previoushs{ width:50px; } .controlbar .nexths{ width:40px; background-position:-50px 0; } .controlbar .highslide-move{ width:40px; background-position:-90px 0; } .controlbar .closehs{ width:36px; background-position:-130px 0; } /*DO NOT DELETE THIS, YOU WILL REGRET IT...*/ .highslide-display-block{ display:block; } .highslide-display-none{ display:none; }
Adjusting the files
highslide.js
The only thing you have to do here is adjust the options at the top of the file. That is basically up to you, but there are three options you will have to check. The most important one is that you set ‘graphicsDir’ to the correct directory, like /PATH TO PLUGIN DIR/highslide/graphics/. If this is not set correctly, nothing will happen at all when an image gets clicked. Then change the ‘loadingText’ to an empty string to be able to use an image. If you want to display a text fill it in here and then adjust the CSS in highslide.css. The last one to adjust would be ‘outlineType’. It works best with ‘rounded-white’, but whatever you like is cool.
header.php
Open header.php and add the following code between the < head >< /head >, preferably at the end. Then, again, change all the /PATH TO PLUGIN DIR/-instances to the path of your plugin directory
<link href='/PATH TO PLUGIN DIR/highslide/highslide.css' rel='stylesheet' type='text/css' /> <script type='text/javascript' src='/PATH TO PLUGIN DIR/highslide/highslide.js'></script> <script type="text/javascript"> hs.registerOverlay( { thumbnailId: null, overlayId: 'controlbar', position: 'top right', hideOnMouseOut: true } ); </script>
The first two lines make sure that all the needed highslide-files are loaded and the rest is needed for the navigation between pictures within the highslide effect
If you are worried about the overhead, that gets added by the script, then use the following code instead. This loads highslide.packed.js instead of highslide.js, which is about half the size. All options that you want to change have to be put into the header this time, like in this example:
<link href='/PATH TO PLUGIN DIR/highslide/highslide.css' rel='stylesheet' type='text/css' /> <script type='text/javascript' src='/PATH TO PLUGIN DIR/highslide/highslide.packed.js'></script> <script type="text/javascript"> hs.registerOverlay( { thumbnailId: null, overlayId: 'controlbar', position: 'top right', hideOnMouseOut: true } ); hs.graphicsDir = "/PATH TO PLUGIN DIR/wp-content/plugins/highslide/graphics/"; hs.loadingText = ""; hs.fullExpandTitle = "Expand to actual size"; hs.restoreTitle = "Click to close image, click and drag to move. Use arrow keys for next and previous."; hs.focusTitle = "Click to bring to front"; hs.loadingTitle = "Click to cancel"; hs.captionSlideSpeed = 0; hs.showCredits = false; hs.align = "center"; hs.outlineType = "rounded-white"; </script>
EDIT:With Highslide 3.3.0 onwards you have to add following option to the above:
hs.captionEval = "this.thumb.title";
UPDATE: Now you can put all of the configuration javasript into a seperate file. Name it highslide.config.js and save it into the highslide folder. Then change the bits in header.php to just this:
<link href='/PATH TO PLUGIN DIR/highslide/highslide.css' rel='stylesheet' type='text/css' /> <script type='text/javascript' src='/PATH TO PLUGIN DIR/highslide/highslide.packed.js'></script> <script type='text/javascript' src='/PATH TO PLUGIN DIR/highslide/highslide.config.js'></script>
For whatever reason this wouldn’t work for me with versions below 3.3.0.
footer.php
Open that file and add following code right after all the < div > have been closed, but before < /body >
<div id="controlbar" class="highslide-overlay controlbar"> <a href="#" class="previoushs" onclick="return hs.previous(this)" title="<?php _e('Previous (left arrow key)'); ?>"></a> <a href="#" class="nexths" onclick="return hs.next(this)" title="<?php _e('Next (right arrow key)'); ?>"></a> <a href="#" class="highslide-move" onclick="return false" title="<?php _e('Click and drag to move'); ?>"></a> <a href="#" class="closehs" onclick="return hs.close(this)" title="<?php _e('Close'); ?>"></a> </div>
This is the navigation part. Highslide will grab that bit when it needs the navigation. Usually it is hidden by the CSS
nggfunctions.php
Subsitute at line 301 this bit of code
$out .= '<a href="'.$link.'" title="'.stripslashes($picture->description).'" '.$thumbcode.' >';
with this
$out .= '<a id="thumb'.$picture->pid.'" href="'.$link.'" title="'.stripslashes($picture->description).'" '.$thumbcode.' >';
This gives every picture a unique ID, which is needed for the captions.
So captions get added you need to add the following code after all the image output at line 303
EDIT:Not necessary anymore with Highslide 3.3.0 onwards
//this is for highslide $out .= '<div class="highslide-caption" id="caption-for-thumb'.$picture->pid.'">'.stripslashes($picture->description).'</div>'; //end highslide
The unique ID is repeated here and now Highslide knows which caption belongs to which image.
What we just did sorted the gallery output, now we need to do the same for singlepics in posts as well. At line 569 substitute this code
// add fullsize picture as link $content = '<a href="'.$picture->imagePath.'" title="'.stripslashes($picture->description).'" '.$picture->get_thumbcode("singlepic".$imageID).' >'; $content .= '<img class="ngg-singlepic" src="'.NGGALLERY_URLPATH.'nggshow.php?pid='.$imageID.'&width='.$width.'&height='.$height.'&mode='.$mode.'" alt="'.stripslashes($picture->alttext).'" title="'.stripslashes($picture->alttext).'"'.$float.' />'; $content .= '</a>';
with this
EDIT:If you use Highslide 3.3.0, then you won’t need all the //this is for highslide blablabla //end highslide stuff
// add fullsize picture as link $content = '<a id="thumb'.$picture->pid.'" href="'.$picture->imagePath.'" title="'.stripslashes($picture->description).'" '.$picture->get_thumbcode("singlepic".$imageID).' >'; $content .= '<img class="ngg-singlepic" src="'.NGGALLERY_URLPATH.'nggshow.php?pid='.$imageID.'&width='.$width.'&height='.$height.'&mode='.$mode.'" alt="'.stripslashes($picture->alttext).'" title="'.stripslashes($picture->alttext).'"'.$float.' />'; $content .= '</a>'; //this is for highslide $content .= '<div class="highslide-caption" id="caption-for-thumb'.$picture->pid.'">'.stripslashes($picture->description).'</div>'; //end highslide
EDIT:From Highslide 3.3.0 onwards it is possible to use title=”this is a caption” from the < img > tag as a caption. NextGen Gallery by default uses the alt text. If you want to change that, then change ->alttext to ->description in the image tags responsible for the gallery and image output in nggfunctions.php and nggwidgets.php!
If you want Highslide to link all singlepics on one page to form a small slideshow, then change
'.$picture->get_thumbcode("singlepic".$imageID).'to
'.$picture->get_thumbcode("singlepic").'in the code above
nggwidget.php
The code looks a bit different here, but the principle is the same. Change line 203
$out = '<a href="'.nggallery::get_image_url($image->pid).'" title="'.stripslashes($image->description).'" '.$thumbcode.'>';
to this
$out = '<div class="highslide-caption" id="caption-for-thumb'.$image->pid.'">'.stripslashes($image->description).'</div><a id="thumb'.$image->pid.'" href="'.nggallery::get_image_url($image->pid).'" title="'.stripslashes($image->description).'" '.$thumbcode.'>';
That should sort the random and recent images out and with that we finished all the file modifications.
Upload everything!
If you haven’t made any backups of the files from your server so far, now’s a good time. Now upload the whole ‘highslide’ directory to your Wordpress plugin folder, then copy the footer.php and header.php into your theme folder and last nggfunctions.php and nggwidget.php into the nggallery folder. Almost time for a beer now. Before, though, check to see if the effect works in as many browsers as you can get your hand on. If it works, then you’ve earned yourself that beer, if not have a look through all the different steps to see if you missed something. If it still doesn’t work post a comment here and yell at me…
Tested with WP 2.3.1, NextGen Gallery 0.73 and Highslide 3.2.10 in Internet Explorer 7, Firefox 2.0.0.9 and Opera 9.24
Tags: Highslide, NextGen Gallery, Tutorial
nath - 16 November 2007 @ 11:48 AM
Really helpful post, mate. Thanks. The highslide ‘plugin’ if you can call it that seems awesome. A real nice way of displaying photos - I’m definitely gonna bookmark this as I’d love to use something like this on my site in the future.
thanks!
michelle - 16 November 2007 @ 11:12 PM
Thanks for this information!! The “highland effect” is working. However, the positioning of the picture within the background frame is off, at least using Foxfire and IE. In particular, the image seems too high relative to the background frame, so that there is a small space at the bottom (just below the picture which shows through to the page from which the image is loaded), and the control panel is too low relative to the top edge of the picture. I realize this is a css issue, but I am not sure what modifications/changes should be made. Any ideas? Thanks, in advance, for your help.
michelle - 17 November 2007 @ 5:26 PM
Hello again. I have found that adding the following lines to the highside.css file,
.highslide-image {
padding:0px 1px 0px 0px;
background: white;
}
fixes the problem.
Yet, I found another problem when viewing the web site IE7. Specifically, when I hit the expander button “Expand to actual size,” the image blows up to a very large size — larger then the actual image size, so that it is very grainy. The same problem does not appear when using Firefox2. I followed your instructions very carefully, using highslide.packed.js. Would it be possible to remove the “Expand to actual size” function?
traveljunkie - 19 November 2007 @ 5:07 AM
Yeah, CSS might be a bit tricky. I”m not an expert when it comes to that. When I first installed Highslide nothing looked right. Found out later, that a few classes from other plugins were colliding, so I just renamed some of the classes and that fixed that problem. Thanks for the CSS fix, though!
There is an option you can set, that restricts the image fitting the size of the monitor. I”m not on my laptop here, but in an internet cafe, so don”t have access to my files. Set that option to true and it should fix the problem! If that doesn”t work, it”s probably best to ask in the Highslide forums! I”m not really a programmer and it took me ages just to get it working on my site…
michelle - 19 November 2007 @ 4:01 PM
Thanks for your prompt response, and the information. Your suggestion worked!
Dave - 19 November 2007 @ 4:35 PM
Thanks for the awesome tutorial. My only issues now are in IE(6&7) the gallery/album pages break my layout, & the control overlay does not show up in FF, but does in IE.
in action:
http://www.davehildebrand.com/gallery
traveljunkie - 20 November 2007 @ 7:23 AM
Dave, I had a look on your site. Checked it in FF and I can see the control overlay just fine. The album page is broken in IE though. Unfortunately I have no idea how to fix that. I”m really not that good with programming, but my guess is that there is some conflict in the CSS. Sorry I can’t be of more help…
I noticed that you didn’t adjust the loadingText option. I can see both the text and the image…
Dave - 20 November 2007 @ 2:54 PM
Thanks for the reply. I mucked about with it yesterday, after a good nights sleep, and noticed that the overlay just started working in FF. I later figured out that it was due to my use of wp-cache. I had uploaded the overlay I am using after the 1st viewing over the image and it took an hour to clear the cache.
The IE issue was also fairly easy to fix. In my pages template I had commented out the “comments” code and FF was able to use the but IE did not like it. Removing the REM fixed the layout error in IE.
I enjoyed reading through your site, happy travels!
Dave
SB - 21 November 2007 @ 7:29 PM
Hi Dave -
HTML does not seem to be working in my captions. When I enter a tag into the picture description (ie. or < strong >) it’s simply showing it as though it’s part of a the text. Any ideas how to fix this?
Fantastic work by the way, you’re a hero!
Dave - 21 November 2007 @ 9:51 PM
Well i did not write the code for this, but, I am fairly sure HTML code is not allowed. I would check out http://alexrabe.boelinger.com/ for more specifics.
Bob - 23 November 2007 @ 5:11 PM
Hi Dave,
I’m kind of a rookie when it comes to messing around with code. It seems I got highslide and ngg see each other but when I click an image on my page I just get a loading icon. What could I be missing here? Here’s the link so you can see what I mean. http://www.farmidable.com/wallpaper-gallery-beta-2
Thanks for your help, and thanks for posting how you did it.
Dave - 23 November 2007 @ 8:35 PM
I see what you mean. How large are those gif’s? Have you tried jpg, png or bmp files?
Bob - 23 November 2007 @ 10:09 PM
Hi Dave,
Thanks for looking at my problem.
They are pretty small. 425 x 282 px, the largest file size is 76kb.
Bob - 23 November 2007 @ 10:17 PM
Oh yeah, and the second part of your question: Some of them are jpgs but they don’t work either. I didn’t try png files, i imagine it doesn’t have to do with images thou but somehing else.
traveljunkie - 24 November 2007 @ 4:29 AM
Bob, looks like you didn’t set your graphics directory properly. Make sure that it’s correctly set in highslide.js or integrate it into your header. Than images should show up using highslide. Make sure as well to set the loadingText to an empty string (like ”) so that you don’t get a loading text and an image at the same time!
Oh, and Bob, Dave didn’t post it, I did. Last time I looked this was still my blog…lol…
Dave - 24 November 2007 @ 6:13 AM
Hehe…I was waiting for you to chime in…I take no credit for the fine work above…it’s all TJ’s work and research you see above…
Bob - 24 November 2007 @ 2:54 PM
YEAH!!! Thank you so much for your help Traveljunkie. I found the problem right where you said and now it works great. Sorry about the mixup in the comments. My humble apologies. You’ve got a great blog. Looks like you’re in a nice warm place too. It’s a cold day out in the U.S. Northeast. Consider me envious.
traveljunkie - 25 November 2007 @ 5:33 AM
No worries, Bob, it made me chuckle. Am on the airport in Sydney, about to fly to Christchurch, NZ.let’s see how warm it is there…
HeavyGod - 27 November 2007 @ 9:26 AM
Really good and really interesting post. I expect (and other readers maybe :)) new useful posts from you!
Good luck and successes in blogging!
traveljunkie - 27 November 2007 @ 11:56 AM
Thanks HeavyGod! The chance that more post like this one will come is quite rare. I usually write about my travels! But you never know, the next time I find something for my site, maybe…
Sonny - 6 December 2007 @ 6:23 PM
Hi -
I’m having trouble in IE…
When an image is clicked, the thumbnails seem to shift up and move out of their grid formation. I’ve looked over the CSS and can’t see any issues, do you know what might be causing it?:
http://www.bakerandkelly.com/library/sponsors/
Thanks for the great work!
traveljunkie - 6 December 2007 @ 11:03 PM
I just had a look, you’re using a highslide plugin, right? deactivate that and do it without that exactly like in the tutorial. Right now you basically have highslide.js included twice, which might be a problem. And the javascript in the header is split into two instances. Just combine those. Then rename the nextgen-gallery folder in your plugin folder to nggallery. Not sure if that’s really a problem, but according to the plugin-homepage that’s what it’s supposed to be. If you still have any problems let me know. Good luck!
Sonny - 15 December 2007 @ 4:46 PM
Thanks for your help, much appreciated.
teros - 20 December 2007 @ 11:01 AM
thanks much for these instructions friend.
it took a little more hacking around than i’d like (i’m lazy like that) but the end result is very nice.
i just ran across the highslide script after trying every incarnation of lightbox, lytebox, slimbox, thickbox etc etc at least twice in my wp sites and being not quite satisfied with any of them…..i like it (highslide) very much but until i stumbled across the link to ur site and this post i was less than optimistic about getting it to function properly.
its refreshing when people who have had to poke and prod around to get things to work actually take the time to share what they’ve learned in little how to’s like urs. its much appreciated.
traveljunkie - 21 December 2007 @ 12:57 AM
No worries, Sonny and Teros. Glad I could help!
Sachin - 22 December 2007 @ 6:17 AM
Hi, I did exactly as you have stated, but the highslide effect ain’t working. I have two wordpress running on my site. Could that be a problem. i have a baby folder under root and it has wordpress. As stated on your site i gave the path /baby/. Any suggestions would be greatly appreciated.
Thanks, Sachin
Sachin - 22 December 2007 @ 6:20 AM
Sorry its asmi.sachingopal.net, fixed here
traveljunkie - 23 December 2007 @ 1:07 AM
Hey Sachin,
just had a look. You have all the necessary stuff included twice in your header and your footer. Get rid of one set and see if that works. Apart from that I can’t see anything right now. I have no experience with two installations of WP on one site. Can’t help you there, sorry.
Let me know if it works.
Qlix - 11 January 2008 @ 1:11 AM
Hi There! You’re nice guy.. I like that you fine some time for us, and give full answer - how! Thank you..
But I can’t figurate one thing. My control bar is not showing, I can switch between the pictures by pushing arrows left and right on my keyboard, but not with the mouse.. I spend 3 hours already in my localhost, to figure how.
Paths to “controlbar4.gif” in css file checked and 100% working. I used ‘.$picture->get_thumbcode(”singlepic”).’ trick, I have all the latest current WP and Highslide. Tell me please, fhat files or what steps in your article shows exactly, where I can setup control bar buttons.
Thank you very much, you’re already done a lot!
traveljunkie - 11 January 2008 @ 7:53 AM
Qlix, it’d be helpful if you could post a link to your site. If the controlbar doesn’t show up, then check again that you have all the correct paths in the CSS files and that you included the bits where it says footer.php. If that isn’t in there the control bar won’t show up. Let me know how you get on!
Qlix - 11 January 2008 @ 3:01 PM
Hi again!
I double chack all the stuff and find out, that my footer.php doesn’t loads at all, so I add the getfooter funktion and now it’s working perfectly. But now I’m curious how to make gallery struction like yours.. 1 thumb with the link to a whole directory. Is there all the properties in Wordpress -> Gallery submenu? Now I’m just post a link to a page with my [gallery-2] string, but there’s all the images a have in the dirrectory, also I don’t need there “Filed under: bla bla — bla bla @ 2:54 pm” thing..
Now you’re see? You post one lesson but I’m asking you about whole another :D :)
You can see my gallery at (www)djleksy(dot)com in “media” section..
Thank you again! You’re the best!
traveljunkie - 12 January 2008 @ 3:50 AM
Qlix, you need to create an album full with galleries and then post the album tags on a page. That should do it. For general help the NextGen forums are an excellent source.
George - 3 March 2008 @ 11:56 AM
Great great great article!
Two questions though…
1.How do you do in your galleries so that your pictures, when clicked, the thumbnail dissapears, and the big image show aligned not only vertically but also horizontally?
2.Highslide works on IE 6 on some computers, on other doesn`t (i mean different versions of IE actually), the same with IE 7, why is that? is there any fix to it?
Thanks in advance, looking forward for you answer!
traveljunkie - 8 March 2008 @ 1:26 AM
Different browsers deal differently with different scripts, sadly enough… Life would be a lot easier otherwise. Anyways, Highslide should work in any modern browser (starting with version 5.0 of IE, I think). I haven’t noticed my site not working in any of the different internet cafes I’ve been to over the last few months. If it doesn’t work, then it’s most likely not the scripts fault, but something you did wrong when you set it up. Go to the HS forums if you want to know more.
You center the images with hs.align = “center”; in your header. For this to work you need to have ‘Advanced Positioning’ ticked in the configurator when you download HS.
Sommer C. - 29 March 2008 @ 9:06 PM
I don’t have the following in my original nggfunctions.php:
// add fullsize picture as link
$content = ‘< a >imagePath.’” title=”‘.stripslashes($picture->description).’” ‘.$picture->get_thumbcode(”singlepic”.$imageID).’ >’;
$content .= ‘alttext).’” title=”‘.stripslashes($picture->alttext).’”‘.$float.’ />’;
$content .= ‘< /a >‘;
berkay - 30 March 2008 @ 7:59 PM
Hello, first of all thank you very much for this descriptive post. I read and applied it before, when the WB version is 2.3. The NGG and HS versions were old too. O worked successful.
But now I update my site to WP 2.5 and the latest version of NGG and HS. I am trying to apply again but it doesn’t work. I don’t understand why. Could you help me? When an image gets clicked, the “loading” appears but nothing happen then.
traveljunkie - 31 March 2008 @ 10:08 AM
@Sommer C
it would be helpful if you told me what wordpress version and nggallery you are using. can’t really help you with the information provided…
@berkay
it works at my site. only running 2.5rc1 right now, but it should work. When you see the loading image then in 99% of the time the path to hs.graphicsDir is incorrect. Please check that and let me know if that fixes things…
berkay - 31 March 2008 @ 1:02 PM
I have checked the hs.graphicsDir value and others path definitions twice again. Those are correct. “/wp-content/plugins/nextgen-gallery/highslide/graphics/”.
But I discovered that if I use highslide.packed.js instead of highslide.js it works normally. I would prefer to use highslide.js, not highslide.packed.js but it forced me to use highslide.packed.js.
One more thing, the black background under “Loading” text is very short. The background is only under “Lo..” letters, not the whole word.
traveljunkie - 4 April 2008 @ 12:53 PM
Try absolute links, Berkay. It should work with the normal version as well, although the packed version is better in my opinion anyways. Less overhead.
According to the info in your header you shouldn’t even have a loading text, as it’s empty, so not too sure what went wrong there. Sounds like a CSS problem, really…
Sam - 6 April 2008 @ 3:13 PM
Boris,
I’m interested in using Highslide with the latest versions of NextGen for WP2.5 and your Tiltviewer, Simpleviewer and Autoviewer plugin.
As currently the default thickbox restricts in overall height … not knowing what I need to do to change it…
I am confused with all these instructions for highslide due to latest version out - I have downloaded highslide 3.3.12.
Can you tell me what is exactly needed in terms of changes to use highslide with nextgen now? ..
Thx!!!
Tom - 13 June 2008 @ 11:04 AM
Hi Boris,
sorry ich mal wieder. Ich habe das gleiche Problem wie Sommer C (siehe oben) vorgefunden. Ich verwende WP 2.51 DE Edition und die 0.96 Version von NextGen.
Der Code in Zeile 569
$content = ‘imagePath.’” …
$content .= ‘<img class=”ngg-singlepic” … existiert nicht.
die $content variable ist hier $out und es ist eine Abfrage dazwischen. Ich habe versucht die Umsetzung “sinngemaess’ zu machen, jedoch ohne Erfolg.
Was muss sonnst noch eingestellt werden? In OPTIONEN Effect? usw. Sorry dass ich laestig bin, aber das Teil gefaellt mir so gut - Muss ich haben ;-)
Tom - 13 June 2008 @ 11:12 AM
noch vergessen, ich bekomme die Meldung Gallery XML not found.
traveljunkie - 13 June 2008 @ 12:25 PM
Tom, in den letzten Versionen von NGG und Highslide hat sich einiges getan und ich denke, dass man nichts mehr NGG-Spezielles mehr machen muss. Nur Stylesheet und Javascript in den head, wie oben beschrieben, hs.captionEval nicht vergessen und das Zeug für die Controlbar in footer.php.
Wo kommt die Meldung, dass Gallery XML nicht gefunden wurde? FlashViewer oder NGG? Poste mal einen Link, damit ich mir das ansehen kann…
Tom - 13 June 2008 @ 4:08 PM
Es sieht so aus als es der Flash viewer ist. Leider habe ich die Sache noch nicht online. Nur auf meinem XAMPP im Buero laufen. Somit leider keine moeglichkeit dir nen Zugang zu geben. Ich schau’s mir morgen nochmal and… Wenn’s nicht klappt, stehe ich wieder vor der Tuer ;-)
beipopo - 17 June 2008 @ 5:05 AM
Hi! I have the same trouble as Sommer C.
I use wordpress 2.5.1, nggallery 0.96, and highslide 3.3.19.
I can’t get the following in my original nggfunctions.php:
// add fullsize picture as link
$content = ‘imagePath.’” title=”‘.stripslashes($picture->description).’” ‘.$picture->get_thumbcode(”singlepic”.$imageID).’ >’;
$content .= ‘alttext).’” title=”‘.stripslashes($picture->alttext).’”‘.$float.’ />’;
$content .= ‘‘;
traveljunkie - 17 June 2008 @ 5:38 AM
I should probably update this article. Lots of things have changed, so you shouldn’t need to change anything in the NGG files anymore…
Jon - 15 July 2008 @ 12:55 AM
Is there a way to get the compact album thumbnails to do the highslide effect?
traveljunkie - 15 July 2008 @ 4:50 AM
Jon, there probably is, but it would involve hacking NGG core files and what’s the point really? I mean, you’d want your visitors to go to your gallery page and maybe leave a comment instead of just surfing around your album pages, right?
Jon - 15 July 2008 @ 6:15 PM
Well Im using the nextgen gallery as for products and I would like my users to be able to see a preview of the product before entering the gallery. Can you help me out with this?
traveljunkie - 16 July 2008 @ 4:10 AM
Jon, it’s better if you ask Alex (developer of NGG) directly in the Wordpress forums. He’s got a lot more experience with NGG.
cnb - 23 July 2008 @ 2:54 AM
hi,i´ve done step by step but it only show the loading… and the load pic ,then nothing happend
i’m using NGG 0,98 and highslide 3.3.22(lastest)
pls help me if u get sometime for it.
here i set the demosite
Thank you very much
cnb - 23 July 2008 @ 3:35 AM
oh, one thing more
i am using the FF3 and Safari to test it
it shows the loading pic and the “loading….” text at same time.
i checked all the steps i dont know what i did wrong.
Zielony - 23 July 2008 @ 11:12 AM
Hi Boris. Many thanks for the great tutorial. You are a man!
But I am a bit confused, because I can’t figer out how do this: if You click on a thumbnail You get biger picture and the thumbnail is gone below the biger picture. On my website the thumbnail is still in the same place. How do this to make thumbnails disappeared? Many thanks.
cnb - 24 July 2008 @ 12:00 AM
UPDATE: NGG 0,98 and highslide 3.3.22(lastest) and Wordpress 2.6
it works now only if i copy the Codes to Hearder.php
hs.registerOverlay(
{
thumbnailId: null,
overlayId: ‘controlbar’,
position: ‘top right’,
hideOnMouseOut: true
}
);
BUT still can´t show the caption
when i use set the hislide.config.js which means it use highslide.packed.js , it just keep showing the “loading…”label and the loader.gif , i think the graphicDir was right..
hm.. still need someone help me out…
traveljunkie - 25 July 2008 @ 8:52 AM
IMPORTANT MESSAGE:
It is no longer necessary to follow all of the above steps. Only the header and footer bits, guys. Sorry I can’t really give more support at the mo, but I’m off for a few weeks diving and beachlife in Indonesia…
Tom - 25 July 2008 @ 9:40 AM
Hi cnb…
i had the same problem. Then i found out i forgot the
hs.captionEval = “this.thumb.title”;
Now it works…
Brenda - 1 August 2008 @ 11:47 PM
Hi traveljunkie - you’ve really done such a great job, thanks for your work on this. Hope you’re enjoying Indonesia… I’m nearby in KL. :)
I haven’t got a public post with the gallery, but I have the same prob as a couple others have had - image keeps loading and loading, but never shows up (and that’s why I can’t make it a public post).
I can keep trouble-shooting on my own, but am just wondering if this is the correct plugin path on the highslide.css. Just this one bit of code, is it correct?
.controlbar{background:url(/http://www.engberts-kaya.com/public_html/wp-content/plugins/highslide/graphics/controlbar4.gif);
Do I need the ‘/’ at the beginning? Do the brackets stay? Sorry, I’ve tried a number of variations, just want to make sure it’s correct. Hope you (or someone) can help.
Thanks! Happy diving. :)
Brenda - 2 August 2008 @ 12:07 AM
Well it seems I’ve got it now… thanks. :)