JAlbum und Highslide in WP

Hallo Leser,

da du hier angekommen bist, interessiert dich sicherlich, wie ich JAlbum und WordPress für Highslide-Galerien kombiniert habe. Genau das will ich hier möglichst genau wiedergeben:

Basisinstallation:

  1. JAlbum installieren
  2. Boxer-Theme installieren

Album erzeugen

  1. Datei -> neues Album-Projekt
  2. Album-Namen eintragen und auf OK klicken
  3. Bei Skin ‘Boxer’ wählen
  4. Bei Style ’5 Bright White’ wählen
  5. Einstellungen anklicken
  6. Bilder -> Dia -> 1024×1024 auswählen
  7. Navigation -> Links nur zu skalierten Bildern erstellen
  8. Boxer -> General -> ‘Show album title bar’ Häkchen entfernen und Text löschen
  9. Boxer -> General -> ‘Show folder name and comment in title bar’ Häkchen entfernen
  10. Boxer -> General -> ‘Name’ leeren.
  11. Boxer -> Highslide JS -> Outline type ‘drop-shadow’ auswählen
  12. Boxer -> File and Folder -> ‘New Icon’ entfernen
  13. Boxer -> EXIF -> ‘Show EXIF information’ anhaken. Was kann man selbst entscheiden. Ich lasse ‘Meter Mode’ und ‘Sensor Type’ weg.
  14. Boxer -> Advertising -> ‘Skyscraper ad’ leeren
  15. Schließen klicken
  16. Bilder hinzufügen
  17. Strg+S Projekt speichern
  18. Album erstellen

Nachbearbeitung

  1. Die index.html mit vi oder einem Editor deiner Wahl öffnen und mit folgenden Pattern (reguläre Ausdrück) ersetzen:
    :%s/\([('"]\)res\//\1\/wp-content\/highslide\//g
    :%s/\([('"]\)thumbs\//\1\/wp-content\/alben\/50mm\/thumbs\//g
    :%s/\([('"]\)slides\//\1\/wp-content\/alben\/50mm\/slides\//g
    :%s/\r//g
    Dabei gehe ich davon aus, dass der Inhalt des Albums in den Ordener <Document-Root>/wp-content/alben/50mm kopiert wird. Sonst muss man das Pattern anpassen.
  2. Jetzt kopiert man thumbs und slides in den genannten Ordner auf dem Webserver.
  3. Innerhalb der index.html sollte man nun die Stelle finden, die hier beginnt:
    <!– Iterate through images and produce an index table –>
  4. Von dort markiert man alles bis zu
    </TABLE></CENTER>
    oberhalb von
    <div id=”controlbar” class=”highslide-overlay controlbar”>
  5. Dann kopiert man diesen Text in ein leeres vi-Dokument und erzeugt daraus eine Zeile indem man 1000J tippt.
  6. Das kopiert man nun als HTML-Code ins Blog. Der letzte Schritt ist nötig, da WP trotz HTML-Formular Zeilenumbrüche einfügt.

Einmalige Anpassung des Themes

Damit WordPress auch alles richtig macht müssen einmalig folgende Schritte gemacht werden:

  1. Den Inhalt aus dem Ordner res in den Ordner <Document-Root>/wp-content/highslide kopieren.
  2. Aus dem Theme die Header-Datei editieren und vor dem </head>-Tag die Zeilen aus der index.html einfügen, die mit <script language=”javascript” type=”text/javascript” src=”/wp-content/highslide/highslide.js”> beginnen und vor dem CSS-Block mit </script> enden.
  3. Aus dem Theme die CSS-Datei editieren und die in der index.html folgenden Styles unterhalb einfügen.
  4. Am Ende der index.html befindet sich dieser Block:
  5. <div id=”controlbar” class=”highslide-overlay controlbar”>
    … (4 Zeilen)
    </div>
    Der muss in den Footer, direkt oberhalb des </body>-Tags