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.

219 Kommentare ↓

« Ältere Kommentare
  • Orlando sagt:
    März 28, 2011 um 5:51
    I cant get your plugin to work with Vimeo Simple gallery, can you please help me?
  • jdyck sagt:
    April 5, 2011 um 12:58
    Can you upgrade your plugin to use the latest jQuery? Thanks.
  • Christian Schenk sagt:
    April 5, 2011 um 9:43
    Hi jdyck,
    unfortunately this may be not that easy because ThickBox isn’t developed any further and may not work with the most recent version of jQuery. Nevertheless, I’ll try this and will include an updated jQuery if it’s working without any issues.
    In the meantime you can go to the settings page of the plugin and configure it to use the jQuery that comes with WordPress – this way you’ll have a more recent version.
  • Martin sagt:
    April 28, 2011 um 8:44
    Still not working at my blog. Can you help me?
  • Rachel sagt:
    Mai 5, 2011 um 6:59
    Hello,
    I was having a conflict with Thickbox and a slideshow plugin, and I unticked the jquery checkbox in Thickbox. That made the slideshow plugin work, but Thickbox broke. Then I reverted back (disabled the slideshow plugin, re-ticked the jquery checkbox) and Thickbox is still broken. I can’t figure out why.
    http://www.cobblehill.org – if you click the newsletter button at the top, the sign-up form used to pop up as a thickbox.
  • Rachel sagt:
    Mai 5, 2011 um 7:02
    oops, nevermind, i got it– accidentally deleted the wp footer thing
  • Christian Schenk sagt:
    Mai 5, 2011 um 11:17
    Glad to hear that you got it working eventually.
  • Sanford sagt:
    Mai 8, 2011 um 10:51
    Christian – thanks for the Thickbox tool – but I am unclear as to why i can not get the content to appear in the Thickbox on my site.

    If you go to my site, you can see the sandwich board in the middle of the page. When I click on the board, the thickbox shows but the content does not. Any idea why?

  • WordPress ?? Lightbox ???? « leocao sagt:
    Juni 3, 2011 um 4:52
    [...] ThickBox????? [...]
  • Sarah sagt:
    Juni 13, 2011 um 10:13
    I am trying to get this to show captions and not the image name – is that possible? This is the site in question:

    http://theteacupparlour.com/the-collection/

    Thanks!

    Sarah

  • Christian Schenk sagt:
    Juni 13, 2011 um 10:19
    Hi Sarah,
    simply provide the desired caption in the title field of the images. You can either edit them via the Media Library in the WordPress backend or directly when uploading the images to your site.
  • Sarah sagt:
    Juni 14, 2011 um 11:35
    Hi there, the caption is in there in the caption field, I just don’t want to have to copy them all over again.
  • Christian Schenk sagt:
    Juni 15, 2011 um 12:34
    Hi Sarah,
    since you’re using the gallery shortcode that comes with WordPress you can either adapt the output of the gallery so ThickBox picks up the correct information or write a small tool that copies the relevant values in the database into the correct locations. Either way it might take some effort getting this just right.
  • Chris L sagt:
    Juli 13, 2011 um 11:15
    Am so close….

    I’ve got the plug-in working on my site after using the expert mode…as it disabled the gallery feature when used normally.

    However it now disables the main menu on the thickbox enabled pages.

    Any suggestions as to how I can enable the plug-in without disabling the menu?

    i was originally using the wp-fancyzoom plug in. This works well but makes a double pop-up on my gallery pages. :-(

    Have tried deleting the link URL from the gallery images using fancyzoom… but the damn links can’t be deleted.

  • Callum sagt:
    August 8, 2011 um 1:25
    Hi,

    On the website that I provided with this feedback, the thickbox isn’t displaying the images due to the js script calls being called twice, how do I change this to get it to work properly. Its under Portfolio -> Club Flyers, then on the source html page its at the bottom (or nearish)

    Cheers

    Callum

  • Christian Schenk sagt:
    August 8, 2011 um 11:07
    Hi Callum,
    please either try the expert mode or the option that advices the plugin to use the JavaScript that comes with WordPress from the options menu which is part of the plugin.
  • Robert sagt:
    August 10, 2011 um 5:18
    Hej Christian,

    ich möchte gerne Text und Bild zusammen mittels Thickbox darstellen. Der Text soll unter das Bild und mit Absätzen (also in Sinnabschnitte unterteilt) dargestellt werden.

    Wie lässt sich das bewerkstelligen? Irgend eine Idee? Ich habe schon alles mögliche ausprobiert, die Thickbox soll das ja von Haus aus können. Ich weiss nur nicht wie… :(

    Wenn du Tipps hast, ich wäre dir unendlich dankbar! :)

  • Christian Schenk sagt:
    August 10, 2011 um 8:46
    Hi Robert,
    das geht am besten mit dem sogenannten Inline content, den Du auf hidden setzen kannst; Infos dazu gibt es hier. Wenn Du unter Einstellungen – ThickBox die Optionen des Plugins aufrufst, solltest Du die Hilfe Links sehen: diese sind genau mit dieser Funktion gemacht – vielleicht kannst Du es dir dort ja abschauen.
  • Jayo Santaigo sagt:
    Oktober 4, 2011 um 2:39
    Hello there!

    The thickbox is working in my blog. But it caused a bit of a problem in the margin of my paragraphs.

    So what I did is edit the css but now, my footer is not adjust to the very bottom of the page.

    I hope you get what I mean. I need help in this one

  • Jayo Santiago sagt:
    Oktober 4, 2011 um 2:49
    Hi Christian,

    I was able to solve the problem. I’m all good for now!

  • Md sagt:
    Januar 14, 2012 um 6:03
    I have the same problem as Jayo but unfortunately he didn’t give a solution. When I activate ThickBox, it messes up the margins for paragraphs, media, etc.
  • Christian Schenk sagt:
    Januar 14, 2012 um 6:13
    Dear Md,
    this is most likely an issue regarding the specific theme you use. Try checking how the CSS selectors for these various margins are implemented and adjust them as needed.
  • Adrian Richter sagt:
    April 2, 2012 um 12:37
    Hi Christian,
    ich rufe auf meiner Website eine ThickBox mit Text, Audioplayer und Facebook-Button per Inline Content auf, das ganze funktioniert auch wunderbar, allerdings kann ich die Box zurzeit nur per Klick auf unformatierten Text aufrufen. Gibt es eine Möglichkeit, einen formatierten Text oder gar ein Bild/eine Grafik per Klick auf eine ThickBox zu linken?
    LG
  • Christian Schenk sagt:
    April 4, 2012 um 11:46
    Hi Adrian,
    grundsätzlich kannst Du die ThickBox auf beliebige Elemente – sprich Text, Bilder, Grafiken, etc. – aufrufen, so lange das a Element eine Klasse namens thickbox enthält. Vielleicht hilft dir weiter, dass man mehrere Klassen einfach durch Leerzeichen getrennt angegeben kann, also etwa folgendes, sollte es bspw. eine Klasse align-center geben:

    <a href="..." class="thickbox align-center">
  <!-- Beliebiges Element, etwa Text, Bild, etc. -->
</a>

    Möglicherweise musst Du diese Anpassungen direkt am HTML vornehmen und dazu nicht den Standard-Editor von WordPress nutzen; erreichbar über das Tab “HTML” direkt rechts oben über dem Editor.

  • Pantoeflou sagt:
    April 10, 2012 um 6:57
    Awesome!!!

    Spent a view days looking for something giving this functionality without braking my theme functions

    Very nice, thanks!

  • Sebastian Schwarz sagt:
    Mai 8, 2012 um 5:56
    Hallo Christian!
    Ich möchte ein YouTube-Video in der Größe 960×720 Pixel durch ein Bild verlinken. Am besdten per iFrame – Wie mache ich das?

    …Ergänzung, das Video soll natürlich dann im iFrame laufen, wenn man das verlinkte Bild anklickt.

    LG Basti

  • Christian Schenk sagt:
    Mai 8, 2012 um 11:43
    Hallo Sebastian,
    schau dir am besten die Beispiele an. Dort findest Du Hinweise zum Einbinden von iFrames und wie genau der HTML Code dazu aussehen muss. Zusammengefasst solltest Du ein img-Element mit dem gewünschten Bild mit einem a-Element einfassen, das zum einen die Klasse “thickbox” enthält und zum anderen auf das iFrame verlinkt.

Hinterlasse einen Kommentar

Hint: consider reading the FAQ before submitting a question.