Animierte Image-Caption mit jQuery unter WordPress
Google liebt es ja, wenn unter oder neben Bildern noch ein beschreibender Text steht. Deswegen hat WordPress vor einiger Zeit die Image-Caption eingeführt. Diese kann man - wenn man kein Freund von Bildunterschriften ist - mit jQuery jedoch so manipulieren, dass sie nur bei einem MouseOver erscheint. Wie das geht, erkläre ich in diesem Tutorial.
Wie gehabt als erstes der HTML-Teil:
HTML
<div class="wp-caption" style="width: ???px">
<img src="/path/to/img.jpg" alt="Dies ist eine Beschreibung" title="Dies ist eine Beschreibung" width="???" height="???" class="size-full wp-image-3402" />
<p class="wp-caption-text">Dies ist eine Beschreibung</p>
</div>
Dies ist der Caption-Quelltext, der von WordPress ausgegeben wird. Anstatt der Fragezeichen kommen natürlich die richtigen Höhen- und Breitenangaben, ebenso wie der richtige Pfad zum Bild.
Als nächstes ein bißchen CSS für das entsprechende Aussehen:
CSS
.wp-caption {
position: relative;
margin-bottom: 20px;
border: 3px solid #999;
overflow: hidden;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.wp-caption-text {
padding: 5px 10px;
background-color: #333;
color: #EEE;
border-top: 1px solid #666;
}
Wichtig hierbei ist die Angabe "position: relative", da wir beim Verschieben des Bildes mit einem negativen margin arbeiten und der IE6 ohne diesen Zusatz rumzickt. Des weiteren ist die Angabe "overflow: hidden" wichtig, da der Caption-Text sonst nicht verschwinden würde.
Alle anderen Angaben zu Farben, Innen- und Außenabständen können ohne weiteres angepasst werden.
Zum Schluss den nötigen JavaScript- bzw. jQuery-Teil, ohne den hier gar nichts läuft:
HTML
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
Im Kopf-Bereich binden wir die jQuery-Library ein.
JavaScript
jQuery(document).ready(function($) {
$('div.wp-caption').each(function(i) {
var img_ = $('img', this);
var img_height = img_.attr('height');
var p_height = $('p', this).outerHeight();
$(this).height(img_height);
$(this).hover(function() {
img_.animate({marginTop : -p_height}, 500);
}, function() {
img_.animate({marginTop : '0'}, 500);
});
});
});
Mit der each()-Funktion wird jede einzelne Image-Caption auf der Seite angesprochen. Danach wird die Höhe des dazugehörigen Bildes und der Beschreibung gespeichert. Als nächstes wird die Höhe des Caption-div gleich der Höhe des Bildes gesetzt, so dass die Beschreibung abgeschnitten und nicht sichtbar ist.
Daraufhin wird eine hover()-Funktion aufgemacht. Fährt man mit dem Cursor über eine Image-Caption, bekommt das dazugehörige Bild einen negativen margin-top, der der Höhe der Beschreibung entspricht, so dass diese in den sichtbaren Bereich fährt. Verlässt man die Image-Caption wieder mit dem Cursor, wird der margin-top des Bildes wieder auf Null gesetzt. Das ganze wird mit der animate()-Funktion von jQuery animiert.
Das war es auch schon, fertig ist die animierte Image-Caption unter WordPress. Wobei natürlich nichts dagegen spricht, das ganze außerhalb von WordPress einzusetzen. Wie immer verweise ich an die Kommentar-Funktion, falls es Fragen gibt oder etwas nicht so funktioniert, wie es soll.
