Highslide in NextGen Gallery

Ein ziemlich beliebtes Tool zum Anzeigen von Bildern im Netz ist mittlerweile wohl das Highslide Plugin geworden. Genauer gesagt ist es eigentlich nur eine Javascript Erweiterung jedoch mit riesigen Potential. Diese Anleitung basiert auf den Release 4.1.5 des Highslide.js. Eine aktuelle Version samt Entwicklersupport gibt es hier: http://highslide.com/

Im Prinzip ist es ganz einfach, das Plugin mit der NextGen Gallery zum Fliegen zu bringen. Folgende Steps:

  • Download vom Highslide Plugin von oben genannter Adresse
  • Den Ordner “highslide” aus dem Archiv in das ../wp-content/plugin/ Verzeichnis der WordPress Installation entpacken
  • In der footer.php des aktuell benutzen Themes vor dem abschließenden </body> Tag folgenden Code einfügen. Dabei YOUR_SERVER_ADDRESS natürlich gegen die eigene Serveradresse samt WP-Pfad austauschen:
    • <!-- Start Highslide Mod Gallery -->
<script type="text/javascript" 
  src="YOUR_SERVER_ADDRESS/highslide/highslide-with-gallery.js">
</script>
 
<link rel="stylesheet" 
type="text/css" 
href="YOUR_SERVER_ADDRESS/highslide/highslide.css" />
 
<!--[if lt IE 7]>
<link rel="stylesheet" 
type="text/css"
href="YOUR_SERVER_ADDRESS/highslide/highslide-ie6.css" />
<![endif]-->
 
<script type="text/javascript">
hs.graphicsDir = 'YOUR_SERVER_ADDRESS/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.dimmingOpacity = 0.8;
hs.outlineType = 'rounded-white';
hs.captionEval = 'this.thumb.alt';
hs.marginBottom = 105 // make room for the thumbstrip and the controls
hs.numberPosition = 'caption';
 
// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
overlayOptions: {
className: 'text-controls',
position: 'bottom center',
relativeTo: 'viewport',
offsetY: -60
},
thumbstrip: {
position: 'bottom center',
mode: 'horizontal',
relativeTo: 'viewport'
}
});
</script>
 
<div class="highslide-gallery">
<a href="#" class="highslide" onclick="return hs.expand(this)" >"></a>
</div>
<!-- End Highslide Mod Gallery -->
  • In den Optionen der NextGen Gallery unter Effekte noch auf Highslide umstellen
  • Fertig!