Zoomimage & jQuery: Schönes kann so einfach sein.

Zoomimage ist ein Plugin für jQuery mit dem verlinkte Bilder vergrößert werden können.
Die Einbindung ist denkbar einfach und auf der Zoomimage Homepage auch ausreichend beschrieben.

Um Zoomimage vollständig in WordPress einzubinden habe ich mein Post Functions Plugin erweitert.

1

[zoomimage:src=screenshots/lueckentext-mit-hilfe.png, w=400, zw=800, float=right, alt=Lückentext zu den unregelmäßigen Verben]

Obiger Code resultiert in einem 400px breiten Bild, das bei Klick auf 800px verbreitert wird. Zusätzlich wird unter dem Bild der alt-Text angezeigt.

Die Resultate können dann in absehbarer Zeit auf compulearnenglisch.de/information besichtigt werden.

Neue “Post Functions”: jslink, fold, printfile

Es gibt nun 3 neue Funktionen: jslink, printfile, fold.
jslink und fold benötigen jQuery

Funktion jslink

jslink ermöglicht es JavaScript Links im Text zu platzieren. Außerdem ist jslink mit Link Indication kompatibel. (Siehe dazu JavaScript Links und Link Indication).
<, >, ‘ und ” werden automatisch als HTML-Entity dargestellt.

Beispiel
[jslink:klick mich]alert(‘:)’)[/jslink]
Resultat: klick mich

Funktion fold

Mit fold können Textpassagen ausklappbar dargestellt werden.

Beispiel
[fold:ausklappen]mein Text[/fold]
Resultat: ausklappenmein Text

Funktion printfile

printfile gibt eine komplette Datei direkt im Post aus. Am besten sollte diese Funktion mit WP-CodeBox verwendet werden.

Argument displaypath
printfile akzeptiert das Argument pisplaypath. Wird dieses angegeben gibt printfile den Pfad zur Datei vor der Datei aus.

Beispiel
[printfile:index.php|displaypath=1]
Resultat (mit WP-CodeBox):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Contents of 'index.php'
<?php
/**
 * Front to the WordPress application. This file doesn't do anything, but loads
 * wp-blog-header.php which does and tells WordPress to load the theme.
 *
 * @package WordPress
 */
 
/**
 * Tells WordPress to load the WordPress theme and output it.
 *
 * @var bool
 */
define('WP_USE_THEMES', true);
 
/** Loads the WordPress Environment and Template */
require('./wp-blog-header.php');
?>

JavaScript Links und Link Indication

Link Indication ist ein Plugin für WordPress, das alle externen Links durch Symbole kennzeichnet. Leider ist das Plugin inkompatibel mit JavaScript Links.

1

<a href="javascript:" onclick="doSomeStuff()">...</a>

Links solcher Art enden in einem Desaster.

Beispiel: Link Indication “zerstört” JavaScript Link

Original

1

<a onclick="$('h2').slideToggle('slow');" href="javascript:">Alle Überschriften ausblenden</a>

Nach Link Indication

1

<a class="liinternal" );="" slow="" ).slidetoggle(="" h2="" onclick="$(" href="javascript:">Alle Überschriften ausblenden</a>

href=”…” scheint das Problem zu sein

Link Indication hat offenbar Probleme mit Links, deren href-Attribut keine gültige URL enthält.

Eine Möglichkeit wäre das href=”javascript:” komplett wegzulassen. Dies hat aber den Nachteil, dass der Link nun nicht mehr als solcher vom Browser interpretiert wird: Es wird keine Hand mehr bei darüberfahren angezeigt:

“Kaputter” Link: klick

“Reparatur” mit CSS

Man kann die Links aber mit CSS “reparieren”

1

a.js { cursor:pointer; }

1

<a class="js" onclick="doSomeStuff()">...</a>

“Reparierter” Link: klick

jQuery

jQuery ist eine JavaScript Bibliothek, die viele Animationen und Ajax Funktionalität bereitstellt. Besonders praktisch sind die vielfältigen Selektoren, die es erlauben Gruppen von Elemente mit einem einzigen Aufruf zu verändern. Neu ist der jQuery API Browser.

Auch interessant ist das jQuery UI (User Interface), welches viele aufwändige Animationen bereitstellt.

jQuery Bespiele:
Alle Überschriften ausblenden
Alle Posts grau einfärben
Links abwechselnd rot und grün einfärben
Diesen Link transparent machen

Kontaktadresse verstecken

Es gibt inzwischen viele Personensuchmaschinen im Internet, die automatisch nach Kontaktadressen und Emailadressen suchen. Wenn man allerdings ein Impressum anlegen möchte, das nicht automatisch ausgelesen werden kann, bieten sich einige Möglichkeiten:

• Kontaktdaten als Bild
• Kontaktdaten per Javascript anzeigen

Das Bild hat als Nachteil, dass man die Adresse nicht kopieren kann. Also muss JavaScript die Lösung sein. Es macht keinen Sinn die Adresse lesbar im Source Code abzulegen, da dieser auch automatisiert ausgelesen werden kann. Man sollte den Text daher irgendwie “verschlüsseln”. Ich verwende dazu base64, weil es dafür in JavaScript schon einige Implementierungen gibt.

Beispiel anzeigen

1
2
3
4

<h3>Kontakt</h3>
<span>
<a onclick="var s='[hier base64 kodierte Daten einfügen]'; this.parentNode.innerHTML=Base64.decode(s);" class="js">anzeigen</a>
</span>