WordPress: Nextgen-Flash-Slideshow in den Header eines Blogs einbauen

Mit Hilfe des Nextgen-Gallery-Plugins für WordPress und des JW-image-rotator Flash-Applets lassen sich sehr schnell recht hübsche Flash-Slideshows von Bildergallerien realisieren. Allerdings steht man zunächst ratlos da, wenn es darum geht diese Slideshow in andere Bereiche als im Text eines Artikels oder Seite einzubinden, wie zum Beispiel im Headerbereich eines Blogs. Denn dort wird weder das slideshow-Tag noch das Gallery-Widget von Nextgen funktionieren.

Doch Hilfe einer kleinen Portion PHP-Code ist dies auch dieses leicht zu realisieren. Einfach den folgenden Code-Abschnitt in die Datei header.php des aktiven WordPress-Themes einfügen und fertig. (Zu finden im Administrationsmenu von WordPress unter Design –> Editor)

<?php
if (function_exists("nggSlideshowWidget"))
nggSlideshowWidget("galleryID","Width","Height");
?><br />

Damit das Ganze dann auch in der jeweiligen konkreten Situation passt, muss man nur noch die Werte „galleryID„, „Width“ und „Height“ in Anführungszeichen durch passende eigene Werte ersetzen ! Die entsprechende GalleryID bekommt man in der Übersicht „Gallerie verwalten“ von Nextgen.

Update 02-04-2010

Ein kleiner Blick in den Nextgen Quellcode zeigte mir auch das man als GalleryID den Wert „0“ verwenden kann. In diesem Fall rotiert die Flash-Gallery über alle darstellbaren Bilder aller Gallerien.

 

Links

http://nextgen-gallery.com/2007/05/24/new-widget-support

Kommentar schreiben

27 Kommentare.

  1. Hey,

    wirklich klasse erklärt, lief soweit ohne Probleme.

    Ein Problem habe ich aber doch. Wenn ich in den Einstellungen von NextGen unter Slideshow den Pfad zu imagerotator.swf setzen will wird der Pfad nicht erkannt. ich hab schon alles mögliche versucht, aber ich bekomme immer nur die Meldung das der Pfad fehlt.

    Bilder werden mir dadurch natürlich nicht angezeigt.

    Weißt du Rat? Schon mal Danke.

    Gruß Ron

  2. Hallo,

    ich hab die neue Version wp 3.3.1 und eine Flashanwendung im header. leider finde ich hier die passende stelle im header.php nicht wie oben beschrieben. Könnte mir da jemand helfen?

    <html xmlns="http://www.w3.org/1999/xhtml&quot; >
    <meta http-equiv="Content-Type" content="; charset=“ />
    <link rel="stylesheet" href="“ type=“text/css“ media=“screen“ />


    <?php if(WP_VERSION
    <link rel="alternate" type="application/rss+xml" title="“ href=““ />
    <link rel="alternate" type="application/atom+xml" title="“ href=““ />
    <link rel="pingback" href="“ />
    <script type="text/javascript" src="/script.js“>

    <body >
    theme_get_option(‚theme_menu_source‘),
    ‚depth‘ => theme_get_option(‚theme_menu_depth‘),
    ‚menu‘ => ‚primary-menu‘,
    ‚class‘ => ‚art-hmenu‘
    )
    );
    ?>
    <script type="text/javascript" src="swfobject.js“>

    jQuery((function (swf) {
    return function () {
    swf.switchOffAutoHideShow();
    swf.registerObject(„art-flash-object“, „9.0.0“, „expressInstall.swf“);
    }
    })(swfobject));
    <param name="movie" value="images/flash.swf“ />

    <object type="application/x-shockwave-flash" data="images/flash.swf“ width=“1000″ height=“250″>
    <!–


    <!–
    < class=“art-logo-name“><a href="/“></>
    < class=“art-logo-text“></>

    • Hallo Touri,
      ein geeigneter Bereich wäre irgendwo hinter dem „„-Tag in der genannten PHP-Datei.

      Aber Aufpassen das die Start bzw. End-Tags für PHP-Code richtig benutzt werden, ggf. kann man die auch weglassen wenn man das Code-Snippet aus dem Beispiel an existierenden Code anhängt.

      PS: Zu deinem geposteten Beispiel-Code .. so wie ich das sehe, wird unterhalb des Lade-Tag des Files „swfobject.js“ bereits ein anderes größes Flash-Objekt geladen ?

  3. Hallo,

    dich versuche grad mithilfe deines kleinen Tutorials hier die Slideshow einzubauen.
    Leider wird bei mir kein Bild angezeigt, immer nur so ein „Ladebild“, sag ich mal. Woran kann das denn liegen?

    • Hallo Tina,
      ohne weitere Anhaltspunkte, lässt sich leider schwer sagen, wo das Problem genau liegt, vermutlich aber eher ein Problem mit einer Pfadangabe.
      Kann man denn das betreffende Blog mit der Header-Slideshow irgendwo anschauen ?

      Grüße Stefan

  4. Hi – I am really happy to find this. Good job!

  5. Gute Nacht, schöne Webseite,Mochte es sehr!
    Mein Deutsch ist ziemlich schlecht sorry, Bis zum nächsten Mal!

  6. Bin wirklich total begeistert. Lässt sich wirklich einfach einbauen und sieht klasse aus!
    Vielen Dank für die Info!

  7. Hallo,

    ich habe es mal so gemacht wie oben beschrieben. Nun hat aber der Internetexplorer 8 ein Problem damit. Es sind nur 2 Bilder zu sliden. 1. Durchgang funktioniert und ab dem 2. setzt er in die linke obere Ecke des Headers dieses rote X als wenn er also ein Bild nicht findet. Dann läuft die Sequenz ohne Bilder und danach zeigt er sie wieder um sie danach wieder nicht zu zeigen usw…. 😉

    Hat wer eine Idee? Hat sich vielleicht was geändert WP 3.0 oder in NextGen?

    Danke.

    • Hallo cyriakus,
      ohne mehr Infos über dein Websiteprojekt kann man schlecht sagen, woran es liegt.
      An WP 3.0x oder an den aktuellsten Nextgen liegt es jedenfalls nicht. Ich betreue 1-2 Sites die einen Flash-Header haben und die laufen mit den aktuellsten Versionen von WP und Nextgen.

      Grüße Stefan

  8. Krass dass sowas wirklich klappt 🙂

  9. Hallo!

    Ich würde sehr gerne dieses Plugin benutzen. Ich betreibe eine private Community für einen Bikepark. Bisher habe ich immer eine Art Fotocollage als Header gehabt (siehe http://www.bikepark-blog.de) Ich möchte das nun aber gerne ändern und eben die ganzen Bilder in einer Slideshow im Header ablaufen lassen.
    Das Theme ist mit Artisteer selbst gemacht und ich habe versucht genau so wie oben beschrieben das alles in der Header Datei etc. einzubinden. Leider passiert dann aber überhaupt gar nichts wenn ich die Webseite aktualisiere 🙁
    Das einzige was passiert ist, dass die normale Headergrafik weiter nach unten gesetzt wird.
    Kannst du mir evtl. bitte einen Tip geben, wie ich das richtig einbinden muss damit es funktioniert? Das wäre wirklich sehr nett!
    Danke schon mal im Voraus!
    Grüße
    Michaela

    • Hallo Michaela,
      sorry das ich erst jetzt zum Antworten komme.
      Habe mir mal dein Blog angeschaut wie es scheint hast du es ja doch noch hinbekommen,
      aktuell scheint es ja ohne Problem zu gehen ?

      Grüße Stefan

  10. Hallo,

    schöne Beschreibung, aber ist es auch möglich, die Slideshow als background:url() einzusetzen?

    etwa? Bei mir klappts nicht und sonst dürft ich erst wieder anfangen schwer zu coden…

    Grüße =)

    • Hi Pascal,
      falls du das css-attribut background-image: url() meinst, da fürchte ich das funktioniert so nicht, das akzeptiert nur eine einzelne Bilddatei und kein Flash-Objekt.

      Eine Idee wäre es mittels Javascript ein DIV mit dem gewünschten Headercontent direkt über das Flashobjekt mit der Galerie zu platzieren.

  11. Hallo

    Habe mir auch eine SlideShow in den Header meines Twenty Ten Themes gebastelt. Ich habe ihn sogar auf 940 x 228 bekommen damit der ganze Header ausgefüllt ist.

    Jetzt habe ich volgende Probleme:
    Erstens: Habe mehrere Domains bei Strato und alle sollen auf die eine Seite verlinken http://www.jerryjay.com nur dann wird leider der flash header nicht angezeit wie hier http://www.djjerryjay.de.
    Zweitens: Auf dem Windows Explorer 8 wird der Flash Header auch nicht angezeigt. Firefox und Safari laufen soweit.

    Hatte auch das Problem das die Slideshow nach recht versetzt neben dem Header lag habe einfach ein bisschen ausprobiert mit hilfe von Firebug und dann einfach in der Style.css den #“site-title“ von width: 700px auf 0px gestellt dann war die Slideshow drin.

    Wäre über Hilfe sehr dankbar

    Viele Grüße
    Jerry

    • Hallo Jerry,
      nur anhand dem Quellcode deiner Site lässt sich schwer sagen, was bei dem Verlinkungsproblem in deinem Header schief läuft. Eventuell solltest du mal den entsprechenden Auszug aus deiner header.php posten.

      Zu dem IE8 Problem kann ich nur sagen, das du ja die Flash-Gallery „nachträglich“ via JQuery reinlädst, ich weiss nicht ob das so ein günstiger Ansatz an der Stelle ist in Bezug auf die Browser-Kompatibiltät. Aber interessant finde ich den Ansatz trotzdem 😛

      <script type="text/javascript" defer="defer">
      jQuery("#ngg-slideshow-2-14-1").nggSlideshow( {id: 2,fx:"fade",width:940,height:228,domain: "http://www.jerryjay.com/",timeout:10000});
      </script>
      

      Grüße Stefan

  12. Wie posted man Code-Zeilen?

    Leider wurden diese nicht publiziert wie Deine?

    🙂 Dirk

    • Ja da müsste ich auch mal ein paar kleine Hinweise irgendwo einbauen.
      Codezeilen werden durch das Highlighting-Plugin bearbeitet/angezeigt, in dem man den Code in einer Art Tags mit [ statt < einschliesst. Der Tagname gibt den Typ vom Code an, also php oder css oder shell oder auch einfach nur plain. Beispiel: [ php ] hier kommt der php-code rein [ /php ]

  13. Habs gelöst, wäre eigentlich nicht so schwer wenn man CSS im Griff hätte.

    Header:

    PHP Code der Gallery resp. Deine Code Zeile 2

    und diesen Schnipsel im Stylesheet:

    #slideshow {
    	border-top: 4px solid #000;
    	border-bottom: 1px solid #000;
    	clear: both;
    	display: block;
    }
    

    LG 😉 Dirk

  14. Warst wohl gerade auf der Seite als ich verschiedenes ausprobiert habe…

    Momentan habe ich es mit ein wenig PHP temporär gelöst

    <img src="header_banner_.jpg" .....
    

    Du hast recht, wenn Du sagt das Problem eher im Stylesheet (da habe ich noch nicht drin rumgefummelt) zu suchen ist, denn das Banner ist wie folgt formatiert:

    /* This is the custom header image */
    #branding img {
    	border-top: 4px solid #000;
    	border-bottom: 1px solid #000;
    	clear: both;
    	display: block;
    }
    

    Ich denke, da der Code wie von Dir beschrieben ja keinen img Tag mehr hat, es auch nicht funktionieren kann… oder liege ich da falsch?

    • Vollkommen richtig .. da hat wohl eine Style-Definition gefehlt, die das Flash genauso formatiert wie Grafiken. Hmm darauf sollte ich vielleicht auch im Artikel hinweisen, das vermeidet eine unnötige lange Fehlersuche. Wobei das aber auch von Theme zu Theme verschieden ist, welche Schritte konkret notwendig sind.

  15. Ciao Stefan,
    zuerst mal danke für Deine Antwort!

    Schien einfach, aber irgendwie funktioniert es nicht richtig!

    Die Slideshow wird zwar dargestellt, aber oben rechts und überlagert die Site Description ist.

    Ich denke ich muss mich wohl ein wenig vertrauter mit PHP machen.

    Gruss Dirk

    • Das mit dem customizen ist manchmal komplizierter als eine Sache komplett neu zu bauen, da man sich durch den Code fremder Leute wurschteln muss.

      Aber in deinem Fall denke ich liegt das Problem, woanders als bei PHP, eher beim CSS-Stylesheet würde ich sagen. Wenn das hier deine Entwicklungssite ist für das Projekt. Da fällt mir spontan auf das das eigentliche Headerbild gar nicht angezeigt wird ??

      Es müsste bei Twenty Ten eigentlich unterhalb des Titels und oberhalb der Navigation zu sehen sein. Hattest du Änderungen an der style.css vorgenommen ?

  16. Sorry für die Frage, aber wo genau im header.php soll ich nun folgendes einfügen!

    1

    Ich benutze W3.01 mit dem Twenty Ten 1.1 Theme und bin ein absoluter Anfänger, der krampfhaft probiert http://www.1x1indien.org, die Webseite unserer privaten karitativen Organisation unter http://www.deiopea.ch/1×1 etwas auf zu beppen!

    Danke für Deinen Tip!

    Ich wünsche noch einen schönen Sonntag!

    MfG,
    Dirk Krienbühl

    • Hallo Dirk,
      das ist natürlich immer so ein Problem mit der exakten Stelle wo der Code eingefügt werden muss, denn das kann man immer nur individuell für das jeweilige Theme sagen. Aber bei dem Twenty Ten Standart Theme ist das noch recht einfach !

      Unter Design –> Editor musst du beim Twenty Ten Theme in der header.php nach Zeile 76 bis 78 suchen. Die sollte im Original so ausschauen ..

       else : ?>
       <img src="<?php header_image(); ?/>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
      < ?php endif; ?>
      

      dort musst du im Prinzip nur das img-Tag durch den PHP-Code der Gallery ersetzen, in etwa so ..

       else :
          if (function_exists("nggSlideshowWidget")) nggSlideshowWidget("galleryID", HEADER_IMAGE_HEIGHT, HEADER_IMAGE_WIDTH);
       endif; ?>
      

      und wie immer nicht vergessen. Der String galleryID muss durch die entsprechende ID-Nummer deiner NextGen-Gallery ersetzt werden.

      Grüße Stefan

  17. Sweet site, I hadn’t come across http://www.rootz.de earlier in my searches!
    Keep up the fantastic work!

Kommentar schreiben


Hinweis - Du kannst dies benutzenHTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>