Latest Version: 1.0 - Changelog - TO-DO

Author: Boris Glumpler

Requires at least: WP 2.1.0

Tested up to: WP 2.6

Download: Click here for the zip!

Check out NextGEN FlashViewer, another add-on for your NextGEN Gallery!

NOTE: I would like to add more effects to this plugin, but I am near to useless with JS. So if there are any knowledgeable JS-coders out there, who could modify imageflow.js for use with Thickbox or Lightview then go for it and I will include it!

ONE MORE NOTE: If you have translated NextGEN ImageFlow into your language, then please send me the .po and .mo files and I will include them in the next release. Thank you!

Installation

1. Upload all files except reflect.php to wp-content/plugins/nextgen-imageflow
2. IMPORTANT: Upload reflect.php to your Wordpress root folder
3. Activate the plugin
4. Go to Gallery->ImageFlow and change the options to your liking
5. Go to your post and enter tag [imageflow=GALLERY-ID]

Update

1. Upload new files to the nextgen-imageflow folder using FTP
2. Check to see if everything works…
3. Done!!

Usage

This one is fairly simple. There’s only one tag to use, so all you need to do is find the correct gallery ID, so it’s basically failsafe.

[imageflow=14]

Frequently Asked Questions

1. I installed everything, but I don’t see any images. What am I doing wrong?

   Check if you have uploaded reflect.php to your Wordpress root folder (the directory where your wp-config.php file is in).

2. I set the thumbnails to be displayed by Highslide, but it doesn’t $%*&$§ work?

   Highslide needs to be installed already. All the plugin does is include the necessary compatible files for use with Highslide.

3. My images don’t seem to get cached?

   For the caching to work you have to use the NGG default paths, as NextGEN ImageFlow uses the same cache folder as NGG. So that would be wp-content/gallery/cache.

4. But I changed that path. What can I do?

   Open reflect.php, go down to line 82 and adjust the path. Alternativley you can disable caching by setting $_GET['cache'] in reflect.php on line 33 to 0.

5. ImageFlow works perfectly on my posts, but not on my index page. Why is that?

   According to the ImageFlow homepage you can only use ImageFlow once per page. An object-oriented version of ImageFlow may come in the future though. It is probably best to use ImageFlow below <!–more–> to avoid any problems. Also limit ImageFlow to one occurance per post.

6. Anything else I should know?

   Well, now you can use a reflection with any image on your blog that is not part of your NextGEN Gallery. Instead of referencing the URL of your image you can now write something like this:
   src=”path/2/WP-root/reflect.php?img=rel/path/2/image.jpg”.

The Future

Over time there will be more options available in the admin section and I am planning to add more effects to open images in as well as open the whole gallery in. Leave a comment if you have any feature wishes or if you’ve got something nice to say.

Bugs and other insects

If you encounter any problems, bugs or annoying mosquitos, please leave a comment and I will come running with my can of 100% deet…

Credits and Thanks

The idea for this plugin came from Martin Meier. He helped quite a bit with the testing as well, so thanks, Martin.

Latest Version: 1.0 - Changelog

Author: Boris Glumpler & Alex Rabe

Requires at least: WP 2.1.0

Tested up to: WP 2.6

Download: click here for the zip!

NOTE: If you have translated NextGEN FlashViewer into your language, then please send me the .po and .mo files and I will include them in the next release. Thank you!

Check out NextGEN ImageFlow, another add-on for your NextGEN Gallery!

Installation

1. Upload the files in nextgen-flashviewer to wp-content/plugins/nggflashviewer
2. Go to airtightinteractive.com and download the SimpleViewer & Tiltviewer, AutoViewer & PostcardViewer
3. Rename the viewer.swf in the postcardviewer folder to pcviewer.swf
4. Upload the files viewer.swf, TiltViewer.swf,autoviewer.swf and pcviewer.swf to the nggflashviewer/flash folder
5. Activate the plugin
6. Go to Gallery->FlashViewer and change the options to suit your needs.
7. That’s it…

Update

1. Upload new files to the nggflashviewer folder using FTP
2. Check to see if everything works…
3. Done!!

Usage

You have two main options in displaying the three viewers. Inline or with a javascript effect. The main tag you can add in your posts looks something like this:

[simple/tilt/autoviewer=galleryID or flickr,width,height,*link*,+comma,seperated,flickr,tags+]

Let’s have a look at the inline version first.

Inline

Note that for the inline version you leave the *link* bit blank. Now to some examples…

SimpleViewer

[simpleviewer=13,500,600]

TiltViewer

[tiltviewer=14,500,550]

[tiltviewer=flickr,500,550,+christchurch+]

Enter the Flickr tags within the two + and only use these if you actually use Flickr. If you don’t enter any tags, then all Flickr images will be shown.

AutoViewer

[autoviewer=16,500,375]

PostcardViewer

[pcviewer=2,500,500]

Javascript Effect

Here you need to substitute the link in *link* for, what a surprise, the text you want as a link. I am so eloquent at times… I have the Highslide effect activated on my site, but NextGEN FlashViewer supports Thickbox and Lightview as well.

SimpleViewer

[simpleviewer=12,500,600,*test*]

TiltViewer

[tiltviewer=10,500,550,*test*]

[tiltviewer=flickr,500,550,*test*,+christchurch+]

AutoViewer

[autoviewer=11,500,375,*test*]

PostcardViewer

[pcviewer=4,500,500,*test*]

The Future

I am planning to add a few more features, like adding the additional options that come with the professional versions of the viewers or making it somehow use NextGEN image tags to display galleries. Don’t expect that to happen overnight though. I am still new to this whole programming bit. If you have any feature suggestions, then leave a comment and I’ll consider it.

Bugs and other insects

If you encounter any problems, bugs or annoying mosquitos, please leave a comment and I will come running with my can of 100% deet. Without a link to a testpage where I can see the problem I usually can’t say too much!!!

Credits and Thanks

Alex Rabe did all of the work for the initial version of this plugin and then he helped me with this one. Thanks a bunch for that. I learned a lot by just adding those few bits and pieces and made me realize how much more I actually don’t know.

Download The Files

From your server, get the files nggfunctions.php, nggwidget.php and your ngg CSS file and open them in your favorite text editor. If you have trouble with any of that, then check out my last tutorial on the matter. That will be a good reference as well in case something here is unclear. Have you noticed my different approach here? We’ve definitely moved on to intermediate sh**…

Singlepics

Just in case not everybody wants to join me in the Captionizing Bonanza, I’ve decided to split the tutorial into the three parts. This first part deals with singlepics (just in case you haven’t read the heading). Search in nggfunctions.php for the function nggSinglePicture and exchange

case 'left': $float=' ngg-left" ';
break;
 
case 'right': $float=' ngg-right" ';
break;
 
default: $float='';
break;

with

case 'left': $float=' ngg-left" ';
case 'left': $caption='<p class="singlepic-caption">'.stripslashes($picture->description).'</p>';
break;
 
case 'right': $float=' ngg-right" ';
case 'right': $caption='<p class="singlepic-caption">'.stripslashes($picture->description).'</p>';
break;
 
default: $float='';
default: $caption='';
break;

Now we need to add the $caption to the HTML output. For this change

// add fullsize picture as link
$out  = '<a href="'.$picture->imagePath.'" title="'.stripslashes($picture->description).'" '.$picture->get_thumbcode("singlepic".$imageID).' >';
if (!$cache_url)
	$out .= '<img class="ngg-singlepic" src="'.NGGALLERY_URLPATH.'nggshow.php?pid='.$imageID.'&amp;width='.$width.'&amp;height='.$height.'&amp;mode='.$mode.'" alt="'.stripslashes($picture->alttext).'" title="'.stripslashes($picture->alttext).'" />';
else
	$out .= '<img class="ngg-singlepic" src="'.$cache_url.'" alt="'.stripslashes($picture->alttext).'" title="'.stripslashes($picture->alttext).'" />';
$out .= '</a>';

to

// add fullsize picture as link
$out  = '<div class="singleimage'. $float .'" style="width:'.($width + 2).'px"><a href="'.$picture->imagePath.'" title="'.stripslashes($picture->description).'" '.$picture->get_thumbcode("singlepic").' >';
if (!$cache_url)
	$out .= '<img class="ngg-singlepic" src="'.NGGALLERY_URLPATH.'nggshow.php?pid='.$imageID.'&amp;width='.$width.'&amp;height='.$height.'&amp;mode='.$mode.'" alt="'.stripslashes($picture->alttext).'" title="'.stripslashes($picture->description).'" />';
else
	$out .= '<img class="ngg-singlepic" src="'.$cache_url.'" alt="'.stripslashes($picture->alttext).'" title="'.stripslashes($picture->description).'" />';
$out .= $caption;
$out .= '</a></div>';

I packaged everything up in a < div > and added some inline CSS. Now we need to adjust the external CSS a bit. Here is what I have in mine:

/* ----------- Single picture -------------*/
.ngg-singlepic{background-color:#FFFFFF;display:block;margin:4px auto 0 auto;position:relative;text-align:center;border: 1px solid #999;}
.singleimage{margin-left:auto;margin-right:auto;}
.singleimage p{margin-top:0;}
.ngg-singlepic a {text-decoration:none;}
.singlepic-caption{text-align:center;padding:3px 0 3px 0;margin:4px 0 4px;color:#999;font-size:80%;border:1px solid #999;border-top:none;}
.highslide img:hover{border:1px solid #000;}
a:hover .singlepic-caption{text-decoration:none;}
.ngg-left{float: left;margin-right:8px}
.ngg-right{float: right;margin-left:8px}

Have a play around to fit it to your needs.

First part…DONE!

The Widgets

If you have random or recent pictures in your sidebar and always thought they look kind of nude and a bit embarrassed, then I’ve got something to cover em up a bit, make em feel less self conscious. Open nggwidgets.php and have a look for function ngg_widget_output. Here exchange

$out = '<a href="'.nggallery::get_image_url($image->pid).'" title="'.stripslashes($image->description).'" '.$thumbcode.'>';
if ( $options[$number]['show'] == "orginal" )
	$out .= '<img src="'.NGGALLERY_URLPATH.'nggshow.php?pid='.$image->pid.'&amp;width='.$options[$number]['width'].'&amp;height='.$options[$number]['height'].'" title="'.$image->alttext.'" alt="'.$image->alttext.'" />';
else	
	$out .= '<img src="'.nggallery::get_thumbnail_url($image->pid).'" style="width:'.$options[$number]['width'].'px;height:'.$options[$number]['height'].'px;" title="'.$image->alttext.'" alt="'.$image->alttext.'" />';			
 
echo $out . '</a>'."\n";

with

$out = '<div style="width:'.$options[$number]['width'].'px;margin:0 auto 10px auto;"><a href="'.nggallery::get_image_url($image->pid).'" title="'.stripslashes($image->description).'" '.$thumbcode.'>';
if ( $options[$number]['show'] == "orginal" )
	$out .= '<img src="'.NGGALLERY_URLPATH.'nggshow.php?pid='.$image->pid.'&amp;width='.$options[$number]['width'].'&amp;height='.$options[$number]['height'].'" title="'.apply_filters('the_title', $image->description).'" alt="'.$image->alttext.'" />';
else	
	$out .= '<img src="'.nggallery::get_thumbnail_url($image->pid).'" style="width:'.$options[$number]['width'].'px;height:'.$options[$number]['height'].'px;" title="'.$image->description.'" alt="'.$image->alttext.'" />';			
	$out .= '<p class="singlepic-caption" style="width:'.$options[$number]['width'].'px;padding:3px 0 3px 0;">'.stripslashes($image->description).'</p>';
echo $out . '</a></div>'."\n";

Again, packed everything into a < div > and added some CSS. This time there is nothing to change in the external CSS file as I have written all the CSS inline. You might ask why I did that and the short answer is that it took too long for me to get it to work , so in the end I couldn’t be bothered anymore. Change the CSS to your liking. I have basically centered them, one above the other.

Second part…DONE!

Related Images

So, only one more thing to do. Related images. That’s the things at the end of a post. You can use them for your search as well, which I find really cool. Check it out on my blog search. Anyways, look in nggfunctions.php for this little bit in function nggShowRelatedGallery

$out .= '<a href="'.$folder_url.$picture->filename.'" title="'.stripslashes($picture->description).'" '.$thumbcode.' >';
$out .= '<img title="'.stripslashes($picture->alttext).'" alt="'.stripslashes($picture->alttext).'" src="'.$thumbnailURL.$thumb_prefix.$picture->filename.'" '.$thumbsize.' />';
$out .= '</a>'."\n";

Change it so it looks like this:

$out .= '<div class="related-images" style="width:122px;"><a href="'.$folder_url.$picture->filename.'" title="'.stripslashes($picture->description).'" '.$thumbcode.' >';
$out .= '<img title="'.stripslashes($picture->alttext).'" alt="'.stripslashes($picture->alttext).'" src="'.$thumbnailURL.$thumb_prefix.$picture->filename.'" '.$thumbsize.' />';
$out .= '<p class="singlepic-caption">'.stripslashes($picture->alttext).'</p>';
$out .= '</a></div>'."\n";

Here is what I have in my CSS file.

/* ----------- Related images -------------*/
.related-images{
	width:122px;
	float:left;
	margin-right:3px;
}
.ngg-related-gallery {
	background:#fff;
	overflow:hidden;
	margin-bottom:1em;
	padding:5px 0 5px 0;
}
 
.ngg-related-gallery img {
	float: left;
	margin: 0 3px 0 0;
	border: 1px solid #999;
	height: 90px;
	width:  120px;
}
 
.ngg-related-gallery img:hover {
	border: 1px solid #000;
}

Adjust it so it looks awesome.

Third part…DONE!

My problem with writing those tutorials is that I have all my ngg files heavily modified. I have it working together with a range of different plugins and scripts and I change the code around. I have tried my best to reverse the code back to what it would have been if I had only done the captions. Let’s hope you won’t, but you might run into a couple minor problems. I’ll be in the bush here in Kiwiland during the week killing trees for I don’t really know how much longer, but I’ll do my best to help with problems on the weekend. Just leave a comment and I will get back to ya…

Download The Files

Alright, open your favorite FTP program and download from your ../wp-content/plugins/nggallery/ folder the file nggfunctions.php and from the ../wp-content/plugins/nggallery/css/ folder the CSS file that you specified under the admin-tabs gallery - style. If you haven’t already renamed that file at some earlier point then I suggest you do that now, so it doesn’t get overwritten when you upgrade nggallery. You could use something like mydomain.css. Now upload that new CSS file and set it as your new stylesheet in the admin area.

Modifying The Files

Open nggfunctions.php and search for the function nggSinglePicture. Now look for this bit:

case 'left': $float=' style="float:left;" ';
break;
 
case 'right': $float=' style="float:right;" ';
break;

and change it to this:

case 'left': $float=' style="float:left;width:'.$width.'px;" ';
case 'left': $caption='<p class="singlepic-caption" style="width:'.$width.'px;" '.stripslashes($picture->description).'</p>';
break;
 
case 'right': $float=' style="float:right;width:'.$width.'px;" ';
case 'right': $caption='<p class="singlepic-caption" style="width:'.$width.'px;">'.stripslashes($picture->description).'</p>';
break;

This makes sure that captions get only added when the picture has a float attached to it. I didn’t want any captions on my centered images. If you do then just change it to:

case 'left': $float=' style="float:left;width:'.$width.'px;" ';
break;
 
case 'right': $float=' style="float:right;width:'.$width.'px;" ';
break;

So far so good. Now look for this bit:

// 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.'&amp;width='.$width.'&amp;height='.$height.'&amp;mode='.$mode.'" alt="'.stripslashes($picture->alttext).'" title="'.stripslashes($picture->alttext).'"'.$float.' />';
$content .= '</a>';

and change that to:

// add fullsize picture as link
$content  = '<div'.$float.'><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.'&amp;width='.$width.'&amp;height='.$height.'&amp;mode='.$mode.'" alt="'.stripslashes($picture->alttext).'" title="'.stripslashes($picture->alttext).'" />';
$content .= $caption;
$content .= '</a>';
$content .= '</div>';

Here I put the picture and the caption in a < div >, moved the float from the image to the < div > and added the caption.
UPDATE: Moved the $caption into the link. Mainly, this is useful if you’re running Highslide.
Exchange $caption with:

'<p class="singlepic-caption" style="width:'.$width.'px;">'.stripslashes($picture->description).'</p>';

if you want to add a caption to every singlepic and not just the ones with a float attached.

The only thing left to do is adjust the CSS so the caption looks good. Open the CSS file and look for Single picture. Add this bit:

.singlepic-caption{text-align:center;padding:3px 0 3px 0;margin:0 0 4px;color:#fff;background:#999;font-size:80%;border:1px solid #999;}
a:hover .singlepic-caption{text-decoration:none;}

Change the colors to your liking. You might want to set the bottom margin in .ngg-singlepic to 0 so there is no gap between the image and the caption.

Now upload all the files and you should be all set. If you run into any trouble then let me know. Enjoy!!

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.'&amp;width='.$width.'&amp;height='.$height.'&amp;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