WordPress ThickBox Plugin

Ich habe einen Plugin für WordPress erstellt, der ThickBox in deine Webseite einbindet. Einfach installieren und aktivieren, ThickBox konformes Markup einfügen wo immer du willst und das war’s. Des Weiteren kann SmoothBox anstelle von ThickBox verwendet werden.

Du kannst den Plugin hier herunterladen.

Anleitung

Sobald der Plugin aktiviert wurde, wird er das CSS und JavaScript für ThickBox auf jeder Seite deines Blogs einbinden. Somit kannst du ThickBox konformes Markup einfügen wo du willst und es sollte wie erwartet funktionieren.

Schau dir diese Beispiele an, wenn du wissen möchtest, wie genau du den Code in deine Seite einzufügen hast. Für die Bilder auf dieser Seite habe ich das folgende Markup genutzt:

<a href="[...]/images/flower.jpg" title="Blume" class="thickbox">
  <img src="[...]/images/thumbs/flower.jpg" alt="Blume" />
</a>

Du musst lediglich ein img-Element in einem a-Element verpacken, wobei ersteres das kleinere und letzteres das größere Bild referenziert. Somit erhältst du eine schöne Bildergalerie.

Konfiguration

Der Plugin enthält eine Seite mit Einstellungsmöglichkeiten, die dir dabei helfen soll, das Verhalten des Plugins an deine Anforderungen anzupassen. Obwohl die meisten Optionen selbsterklärend sein sollten, findet sich neben jeder Einstellung ein Hilfe-Link mit weiteren Informationen.

Hilfe

Falls der coole Effekt nicht erscheinen sollte, gibt es ein paar Dinge, die du überprüfen kannst:

  1. Ist das Markup korrekt? Schau dir diese Beispiele an, um Code zu schreiben, den ThickBox versteht.
  2. Du hast ThickBox verwendet, bist auf SmoothBox umgestiegen und nun funktioniert es nicht mehr? Vergiss nicht das class-Attribut auf smoothbox anstelle von thickbox zu setzen. In dieser Hinsicht sind die Bibliotheken nicht kompatibel zu einander.
  3. Wird das CSS und JavaScript in deine Seite eingebunden? Solltest du den Expertenmodus aktiviert haben, vergiss nicht ein benutzerdefiniertes Feld namens thickbox zu der Seite hinzuzufügen, auf der du ThickBox nutzen möchtest. Zu guter letzt solltest du sicherstellen, dass dein Theme die Funktionen wp_head sowie wp_footer in den Dateien header.php und footer.php aufruft.

Du benötigst mehr Hilfe? Schreib einen Kommentar.

Spezielle Anwendungsfälle

Hier sammele ich ein paar spezielle Themen bezüglich ThickBox.

Ändern von ‘close or Esc key’

Der Plugin enthält die Standard- (englisch) und eine deutsche Übersetzung von ThickBox und SmoothBox. Möchtest du den Text close or Esc key ändern oder ThickBox anderweitig internationalisieren, geht das wie folgt:

  1. lade die unkomprimierte Version von ThickBox hier herunter.
  2. suche und ersetze Texte, bis alles deinen Anforderungen entspricht. Zum Beispiel kannst du close or Esc key in den Zeilen 128, 196 und 204 ändern.
  3. optional: komprimiere das JavaScript mit einem Tool.
  4. kopiere die neue JavaScript-Datei über die vorhandene des Plugins unter wp-content/plugins/thickbox/thickbox/thickbox.js.

Sobald du damit fertig bist, ist ThickBox auf deine Anforderungen angepasst. Anstatt einfach die vorhandene Datei zu ersetzen, kannst du mehr über Varianten in der entsprechenden Hilfe-Box auf der Einstellungsseite des Plugins lesen; tatsächlich kannst du mehr als nur eine Fassung von ThickBox mit dem Plugin verwalten.

Öffne ThickBox onload anstelle von onclick

Solltest du ThickBox mit Hilfe eines onload anstelle des üblichen onclick laden wollen, geht das so:

  • füge den folgenden JavaScript-Schnipsel in den HTML Header deiner Seite ein, d.h. irgendwo innerhalb des head-Elements:
    <script>
    function showThickbox() {
      $(document).ready(function() {
        tb_show("Seite", "eine_seite.html?height=200&width=400", "");
      });
    }
    </script>

    Passe Seite, eine_seite sowei die folgenden Parameter an.

  • platziere ein onload="showThickbox()" beispielsweise in dem body-Element. Somit wird ThickBox immer angezeigt wenn die Seite geladen wird.

Das war’s. Nun nutze PHP, um dies konfigurierbar zu machen.

Ein funktionierendes Beispiel kannst du hier herunterladen; schau dir zunächst die Datei test.html an.

Beispiele

Eine einfache Galerie mit Bilder kann so aussehen:

MumsFlowerLadybugPlant

Ein iFrame ist ebenfalls einfach.

Message from Certkiller Download braindump with latest free WP themes to pass 642-892 exam and become expert with our HP0-D07 web designing training course.

225 Kommentare ↓

Hinterlasse einen Kommentar

Hint: consider reading the FAQ before submitting a question.