NextGEN-Gallery: Videos mit Fancybox einbinden

nextgen-video-album

Im Netz schwirren viele Fragen herum, wie sich Videos in eine NextGEN-Gallery einbinden lassen. NextGEN selbst bietet diese Möglichkeit nicht und ein wirklich zufriedenstellendes “Out-Of-The-Box-Plugin” dafür habe ich nicht gefunden.

DIe gefundenen Antworten sind ziemlich überschaubar. Die meisten empfehlen die Einbindung von shadowbox.js. Diese Box kann neben Bildern auch Videos anzeigen. Allerdings ist dieses Plugin recht betagt und wird anscheinend schon seit über 3 Jahren nicht mehr weiterentwickelt. Vor allem gehört es nicht zum Liederumfang der NextGEN-Gallery und die Einbindung ist nicht ganz unproblematisch. Ich hatte bei meinen Tests einige Probleme damit, so dass ich darauf nicht setzen wollte.

Ich habe deshalb eine Lösung ausgetüftelt, die direkt mit der in der aktuellen NextGEN-Gallery 2.0.66.x integrierten Fancybox und einem eingebetteten Flowplayer funktioniert. Dazu wird lediglich die jquery.fancybox.js minimal ergänzt sowie die passende Flowplayer-Version integriert. Der anschließende Lohn ist eine galerieweite Lösung, die ohne weitere Verrenkungen Bilder und Videos gleichrangig, nebeneinander und gemischt anzeigen kann.

Mit 3 Schritten zur Video-Fancybox

1. Flowplayer downloaden und einbinden

Es werden lediglich 3 Dateien benötigt, diese werden zunächst heruntergeladen:

Die Dateien flowplayer.controls-3.2.16.swf und flowplayer-3.2.18.swf werden in ein separates Verzeichnis im eigenen Webspace gelegt, beispielsweise example.com/flowplayer/. Das  Javascript flowplayer-3.2.13.min.js wird direkt in das Fancybox-Verzeichnis der NextGEN-Gallery gelegt, also nach /wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/lightbox/static/fancybox/flowplayer-3.2.13.min.js. Im Detail ist diese Installationsmethode auf flowplayer.org nachzulesen.

2. Fancybox-Javascripts konfigurieren Anpassen der Javascript-Konfiguration

  • Der Eintrag “photocrati-lightbox#fancybox/jquery.fancybox-1.3.4.pack.js” wird auf “photocrati-lightbox#fancybox/jquery.fancybox-1.3.4.js” geändert.
  • Der Eintrag “photocrati-lightbox#fancybox/flowplayer-3.2.13.min.js” wird hinzugefügt.

3. Fancybox-Javascript ergänzen

Schließlich wird die jquery.fancybox-1.3.4.js um etwas Code ergänzt, der für Videos den Flowplayer lädt. Der Code wird ober- und unterhalb der Zeile 369 ( final_pos = _get_zoom_to(); ) eingefügt:

    
  // ...    
    
  //////////////////////////
  // [VIDEO-Support]
  ///  
  var videowidth = 720; // change it if needed
  var videoheight = 576; // change it if needed
  if (selectedOpts.orig.attr('alt').substr(0, 6) == "Video:") {
    currentOpts.width = videowidth;
    currentOpts.height = videoheight;
  }
   
   
  final_pos = _get_zoom_to();
   
    
  //////////////////////////
  // [VIDEO-Support]
  ///
  if (selectedOpts.orig.attr('alt').substr(0 , 6) == "Video:") {
  // Get Video-URL from alt-attribute
    var videourl = selectedOpts.orig.attr('alt').substr(6).trim();
    // alert(videourl);

    //  Add the Video-Player-Section
    var player = '<a class="player" href="' + videourl + 
      '" style="display:block; width:' + videowidth + 
      'px; height:' + videoheight + 'px"></a>';
    tmp.append(player);
    
    // Embed the Flowplayer
    var flowplayer = '<script>flowplayer("a.player",' + 
                     '"http://example.com/flowplayer/flowplayer-3.2.18.swf",' +  
                     '{ clip:{autoPlay:false, autoBuffering:true }});</script>';
    tmp.append(flowplayer);

    // Remove the Image
    var image = document.getElementById("fancybox-img");
    image.parentElement.removeChild(image);
  }
    
    
  _process_title();
    
  // ...
     

Die Domain example.com muss natürlich angepasst werden, der Rest kann einfach übernommen werden. Der hier verwendete Flowplayer ist zwar nicht der aktuellste, aber er lässt sich komplett im eigenen Webspace ablegen und unterstützt FLV, MP4 und weitere Formate – ausreichend für meine Zwecke. Für den aktuellen HTML5-Flowplayer sieht die EInbindung per Javascript ein wenig anders aus, sollte aber grundsätzlich nach dem gleichen Schema funktionieren.

Videos in die Galerie aufnehmen

Damit lassen sich nun Videos ebenso einfach wie Bilder in die NextGEN-Galerie einbinden. Video in die Galerie aufnehmen

Dazu wird zunächst ein Bild in die Galerie eingefügt, das als Vorschaubild für das Video dient. Die Besonderheit: Der “ALT-Text” bekommt ein vorangestelltes “Video:” sowie die URL des Videos. Daran erkennt das obige Script, dass es sich um ein Video handelt und lädt die Fancybox mit eingebettetem Flowplayer. Jede Galerie-Thumbnailseite kann Bilder, Videos oder beides enthalten – das Javascript der Fancybox sorgt dafür, dass beim Aufklicken entweder der Image-Viewer oder der Flowplayer geöffnet wird.

Feinschliff für die Galerie-Ansicht

Damit Videos auf Galerie-Seiten auch als solche erkennbar sind, wird das Template /wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/ngglegacy/view/gallery.php noch etwas angepasst.

    
  // ...
   
  <?php if ( !$image->hidden ) { ?>
    <img title="<?php echo esc_attr($image->alttext) ?>" 
      alt="<?php echo esc_attr($image->alttext) ?>" 
      src="<?php echo nextgen_esc_url($image->thumbnailURL) ?>" 
      <?php echo $image->size ?> />
    <?php } ?>
  </a>

    <?php $altText = esc_attr($image->alttext);
      if (strrpos($altText, "Video:", -strlen($altText)) !== FALSE) {
    ?>
      <div style="margin-top:-110px; margin-left:20px;
        position:absolute; font-size:100px; color:#FFF;
        opacity:0.80; pointer-events:none;">
      <i class="fa fa-play-circle-o"></i>
      </div>
    <?php
    } ?>

    </div>
  </div>
     
  // ...
   

Damit wird über Thumbnails, die per “ALT-Text” als Video markiert sind, ein Video-Symbol angezeigt. Galerie-Ansicht mit Videos

Das verwendete Zeichen fa-play-circle-o wird dabei aus dem Awesome-Font entnommen, der von NextGEN-Gallery eingebunden wird.

Hinweis: Damit die gallery.php tatsächlich zur Anzeige der Galerie verwendet wird, muß diese in den “Galerie Einstellungen” als Template für “NextGEN Basic Thumbnails” gesetzt sein.

 

Anmerkungen, Verbesserungen und Ergänzungen zu diesem Beitrag sind gern willkommen.

7 Kommentare

  • Leon Kupper

    Hallo

    erst einmal vielen Dank für die tolle Anleitung.
    Ich versuche diese umzusetzen. Ich habe NextGen Plus V2.0.79 installiert und scheitere schon am erstenm Schritt, da es bei mir nicht die Möglichkeit gibt im 2ten Schritt “2. Fancybox-Javascripts konfigurieren” die erweiterten Einstellungen anzuzeigen.

    Hast du eine Idee wie man vorgehen kann?

    Viele Grüße

    • Jann

      Hallo Leon,

      besten Dank für das Lob.
      So aus dem Stand kann ich dir leider nicht helfen, denn mit der aktuellen NextGen-Version 2.0.79 habe ich mich noch nicht befasst. Sicherlich werde ich das in nächster Zeit mal tun und den Beitrag hier bei Bedarf aktualisieren.

      Im Moment bleiben mir nur ein paar Überlegungen dazu, vielleicht helfen die ja schon ein wenig weiter. Kann man denn die “Fancybox” überhaupt noch als Image-Box auswählen? Falls ja, sollte es an irgendeiner Stelle auch eine Konfigurationsmöglichkeit für 1.) das zu verwendende CSS-Stylesheet und 2.) die dafür einzubindenden Javascripts geben. Vielleicht wurde diese Konfiguration woanders hinverlegt? Ich kann mir kaum vorstellen, dass diese Möglichkeit komplett aus der Oberfläche entfernt wurden.

      Falls aber doch nichts dazu zu finden ist, bleibt noch die Möglichkeit, nach einer entsprechenden Konfigurationsdatei im “photocrati-lightbox”- oder “fancybox”-Verzeichnis zu schauen. Vielleicht sind diese Pfade in einer Konfiguration hinterlegt und können dort angepasst werden?

      Wie auch immer — an irgendeiner Stelle müssen die Javascript-Dateien hinterlegt sein, die von der Fancybox verwendet werde, denn in genau diesen Dateien steckt die eigentliche Funktionalität.

      Falls du der Sache auf die Spur kommst, würde ich mich über einen Hinweis hier freuen. Ansonsten musst du dich einfach gedulden, bis ich mal Zeit und Muse dafür finde oder anderweitigen Rat einholen.

      Ich drück die Daumen!

      • Leon Kupper

        Hallo Jann,

        also ich konnte eine Konfigurationsdatei finden in:
        wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/lightbox/module.lightbox.php

        Dort kann man die selben Anpassungen machen.

        So nun zum nächsten Problem:
        Ich finde die Datei: jquery.fancybox-1.3.4.js nicht….
        Sie ist auch nicht im Verzeichnis: /wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/lightbox/static/fancybox/

        wie die anderen js scripte. Wo sollte diese denn sein?

        • Leon Kupper

          Habe mich vertippt, es ist die Datei: package.module.lightbox.php und nicht module.lightbox.php

        • Jann

          Hallo Leon,

          also, ich habe mir soeben mal das aktuelle NextGEN-Plugin 2.0.79 von wordpress.org heruntergeladen (das auch ganz oben in diesem Beitrag verlinkt ist). In diesem Archiv befindet sich auch das erforderliche Fancybox-Javascript, genauer Pfad: ‘/photocrati_nextgen/modules/lightbox/static/fancybox/jquery.fancybox-1.3.4.js’.

          Vielleicht liegt ja auch ein Mißverständnis vor: der Beitrag hier bezieht sich direkt auf das WordPress-Plugin “NextGEN Gallery”. Mit der kostenpflichtigen “NextGEN Plus”-Software habe ich mich nicht befasst. Ich habe keine Ahnung, ob die zur WordPress-Integration geeignet ist und was daran anders ist als an dem WordPress-Plugin.

  • thanks towards this countless edifying website, living up the massive jobless check out this online casino offers

  • preference your website, thanks and victual the honesty a possessions job check the latest online casino bonus offers

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *