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.
Schwarzweiß-Foto mit jQuery in Farb-Foto verwandeln, wenn man mit dem Cursor drüberfährt
Wie euch vielleicht aufgefallen ist, habe ich in die Sidebar eine kurze Autoren-Info gepackt, damit die Leute wissen, wer hier schreibt. Und wer von euch mal mit dem Cursor über das Foto drüber gefahren ist, wird gemerkt haben, dass sich das Schwarzweiß-Foto dabei in ein Farb-Foto verwandelt. Das ist sicher kein Basis-Feature, aber eine nette jQuery-Spielerei. Und wie das geht, verrate ich jetzt.
Als erstes brauchen wir den entsprechenden HTML-Code:
HTML
<div id="image">
<img src="image_bw.jpg" alt="Scharzweiß-Bild" />
</div>
Ein normales, von einem div-Element umschlossenes Bild. Im img-Element ist das Schwarzweiß-Foto eingebunden.
Als nächstes etwas CSS:
CSS
#image {
width: …;
height: …;
background: url('image_color.jpg') 0 0 no-repeat;
}
Die Breite und Höhe des div-Elements entsprechen der Breite und Höhe eures Bildes. Als Hintergrund-Bild ist das Farb-Foto eingebunden. Es befindet sich also die ganze Zeit hinter dem Schwarzweiß-Foto und wird von diesem verdeckt.
Nun zum jQuery-Teil:
JavaScript
$(document).ready(function() {
$('#image img').hover(function() {
$(this).stop().fadeTo('slow', 0);
}, function() {
$(this).stop().fadeTo('slow', 1);
});
});
Fährt man mit dem Cursor über das Schwarzweiß-Foto, wird dieses ausgeblendet und offenbart das Farb-Foto. Geht man mit dem Cursor vom Foto runter, wird das Schwarzweiß-Foto wieder eingeblendet. Das ganze mit der Geschwindigkeitsangabe slow, damit es auch schön geschmeidig vonstatten geht.
Das war es auch schon. Bei Fragen oder Anregungen sei wie immer auf die Kommentar-Funktion verwiesen.
PS: Eine Demo des ganzen gibt es auf der Blog-Startseite!
Der "perfekte" WordPress-Suchschlitz
Heute zeige ich, wie man mit etwas JavaScript und PHP einen benutzerfreundlichen Suchschlitz in WordPress baut. Das "perfekt" steht deshalb in Anführungszeichen, weil ich mir nicht anmaßen möchte, den wirklich perfekten Suchschlitz zu präsentieren. Möglicherweise würde es "advanced" eher treffen, aber wie klingt das denn bitte?!
Also los: Wir wollen einen Suchschlitz, in dem "Suchen…" steht, was wiederum verschwinden soll, wenn der Nutzer auf das Eingabefeld klickt und wieder erscheinen soll, wenn der Nutzer außerhalb des Eingabefeldes klickt. Des weiteren soll auf der Suchergebnis-Seite im Suchschlitz der Suchbegriff stehen, welcher ebenfalls verschwinden und erscheinen soll, je nachdem, wohin der Nutzer klickt.
Das klingt extrem kompliziert, ich weiß, aber bei Verständnisproblemen einfach die Demo anschauen. Ansonsten lege ich mal los. Und zwar brauchen wir folgenden HTML-Teil in der WordPress-Theme-Datei "searchform.php":
HTML/PHP
<form method="get" id="search" action="<?php bloginfo('url'); ?>/">
<fieldset>
<input type="text" value="<?php echo $search_text; ?>" id="s" name="s" />
<div>
<input type="submit" name="submit" value="Absenden" />
</div>
</fieldset>
</form>
Falls ihr in eurem WordPress-Theme keine "searchform.php" habt, legt sie einfach an, ihr könnt sie mit folgendem Code-Schnippel in eure Templates einbinden:
PHP
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
Ansonsten handelt es sich um ein simples Formular mit einem Eingabefeld und einem Submit-Button, welchen ich in ein div-Element eingebettet habe. Warum, könnt ihr in meinem Beitrag zum "Barrierefreien Button mit Text Replacement" nachlesen.
Als nächstes kommt der JavaScript-Teil, der dafür sorgt, dass das Eingabefeld beim Draufklicken geleert wird und zusätzlich dem Submit-Button die Klasse submit_active anhängt, wodurch der Farbwechsel im Schein um den Suchschlitz realisiert wird.
JavaScript
window.onload = function() {
var input = document.getElementById('s');
var value = document.getElementById('s').value;
var submit = document.getElementsByName('submit')[0];
mFocus = function() {
if ( this.value == value ) {
this.value = '';
}
submit.className = 'submit_active';
}
mBlur = function() {
if ( this.value == '' ) {
this.value = value;
}
submit.className = '';
}
with ( input ) {
onfocus = mFocus;
onblur = mBlur;
}
}
Als erstes werden die Selektoren für das Eingabefeld, für dessen Value und den Submit-Button in Variablen gespeichert. Danach die Funktionen definiert, die den Value wechseln und die Klasse submit_active anhängen bzw. entfernen. Zum Schluss werden diese den Events onfocus und onblur zugewiesen.
Als nächstes brauchen wir ein wenig PHP, um auf der Suchergebnis-Seite den spezifischen Suchbegriff im Suchschlitz erscheinen zu lassen:
PHP
<?php
if (!is_search()) {
$search_text = "Suche…";
} else {
$search_text = "$s";
}
?>
Über if (!is_search()) fragen wir ab, ob es sich nicht um die Suchergebnis-Seite handelt (man beachte das Ausrufezeichen, welches die Bedingung negiert). Ist dem so, speichert die Variable $search_text den Wert "Suche…". Andernfalls, wenn der Besucher sich auf der Suchergebnis-Seite befindet, speichert die Variable den spezifischen Suchbegriff. Wenn wir nochmal hoch zum HTML-Teil gucken, können wir sehen, dass die Beschriftung des Suchschlitzeingabefeldes mit genau dieser Variable $search_text realisiert wird, indem das Attribut value den Wert <?php echo $search_text; ?> bekommt.
Zum Schluss muss der ganze Spaß nur noch gestylet werden:
CSS
#search {
width: 301px;
height: 52px;
clear: left;
}
#s,
#search div input,
#search div input.submit_active {
background-image: url('images/sprite.jpg');
background-repeat: no-repeat;
}
#s {
width: 231px;
height: 22px;
padding: 17px 12px 13px 17px;
float: left;
border: none;
line-height: 22px;
font-size: 16px;
color: #666;
background-position: 0 0;
}
#search div {
width: 41px;
height: 52px;
float: left;
overflow: hidden;
}
#search div input {
width: 41px;
padding-top: 52px;
border: none;
background-position: -260px 0;
cursor: pointer;
}
#s:focus {
background-position: 0 -52px;
color: #369;
}
#search div input.submit_active {
background-position: -260px -52px;
}
#search div input:hover {
background-position: -301px -0;
}
#search div input.submit_active:hover {
background-position: -301px -52px;
}
Ich denke, die Style-Angaben sind relativ selbsterklärend. Die Input-Elemente werden formatiert und die jeweiligen Zustände mit der entsprechenden Hintergrundgrafik versehen, wobei ich hier auf ein sog. CSS-Sprite zurückgreife, wodurch sich die Grafik-Datei nicht ändert, sondern nur deren Position. Außerdem nutze ich immer ein sog. CSS-Reset, wodurch u.a. das Element fieldset direkt am Anfang die Style-Angabe border: 0 zugewiesen bekommt, weshalb das hier im CSS-Teil nicht auftaucht. Bedenkt das, wenn ihr die Sachen hier direkt aus dem Beitrag rauskopiert. Im Zweifelsfalle geht ihr auf Nummer sicher, wenn ihr die Beispiel-Dateien runterladet.
Außerdem dürften der IE6 und der IE7 Probleme mit der Darstellung haben, da sie nicht mit den Pseudo-Klassen :hover und :focus um können, bzw. erstere nur bei Links anwenden können. Um diesen Makel zu beheben, guckt nochmal in meinen Beitrag zum Thema Internet Explorer 6.
Ansonsten ist der "perfekte" Suchschlitz fertig. Ich habe noch die .psd-Datei für das CSS-Sprite in den Download-Ordner gepackt, damit ihr die Farben bei Bedarf anpassen könnt. Alternativ könnt ihr natürlich auch ein ganz eigenes Design machen.
In diesem Sinne viel Spaß damit und bei Fragen immer ran an die Kommentar-Funktion.
Nachtrag:
Ich habe im JavaScript-Teil zwei Ergänzungen bei der mFocus- und der mBlur-Funktion vorgenommen. Bevor der Inhalt des Eingabefeldes automatisch gelöscht oder mit dem Wert "Suche…" aufgefüllt wird, findet eine Abfrage statt. So wird verhindert, dass das vom Nutzer eingegebene Suchwort nach dem Klicken außerhalb des Eingabefeldes verschwindet.
Navigation mit JavaScript
Dieses mal geht es um eine Navigation, bei der zu jedem Item eine kurze Info erscheint, wenn man mit dem Cursor rüberfährt. Dies wird regelmäßig von Usability-Experten empfohlen und kann durchaus Sinn machen. Meine Lösung baut wie gewohnt auf HTML und CSS, sowie JavaScript für den Hover-Effekt.
Beginnen wir mit dem HTML-Teil:
HTML
<ul id="nav">
<li>
<a href="index.html">Home</a>
<span>Back to frontpage</span>
</li>
<li>
<a href="#">About</a>
<span>Learn more about this site</span>
</li>
<li>
<a href="#">Contact</a>
<span>Send me an email</span>
</li>
</ul>
Eine einfache, ungeordnete Liste, bei der zusätzlich zum Link die jeweilige Info in einem <span>-Elements steht.
Als nächstes der CSS-Teil:
CSS
#nav {
width: 456px;
height: 100px;
list-style: none;
clear: left;
}
li {
width: 130px;
height: 80px;
padding: 20px 10px 0 10px;
float: left;
border-left: 2px solid #FFF;
cursor: pointer;
}
li span {
display: none;
}
.active {
background: url('images/li_bg.jpg') 0 0 no-repeat;
}
.active span {
display: block;
line-height: 15px;
color: #EEE;
}
a {
display: block;
margin-bottom: 5px;
font: bold 24px Helvetica, Arial;
color: #FFF;
line-height: 30px;
}
Die Liste weist vom Styling her keine Abnormalitäten auf, außer, dass durch die Angabe cursor: pointer; über dem ganzen li-Element der für Links typische Cursor in Form einer Hand auftaucht. Warum das so ist, wird im JavaScript-Teil ersichtlich. Ansonsten ist das <span>-Element unsichtbar, es sei denn das li-Element hat die Klasse "active".
Nun zum JavaScript-Teil:
JavaScript
window.onload = function() {
var lis = document.getElementById('nav').getElementsByTagName('li');
mOver = function() {
this.className = 'active';
}
mOut = function() {
this.className = '';
}
mClick = function() {
location.href = this.getElementsByTagName('a')[0].href;
}
for ( i=0; i<lis.length; i++ ) {
with ( lis[i] ) {
onmouseover = mOver;
onmouseout = mOut;
onclick = mClick;
}
}
}
Innerhalb einer window.onload-Funktion definieren wir als erstes den Selektor für die li-Elemente der ungeordneten Liste. Danach werden die Funktionen für die Maus-Events aufgestellt. Fährt man mit der Maus über ein li-Elemente, wird diesem die Klasse "active" angehängt. Geht man mit dem Cursor wieder vom li-Element runter, wird die Klasse wieder entfernt. Klickt man auf ein li-Element, wird man zu dem im jeweiligen Link spezifizierten URL weitergeleitet.
Dadurch erklärt sich auch die Angabe cursor: pointer; für li-Elemente im Stylesheet. Der klickbare Bereich wird einfach vergrößert, was dem Besucher der Seite die Nutzung der Navigation erleichtert.
Nachdem die Funktionen für die Maus-Events aufgestellt sind, werden sie in einer for-Schleife zugewiesen. Fertig ist die Navigation mit eingeblendeter Info. Wie immer könnt ihr euch die nötigen Dateien runterladen. Viel Spaß!
Animierte Navigation mit jQuery
Dies ist eine Reiter-Navigation, bei der der aktive Reiter am Inhaltsbereich andockt und die inaktiven Reiter darüber schweben. Sozusagen ein Wink mit dem Zaunpfahl für den User. Damit die Benutzung noch ein bißchen geschmeidiger ist, docken die inaktiven Reiter am Inhaltsbereich an, wenn man mit dem Cursor über sie fährt. Für den Effekt nutze ich das JavaScript-Framework jQuery.
Als erstes wie gewohnt der HTML-Teil:
HTML
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
Eine schlichte, ungeordnete Liste. Wichtig ist jedoch, dass der aktive Reiter die Klasse active bekommt.
Als nächstes der CSS-Teil:
CSS
ul {
width: 800px;
height: 51px;
padding: 0 0 0 10px;
clear: left;
list-style: none;
background: url('pixel.gif') left bottom repeat-x;
}
li {
width: auto;
_width: 97px;
height: 40px;
float: left;
display: inline;
margin-right: 10px;
text-align: center;
}
a {
display: block;
width: auto;
height: 38px;
padding: 0 10px;
margin-bottom: 0;
line-height: 38px;
border: 1px solid #333;
text-decoration: none;
}
a:link,
a:visited {
color: #333;
background-color: #EEE;
}
a:hover {
color: #333;
background-color: #FFF;
}
a:active {
color: #666;
background-color: #FFF;
}
.active a:link,
.active a:visited {
margin-top: 11px;
border-bottom-color: #FFF;
background-color: #FFF;
}
.active a:hover{
color: #666;
}
.active a:active {
color: #999;
}
Da der Internet Explorer Höhen- und Breitenangaben flexibel handhabt, können wir das a-Element nicht einfach mit dem entsprechenden margin-Wert über das ul-Element hinaus schieben. Deshalb habe ich den unteren Rand des ul-Elements nicht mit einer CSS-border, sondern mit einer ein Pixel großen Grafik realisiert.
Des weiter befindet sich beim Teil für das li-Element die Angabe "_width: 97px". Das ist für den IE6, da dieser das li-Element bei der Angabe "width: auto" über die komplette Breite des Inhaltsbereich zieht.
Als nächstes kommen wir zum JavaScript-Teil:
JavaScript
if ( navigator.appName != 'Microsoft Internet Explorer' ) {
$(document).ready(function() {
$('li').filter('[class=]').hover(function() {
$('a', this).animate({ marginTop: '11px', color: '#CFF' }, 200).animate({ borderBottom: '1px solid #FFF' }, 1);
}, function() {
$('a', this).animate({ borderBottom: '1px solid #333' }, 1).animate({ marginTop: '0', color: '#EEE' }, 200);
});
});
}
Direkt am Anfang kommt eine Abfrage, ob es sich beim Browser des Nutzers um den Internet Explorer handelt. Dieser spuckt beim vorliegenden JavaScript-Code einen Script Error aus, was meinen Recherchen zufolge an der jQuery-Funktion animate() liegt. Leider konnte ich keine Lösung des Fehlers finden, weshalb die Navigation im Internet Explorer ohne jQuery mit reinem CSS auskommen muss.
Ansonsten ist der jQuery-Code-Schnippel schnell erklärt. Fährt man mit dem Cursor über ein in nichtaktives li-Element, wird das darin liegende a-Element animiert, fährt runter und bekommt einen weißen unteren Rand. Beim Verlassen des li-Elements mit dem Cursor, wiederholt sich das Spiel in umgekehrter Reigenfolge.
Zum Schluss bauen wir noch die entsprechenden Style-Angaben ein, um die Navigation für den Internet Explorer und Browser mit deaktiviertem JavaScript fit zu machen:
HTML/CSS
<!--[if IE]>
<style type="text/css">
a:hover {
margin-top: 11px;
border-bottom: 1px solid #FFF;
}
</style>
<![endif]-->
<noscript>
<style type="text/css">
a:hover {
margin-top: 11px;
border-bottom: 1px solid #FFF;
}
</style>
</noscript>
Fertig ist die animierte Navigation mit jQuery. Oben findet ihr den Link zu den Dateien. Bei Fragen oder Anregungen freue ich mich wie immer über einen Kommentar.
Barrierefreier Button mit Text Replacement
Jeder kommt früher oder später beim Bauen einer Website in die Situation, dass er die Beschriftung eines Buttons loswerden möchte, um den Button mit einer schönen Grafik zu versehen. Das Auge surft schließlich mit.
Oftmals sieht man in diesen Fällen, dass das value-Attribut einfach leer gelassen wird. Dies ist allerdings eine wenig elegante Lösung, da Besucher mit Screenreader raten müssen, wofür der Button gedacht ist. Alternativ könnte man auf die Standard-Text-Replacement-Methode über text-indent: -9999px; zurückgreifen. Dies funktioniert auch ganz passabel in mordernen Browsern. IE6 und IE7 schieben dabei allerdings den kompletten Button nach links ins Abseits.
Es muss also eine andere Methode her. Und die sieht so aus, dass man einfach ein div-Element um den Button packt und ihm die gleiche Größe wie dem Button gibt. Dann verschiebt man selbigen noch mittels padding-top ins Abseits und schon ist der Text weg und man kann seine Grafik einbauen. Der Quelltext dafür sieht folgendermaßen aus:
HTML
<div class="button">
<input type="submit" value="Absenden" />
</div>
Dazu kommen noch folgende CSS-Angaben:
CSS
.button {
height: 30px;
width: 80px;
overflow: hidden;
}
input {
width: 80px;
height: 30px;
padding: 30px 0 0 0;
border: 0;
background: #369 url('button.jpg') 0 0 no-repeat;
}
Diese Technik funktioniert einwandfrei im Firefox, in Safari sowie im IE6/7/8.
Natürlich kann man den gleichen Effekt erzielen, indem man einem input-Element das Attribut type="image" gibt und die Grafik direkt im Quelltext einbaut. Allerdings hat man dann nicht die Möglichkeit, für den :hover- und :active-Zustand eine alternative Grafik per CSS zuzuweisen, was der User Experience durchaus zuträglich ist.
PS: Wie ihr input-Elemente im IE6 :hover-fähig macht, erfahrt ihr hier.
Nachtrag:
Thorsten hat mich in den Kommentaren darauf aufmerksam gemacht, dass diese Lösung im Opera-Browser nicht funktioniert, da sich dort die Button-Beschriftung nicht durch padding ins Abseits schieben lässt. Hier müssen wir also mit der üblichen Text Replacement-Methode mittels der CSS-Angabe text-indent: -9999px; ran.
Allerdings hat der Internet Explorer wie oben beschrieben seine Schwierigkeiten mit dieser Lösung und verschiebt den kompletten Button ins Abseits, was sicherlich nicht im Sinne des Erfinders ist. Wir müssen den Internet Explorer also ausschließen, was auf zwei Arten Möglich ist.
1. Über herkömmliche Conditional Tags:
HTML/CSS
<!--[if !IE]>
<style type="text/css">
input {
text-indent: -9999px;
}
</style>
<![endif]-->
Dies ist die Standard-Abfrage, ob es sich beim Browser um einen Internet Explorer handelt oder nicht. Diesen -Schnipsel fügt man in den Kopf-Bereich ein und schon sieht der Button auch im Opera-Browser anständig aus.
2. Ergänzung im type-Attribut:
Ergänzt man das type-Attribut des style-Elements um die mit Apostroph abgegrenzte Angabe charset=utf-8, interpretiert der Internet Explorer die Angabe nicht mehr. Trotzdem ist das Dokument weiterhin valide.
HTML/CSS
<style type="text/css;charset=utf-8">
input {
text-indent: -9999px;
}
</style>
Welche Lösung ihr wählt, sei euch überlassen. Eine Empfehlung, welche besser ist, kann ich nicht abgeben.
Name des Autors zu post_class() in WordPress hinzufügen
Ein Freund kam neulich auf mich zu fragte mich, wie er die Beiträge seines Blogs optisch trennen kann, je nachdem, welcher Autor den Beitrag geschrieben hat. Ich sagte, das sei ganz einfach und nahm — optmistisch, wie ich bin — an, die WordPress-Funktion post_class() würde u.a. auch den Namen des Autors als Klasse ausgeben. Dem ist jedoch nicht so.
Man kann den Namen des Autors aber ganz schnell mit folgendem PHP-Code hinzufügen:
PHP/HTML
<?php $curauth = get_userdata(intval($post->post_author)); ?>
<div <?php post_class($curauth->user_login) ?>>
Nun erscheint der Autorenname in der Klasse des Beitrags-div und man kann die einzelnen Posts ganz bequem per CSS optisch anpassen.
(via the english guy web design)
Bilder mit jQuery einblenden, wenn sie fertig geladen sind
Das hier ist zwar eher im Bereich "Spielerei" anzusiedeln, aber dennoch recht nützlich. Schließlich sieht es einfach eleganter aus, wenn die Bilder eingeblendet werden, wenn sie fertig geladen sind. Außerdem sehen die Besucher nicht den alternativen Text des Bildes, sondern das kleine, sich drehende Rädchen, bei dem heutzutage (fast) jeder weiß, dass gerade etwas in Arbeit ist.
Los geht es mit dem HTML-Teil:
HTML
<div class="wrap">
<h1>Bilder einblenden mit jQuery</h1>
<div class="image_frame">
<a href="http://www.flickr.com/photos/herschel_r/3226358452/">
<img src="http://farm4.static.flickr.com/3474/3226358452_14572d5570.jpg" width="240" height="160" class="image" alt="" />
</a>
</div>
</div>
Der Übersichtlichkeit halber habe ich hier nur ein Bild eingebunden, und nicht sechs, wie in der Demo. Man kann allerdings so viele Bilder einbinden, wie man möchte. Der Aufbau ist ziemlich simpel: Ein <div>-Tag zum Aufspannen des Inhaltsbereiches und jeweils eins pro Bild.
Kommen wir nun zum jQuery-Teil:
Javascript
var loader = "<img src=\"load.gif\" class=\"load\" alt=\"Lädt…\" />";
$(document).ready(function() {
$('.image').hide();
$('.image_frame').append(loader);
$(window).load( function() {
$('.load').hide();
$('.image').fadeIn('slow');
});
});
Als erstes speichern wir das Ladebildchen in der Variable loader. Man könnte das auch direkt in den HTML-Teil setzen, aber da gehört es meiner Meinung nach nicht hin. Danach verstecken wir das eigentliche Bild mit dem Befehl $('.image').hide(); und binden das Ladebildchen mit dem Befehl $('.image_frame').append(loader); ein. Nun kommt die Funktion, die das Ladebildchen verschwinden lässt, sobald das eigentliche Bild fertig geladen ist und dieses behutsam einblendet. Das wars auch schon.
Zum Schluss brauchen wir noch eine Portion CSS, damit das ganze auch so aussieht wie in der Demo:
CSS
.wrap {
width: 556px;
padding: 30px 0 0 30px;
margin: 0 auto;
clear: left;
}
h1 {
margin-bottom: 30px;
}
.image_frame {
position: relative;
width: 246px;
height: 166px;
margin: 0 30px 30px 0;
float: left;
display: inline;
border: 1px solid #EEE;
}
.image_frame img {
padding: 1px;
border: 2px solid #EEE;
}
.image_frame a:hover img {
padding: 1px;
border: 2px solid #CCC;
}
img.load {
position: absolute;
width: 32px;
height: 32px;
top: 67px;
left: 107px;
border: 0;
}
Das ganze kann man ganz nach seinen Bedürfnissen anpassen. Wichtig ist nur, dass die Angabe position: relative bei der Klasse .image_frame stehen bleibt, damit sich das Ladebildchen innerhalb des dazu gehörenden <div>-Tags absolut positionieren lässt. Und falls euch das Ladebildchen nicht so zusagt, findet ihr auf Ajaxload.info Alternativen.
Ansonsten bitte ich wie immer, bei Fragen oder Anregungen die Kommentarfunktion zu nutzen.
Navigation im Googlemail-Style mit jQuery
Wer Googlemail benutzt, kennt sicherlich die Buttons mit dem Grauverlauf und den abgerundeten Ecken, die jedoch ohne eine Grafik auskommen. So etwas kann man relativ schnell selber machen, man muss nur genug HTML-Tags "in den Topf werfen". In diesem Tutorial zeige ich euch, wie ihr das mithilfe von jQuery bewerkstelligen könnt. jQuery deshalb, weil man einfach HTML-Tags hinzufügen kann und der eigentliche Quelltext schön sauber bleibt.
Und wenn wir schon beim Thema sind, fangen wir am besten mit dem Quelltext an. Dieser sieht so aus:
HTML
<ul class="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Contact</a></li>
</ul>
Eine schlanke, ungeordnete Liste, wie es sich gehört. Allerdings brauchen wir nun ein Element, um die abgerundeten Ecken darzustellen, zwei weitere Elemente um den Grauverlauf zu bilden, und nochmal zwei Elemente um die geprägte Schrift auf den Buttons hinzubekommen.
Summa sumarum müssen also 5 Tags hinzugefügt werden, um den grafischen Effekt hinzubekommen. Deshalb auch die Javascript-Lösung, da bspw. Suchmaschinen-Bots oder Menschen an Screen-Readern nichts mit dieser Fülle an HTML-Elementen anfangen können.
Hier nun die benötigten Javascript-Angaben:
Javascript
$(document).ready(function() {
var start = "<span class=\"layer_1\"><span class=\"layer_2\"></span><span class=\"layer_3\"></span><span class=\"layer_4\">";
var middle = "</span><span class=\"layer_5\">";
var end = "</span></span>";
var item = new Array();
$('.navigation li a').each( function() {
item.push(this.innerHTML);
for ( i = 0; i < item.length; i++ ) {
$(this).html(start + item[i] + middle + item[i] + end);
}
});
});
Als erstes werden die benötigten Elemente — in diesem Fall <span>-Tags — in Variablen gespeichert. Danach werden die jeweiligen Beschriftungen der Listen-Elemente in einem Array gespeichert. Zum Schluss wird alles zusammengefügt. Nun fehlen nur noch die entsprechenden Styles, um die Buttons fertig zu machen. Diese gestalten sich wie folgt:
CSS
body {
padding: 100px;
font: normal 12px Helvetica;
font-weight: bold;
background-color: #FFF;
}
.navigation {
height: 20px;
padding: 1px 0;
clear: left;
list-style: none;
}
.navigation li {
position: relative;
width: 82px;
height: 20px;
margin: 0 10px 0 0;
float: left;
display: inline;
}
a, span {
display: block;
text-decoration: none;
}
a:focus {
outline: none;
}
a:link, a:visited {
width: 82px;
height: 20px;
position: relative;
background-color: #DDD;
text-align: center;
line-height: 20px;
color: #333;
z-index: 100;
overflow: visible;
}
a:hover {
background-color: #999;
color: #000;
}
.layer_1 {
width: 80px;
height: 20px;
position: absolute;
top: -1px;
left: 1px;
border: 0;
border: 1px solid #DDD;
border-left: 0;
border-right: 0;
background-color: #F9F9F9;
overflow: hidden;
z-index: 200;
}
a:hover .layer_1 {
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}
.layer_2 {
width: 80px;
height: 2px;
position: absolute;
top: 10px;
left: 0;
background-color: #EEE;
z-index: 300;
}
a:active .layer_2 {
top: 8px;
left: 0;
}
.layer_3 {
width: 80px;
height: 8px;
position: absolute;
top: 12px;
left: 0;
background-color: #E3E3E3;
z-index: 300;
}
a:active .layer_3 {
top: 0;
left: 0;
}
.layer_4 {
width: 80px;
height: 12px;
position: absolute;
top: 5px;
left: 0;
line-height: 12px;
color: #FFF;
text-align: center;
z-index: 400;
}
.layer_5 {
width: 80px;
height: 12px;
position: absolute;
top: 4px;
left: 0;
line-height: 12px;
color: #777;
text-align: center;
z-index: 500;
}
a:hover .layer_5 {
color: #333;
}
Zugegeben, das ist ein ganz schöner Rattenschwanz an CSS-Angaben, aber es lohnt sich. layer_1 ist höher als das <a>-Tag und ragt oben und unten darüber hinaus. Dadurch bekommen wir die abgerundeten Ecken. layer_2 und layer_3 sind leer und erzeugen den Grauverlauf. layer_4 und layer_5 beinhalten die Beschriftung des Buttons und erzeugen den Eindruck geprägter Buchstaben, indem das untere Layer weiße Schrift und einen Offset von einem Pixel in der y-Achse hat.
Das ganze funktioniert im Internet Explorer 6-8, im Firefox, in Opera und in Safari. Andere Browser habe ich nicht getestet, allerdings sollte es mit keinem modernen Browser Probleme geben.
Für Anmerkungen nutzt bitte die Kommentarfunktion, ich freue mich immer über Anregungen und konstruktive Kritik. Solltet ihr noch keine Erfahrungen mit jQuery gemacht haben, empfehle ich euch das Einsteiger-Tutorial in den "Weiterführenden Links".
Weiterführende Links:
Ressourcen-sparende Navigation in WordPress
Normalerweise baut man die Navigation in WordPress mit der Funktion wp_list_pages() (mehr auf WordPress Codex), so dass man im Backend Seiten anlegen kann und diese dynamisch im Frontend erscheinen. Dadurch ist es für Nutzer möglich, jedes beliebige Theme zu laden und trotzdem eine vollständige Navigation zu haben, ohne dass sie im Quelltext rumwerkeln müssen.
Allerdings sind damit eine Menge Abfragen verbunden, die die Ladezeit der Seite erhöhen. Baut man sich ein eigenes Theme und weiß, welche Seiten man anlegen möchte, sollte man ernsthaft darüber nachdenken, auf wp_list_pages() zu verzichten und die Navigation selbst in statischem HTML mithilfe einer ungeordneten Liste zu bauen.
Blöderweise muss man dabei auf das von wp_list_pages() zur Verfügung gestellte Navigation Highlighting verzichten. Dabei wird dem li-Tag des Navigationspunktes der Seite, auf der man sich gerade befindet, die Klasse current_page_item hinzugefügt, so dass man die Möglichkeit hat, diesen Punkt per CSS hervorzuheben.
Hier kommt jedoch die neue WordPress-Funktion body_class() ins Spiel. Diese fügt dem body-Tag u.a. den Name der aktuellen Seite als Klasse hinzu. Der HTML-Teil einer Navigation kann dann bspw. so aussehen:
PHP/HTML
<body <?php body_class() ?>>
…
<ul class="navigation">
<li class="home_nav"><a href="#">Home</a></li>
<li class="leistungen_nav"><a href="#">Leistungen</a></li>
<li class="referenzen_nav"><a href="#">Referenzen</a></li>
</ul>
…
</body>
Den Pfad zur Seite müsst ihr natürlich ins href-Attribut des a-Tags eintragen. Ansonsten trifft hier der Titel der Seite in der body-Klasse auf die Klasse des zur Seite gehörenden li-Tags. Das kann man sich zunutze machen und zwar mit folgenden CSS-Angaben:
CSS
.home li.home_nav a:link,
.home li.home_nav a:visited,
.leistungen li.leistungen_nav a:link,
.leistungen li.leistungen_nav a:visited,
.referenzen li.referenzen_nav a:link,
.referenzen li.referenzen_nav a:visited {
color: #FFF;
background-color: #369;
text-decoration: underline;
}
.home li.home_nav a:hover,
.leistungen li.leistungen_nav a:hover,
.referenzen li.referenzen_nav a:hover {
color: #FFF;
background-color: #666;
text-decoration: underline;
}
Natürlich muss man noch den Normalzustand der Navigation definieren, aber ansonsten ist das Navigation Highlighting fertig. Alles mit einer(!) dymischen Komponente — der body_class()-Funktion —, also schön schlank.
Weiterführende Links: