Zap_ImgPop (WordPress plugin)

Rubrik:  Wordpress-Zutaten  ·  Autor:  Zappelfillip25. Oktober 2005, 11:10 Uhr

Read this in english!

Deutsch

Ich habe mein erstes richtiges WordPress-Plugin geschrieben. Man kennt es schon länger: Auf Zappelfillip.de öffnen sich Links zu Bildern, seien es MoBlog-Bilder oder solche in „normalen“ Beiträgen, in einem Popup-Fenster direkt im Blog. Hat den Vorteil, dass sich weder ein neues Browserfenster öffnet, was mich persönlich sehr nervt, noch das Blog verschwindet, weil nur das Bild geladen wird. Vielmehr öffnet sich das Bild dank JavaScript/DOM direkt in der Seite, schwebend über dem Inhalt. Man beachte in diesem Zusammenhang auch den transparenten Schattenwurf des Bildes (welcher im Internet-Explorer natürlich nicht funktioniert ๐Ÿ˜‰ ) auf das Blog. Das Bild ist mit Mausklick und Gedrückhalten auf der Titelleiste verschiebbar, ein Button rechts oben schließt das Bild wieder.

Browser, die kein JavaScript kennen oder in denen es deaktiviert ist, öffnen das Bild ganz normal direkt im Fenster.

Installation

  1. Datei zap_imgpop11.zip entpacken (WinZip).
  2. Verzeichnis zap_imgpop mit allen darin enthaltenen Dateien in das Plugin-Verzeichnis der WordPress-Installation kopieren, z. B. http://www.domain.de/wp-content/plugins/zap_imgpop/
  3. Plugin im Admin-Bereich der WordPress-Installation aktivieren.
  4. That’s all!

Verwendung

Das Plugin Zap_ImgPop erkennt alle Links auf Bilder in Beiträgen der Art

<a href=“*Bildadresse*„>*Linktext oder -bild*</a>

und wandelt sie in beschriebener Weise um. Soll ein Bildlink vom Plugin nicht umgewandelt werden, einfach ein Leerzeichen zwischen href und = einfügen:

<a href =“*Bildadresse*„>*Linktext oder -bild*</a>

Um in der Titelleiste eine Beschreibung einzufügen, kann im Bildlink ein title-Attribut eingefügt werden, welches die Beschreibung enthält:

<a href=“*Bildadresse*“ title=“*Beschreibungstext*„>*Linktext oder -bild*</a>

In der Datei zap_imgpop.css kann zentral das Aussehen der Anzeige angepasst werden.

Demo (115 kB)

K&aumlferchen

<a href="http://www.zappelfillip.de/wordpress/postimage/bug.jpg" title="Ein kleiner Waldk&auml;fer"><img src="http://www.zappelfillip.de/wordpress/postimage/_bug.jpg" alt="bug" /></a>

Download

Version 1.1

Spenden

Falls Dir dieses Plugin gefällt, freue ich mich über eine kleine Spende zur Unterstützung von Zappelfillip.de
Spenden kannst du ganz einfach und sicher über PayPal. Einfach folgenden Button anklicken und den Anweisungen folgen. Danke! ๐Ÿ˜€




Ältere Versionen

(Gegebenenfalls ReadMe.txt in den ZIP-Dateien beachten)

Version 1.0
Version 0.6
Version 0.5
Version 0.4
Version 0.3
Version 0.2
Version 0.1

Changelog

  • Version 1.1
    • Nur eine kleine Änderung am Code, da der Internet Explorer JavaScriptfehler meldete.
  • Version 1.0
    • Verbesserte Linkerkennung. Es können nun beliebige zusätzliche Attribute im Link verwendet werden, z. B. style=““, class=““, id=““ etc.
  • Version 0.6
    • Verbesserte Kompatibilität mit WordPress-Themes (jene die den Footer-Hook nicht aufrufen)
    • Automatische Bildanpassung an aktuelle Browsergröße kann deaktiviert werden bzw. eigene Werte für maximale Breite und Höhe der Bilder kann festgelegt werden.
  • Version 0.5
    • Bilder, die größer als das aktuelle Browserfenster sind, werden in der Größe automatisch herunterskaliert, damit sie vollständig darstellbar sind. Mit einem Klick auf das Bild kann es dann in voller Größe angezeigt werden (für Details). Erneuter Klick und es wird wieder auf Browsergröße angepasst.
    • vereinfachte Installation. Es muss kein Pluginverzeichnis im Code mehr angegeben werden. Nur noch Verzeichnis auf den Server kopieren und Plugin im Admin-Panel aktivieren. That’s all.
  • Version 0.4
    • Die Popup-Bilder werden nun horizontal und vertikal zentriert auf dem aktuellen Bildschirm angezeigt.
    • Bilder werden vor der Anzeige komplett im Hintergrund geladen.
  • Version 0.3
    • Dem Bild kann eine Beschreibung oder Titel geben, welche/r in der Titelleiste des Popups angezeigt wird.
    • Installation wurde vereinfacht, so dass nun nur noch an einer Stelle das Plugin-Verzeichnis der WordPress-Installation angegeben werden muss.
    • Das Plugin wird nicht mehr aktiv, wenn es sich um einen Feed (RSS oder Atom) handelt, so dass dieser wieder validiert.
    • kleine optische Veränderung
  • Version 0.2
    • Kompletter optischer Umbau, sodass das Plugin auch im Opera funktioniert.

FAQ

F: Kann ich die automatische Verkleinerung deaktivieren?
A:
Ja. Einfach in der Datei zap_imgpop.js in Zeile 13 den Wert auf false setzen (resize = false;).

F: Kann ich statt der Verkleinerung auf die Größe des Browserfensters auch selbst einen Wert festlegen, auf den verkleinert werden kann?
A:
Ja. Einfach in der Datei zap_imgpop.js in den Zeilen 16 und 17 jeweils einen Wert größer 0 für Breite und Höhe angeben, auf den verkleinert werden soll. Bilder, die kleiner als diese Werte sind, werden natürlich nicht vergrößert. Die Werte 0 bedeuten Verkleinerung abhängig von der Größe des Browserfensters.

English

No, zap doesn‘t mean „to zap“. In fact Zap is a short name for my nickname Zappelfillip! ๐Ÿ˜‰

This plugin converts links to images so that they are shown floating over the blog content (not in an new window). Images will be shrinked to actual browser size. Dragging is possible. Images can get a title (or description) which will be displayed in the popup title bar. It uses JavaScript. Browsers without oder deactivated JavaScript show images in normal manner.
View demo below.

Installation

  1. unpack zap_imgpop11.zip (WinZip)
  2. copy directory zap_imgpop with all including files into the plugin directory of your wordpress installation, e.g. http://www.domain.com/wp-content/plugins/zap_imgpop/
  3. activate plugin Zap_ImgPop in the admin panel of your wordpress Installation

Usage

Zap_ImgPop detects and changes all links to images like

<a href=“*linked image adress*„>

If a link to an image shall not be changed insert a blank between href and =:

<a href =“*linked image adress*„>

To insert a title into the drag bar of the popup use the title tag:

<a href=“*linked image adress*“ title=“*Here is the title of the image*„>

Edit zap_imgpop.css to change the look of the popup.

Demo (115 kB)

bug

<a href="http://www.zappelfillip.de/wordpress/postimage/bug.jpg" title="A small bug"><img src="http://www.zappelfillip.de/wordpress/postimage/_bug.jpg" alt="bug" /></a>

Download

version 1.1

Donate

Do you love this plugin? I would be happy if you support zappelfillip.de with a small donation via Paypal. Thanks a lot! ๐Ÿ˜€




Previous versions

(Read ReadMe.txt in ZIP file)

version 1.0
version 0.6
version 0.5
version 0.4
version 0.3
version 0.2
version 0.1

Changelog

  • version 1.1
    • A small change of JavaScript code because Internet Explorer reports an error.
  • version 1.0
    • Improved link detection. Now you can use any additional attributes like style=““, class=““ or id=““ inside link tag instead of only href and title.
  • version 0.6
    • Improved theme compatibility (with themes which doesn‘t call the footer hook).
    • Now you can deactivate automatical image resizing or specify values for maximum width and height yourself.
  • version 0.5
    • Images with a resolution higher than actual browser window will be shrinked to browser size. So they can be viewed completely. A click on the resized image enlarges to full size. One more click to shrink again.
    • Easiest installation: only copy to plugin directory and activate
  • version 0.4
    • Images are now horizontally and vertically centered on the actual screen.
    • The pop up image will be loaded in the background before shown.
  • version 0.3
    • New feature implemented: Now every image can get a title which is schown in the title bar of the popup.
    • Easier installation process
    • Plugin is no longer active when reading the newsfeeds so feeds are valide.
  • version 0.2
    • Zap_ImgPop v0.1 doesn‘t work in Opera browser. Now here are some changes so it works with Internet Explorer, Firefox and Opera.
  • FAQ

    F: How can I disable image resizing?
    A:
    Open file zap_imgpop.js and change line 13 to false (resize = false;).

    F: I don‘t want image resizing depending on actual browser size. How can I specify maximum width and height for resizing myself?
    A:
    Open file zap_imgpop.js and insert in lines 16 and 17 values for maximum width or height to which images shall be shrinked. Use 0 for resizing images depending on actual browser size.

Diesen Artikel bookmarken:

Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • Digg
  • del.icio.us
  • Technorati
  • Furl
  • StumbleUpon
  • Reddit
  • Webnews
  • MisterWong
  • Y!GG
  • Spurl
  • Bloglines
  • Google Bookmarks

186 Kommentare
  1. Kommentar:
    Fatal error: Call to undefined function comment_subscription_status() in /www/htdocs/w00c005e/zappelfillip_de/wordpress/wp-content/themes/zappelfillip/comments.php on line 53