Getting Highslide Working with Nextgen Gallery for WordPress is not complicated. Highslide is even supported by NextGen Gallery. However, the support in NextGen Gallery will only get the basic functions of Highslide to work. By default, the Highslide control bar navigation and captions do not work when used in conjunction with NextGen Gallery.
To get the Highslide control bar navigation and captions working with Nextgen Gallery, we need to make some modifications. In the following tutorial, I explain how to integrate a fully functioning Highslide into a WordPress Nextgen Gallery.
WordPress Highslide integration with a Nextgen Gallery :
The following assumes that NextGen Gallery is already installed.
- Download Highslide and unzip or extract the contents to your PC
- Upload the highslide directory to your WordPress Plugins directory. I.E.: /wp-content/plugins/
- Create a new text file and copy the following into it, change all occurrences of YOURSITE to your actual site url and then save the file as highslide.css:
- Next, upload the highslide.css file you just created to the highslide folder in your WordPress plugins directory. I.E.: /wp-content/plugins/highslide/
- Now, Login to your WordPress admin panel and navigate to Design -> Theme Editor and select Footer (footer.php) from the Theme File list.
- Just before the closing </body> tag, add the following code. Change all occurrences of YOURSITE to your actual site url and then click Update File:
- Next, Navigate to Gallery -> Options -> Effects. Select Highslide from the Javascript Thumbnail effects dropdown list and click Update
.highslide{
cursor:url(http://YOURSITE/wp-content/plugins/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(http://YOURSITE/wp-content/plugins/highslide/graphics/loader.webp);
background-repeat:no-repeat;
background-position:2px 2px;
}
.highslide-move{
cursor:move;
}
.highslide-overlay{
display:none;
}
.controlbar{background:url(http://YOURSITE/wp-content/plugins/highslide/graphics/controlbar4.webp);
width:167px;
height:34px;
}
.controlbar a{
display:block;
float:left;
height:27px;
}
.controlbar a:hover{
background-image:url(http://YOURSITE/wp-content/plugins/highslide/graphics/controlbar4-hover.webp);
}
.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;
}
<!-- Start Highslide Mod -->
<script type="text/javascript" src="YOURSITE/wp-content/plugins/highslide/highslide.js"></script>
<script type="text/javascript">
hs.registerOverlay(
{
thumbnailId: null,
overlayId: 'controlbar',
position: 'top right',
hideOnMouseOut: true
}
);
hs.graphicsDir = 'YOURSITE/wp-content/plugins/highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.captionEval = 'this.thumb.title';
hs.showCredits = false;
</script><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>
<!-- End Highslide Mod -->
That's it, now when you go view your site, you should see highslide with navigation and captions once you hover over any Nextgen gallery image!