Next-Gen Gallery – Eigene Galerietemplates für verschiedene Galerien

Es kann hin und wieder vorkommen, dass man mit Hilfe des NextGen Gallery-Plugins verschiedene Galerien wie Fancybox oder Lightbox einbinden möchte. Dies kann durchaus schwierig werden, da das Plugin die Galerieeinstellungen standardmäßig Global auf die gesamte WordPress-Seite anwendet. Durch einige kleinere Konfigurationen kann man dies aber anpassen.

Im ersten Schritt müsst ihr euch ein sogenanntes Galerie-Template anlegen, welches im Plugin-Ordner von Next-Gen unter wp-content\plugins\nextgen-gallery\view abgespeichert wird, beispielsweise als gallery-fancy.php.

Mithilfe dieses Templates ist es euch dann möglich, nähere Konfigurationen für die Einbindung des Quellcodes vorzunehmen, der für die Galerie verwendet werden soll.

<?php
    /**

    @description Fancy template for Fancybox WordPress plugin
    Template Page for the gallery overview
    **/
    ?>
    <?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?>
    <?php if (!empty ($gallery)) : ?>
    <?php foreach ($images as $image) : ?>
<a  class="group"  rel="a"  href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?>>
<img src="<?php echo $image->thumbnailURL ?>" alt="<?php echo $image->alttext ?>" title="<?php echo $image->description ?>" />
</a>
    <?php endforeach; ?>
    <?php endif; ?>

Im nächsten Step müsst ihr euch entscheiden, wie ihr die notwendigen Scripte in den Head-Bereich einbindet. Ich habe mich für verschiedene Page-Templates und eine entsprechende Abfrage entschieden. Den Beispielcode dazu seht ihr hier:

<?php
global $wp_query;
$template_name = get_post_meta( $wp_query->post->ID, '_wp_page_template', true );
if ($template_name == 'template-galerie.php')
       {
?>
	       <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/galleriffic-1.css" type="text/css" />
	       <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.3.2.js"></script>
	       <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.galleriffic.js"></script>
	       <script type="text/javascript">
		     $('div.navigation').css({'width' : '300px', 'float' : 'left'});
		     $('div.content').css('display', 'block');
		     $(document).ready(function() {
		     $('#thumbs').galleriffic({
		            imageContainerSel:      '#slideshow',
			    controlsContainerSel:   '#controls'
					     });
			       });
	       </script>
<?php
       }
else
       {
  ?>
	      <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/jquery.fancybox.css" media="screen" />
	      <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.3.2.min.js"></script>
	      <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.easing.1.3.js"></script>
	      <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.fancybox-1.2.1.pack.js"></script>
	      <script type="text/javascript">
		 $(document).ready(function() { $("a#single_image").fancybox(); $("a#inline").fancybox({
		 'hideOnContentClick': true }); $("a.group").fancybox({  'frameWidth': 510, 'frameHeight': 310, 'overlayShow': true }); });
	      </script>
<?php
       }
?>

Nun runden wir diese Code-Suppe noch ab, in dem wir in die jeweilige Template-Datei den Shortcode einbinden, der wie folgt aussieht:

<?php echo do_shortcode('[nggallery id=1 template=fancy]    '); ?>

Der im Shortcode angegebene Templatename entspricht dem zweiten Teil des Dateinamens der NextGen-Template-Datei.

WordPress NextGen Gallery dynamisch einbinden lassen

Für ein aktuelles Projekt war es notwendig, eine NextGen Galerie auf jeder Seite einblenden zu lassen, doch handelte es sich um verschiedene Galerien die auf verschiedenen Seiten eingeblendet werden sollten. Wenn Ihr euch die Erstellung von zahlreichen Templates in einem solchen Fall ersparen wollt, empfehle ich euch den folgenden Code einzubinden:

<?php
  if ( get_field('galerie-id') > 0 ){
  $galleryid = get_field('galerie-id');
  $mygalleryid = '[nggallery id='.$galleryid.']';
  echo do_shortcode($mygalleryid);
}
?>

Die Felder get_field wurden mit Hilfe des Plugins Advanced Custom Fields angelegt und so erzeugt, dass für jede Seite nun nur noch eine Galerie-ID angegeben werden musste. Dies ermöglicht es euch für jede Seite eine Galerie einzubinden und dem User die Entscheidung zu überlassen, welche Galerie eingebunden werden soll.

JQuery: Bild bei Mouseover in Galerie hervorheben

Bei Mouseover wird das aktuell gewählte Bild hervorgehoben.

In dem Beispiel befinden sich die Bilder in einem Container mit der Klasse “gallery“.

    $('.gallery img').mouseover(function(){
        $('.gallery img').not(this).stop(true).animate({
            opacity : '0.4'
        });
    });
    $('.gallery img').mouseout(function(){
        $('.gallery img').stop(true).animate({
            opacity : '1'
        });
    });