Hover- und Spotlight-Effekt in Bildergalerie mit jQuery
Jede Bildergalerie gewinnt, wenn das Thumbnail-Bild unter dem Cursor durch einen Hover-Effekt hervorgehoben wird und der Nutzer weiß, was gerade Sache ist. Wenn die umliegenden Thumbnails dann auch noch durch einen Spotlight-Effekt abgedunkelt werden, ist es noch leichter für den Nutzer, sich auf das aktuelle Bild zu konzentrieren. Wie man das mit jQuery realisiert, zeige ich jetzt.
Als erstes der HTML-Teil:
HTML
<body class="js">
<div class="wrap">
<a href="path/to/image.html" class="image">
<img src="path/to/image.jpg" alt="" />
</a>
<a href="path/to/image.html" class="image">
<img src="path/to/image.jpg" alt="" />
</a>
<a href="path/to/image.html" class="image">
<img src="path/to/image.jpg" alt="" />
</a>
</div>
</body>
Als nächstes der CSS-Teil:
CSS
.wrap {
width: 321px;
height: 321px;
padding: 20px 0 0 20px;
margin: 30px auto;
clear: left;
}
.image {
width: 77px;
height: 77px;
padding: 5px;
margin: 0 20px 20px 0;
float: left;
display: inline;
position: relative;
z-index: 10;
background-color: #CCC;
}
.js .image:hover {
background-color: #36F;
}
.image img {
position: relative;
z-index: 30;
border-width: 1px;
border-style: solid;
border-color: #666 #999 #999 #666;
}
.layer1, .layer2 {
display: block;
position: absolute;
}
.layer1 {
width: 87px;
height: 87px;
top: 0;
left: 0;
z-index: 20;
background-color: #36F;
}
.layer2 {
width: 77px;
height: 77px;
top: 5px;
left: 5px;
z-index: 40;
background-color: #000;
}
Kleine Anmerkung dazu: Wenn JavaScript im Browser aktiviert ist, wird die Klasse js vom body-Tag entfernt. Geschieht dies nicht, bekommt das a-Tag um die Thumbnails einen :hover-Effekt.
Schlussendlich der jQuery-Teil:
JavaScript
jQuery(document).ready(function($) {
$('body').removeClass('js');
var image = $('a.image');
var html = '<span class=\"layer1\"></span><span class=\"layer2\"></span>';
image.append(html).find('span').css('opacity', '0');
image.each( function() {
$(this).hover( function() {
$('span.layer1', this).stop().fadeTo(800, 1);
$(this).siblings().find('span.layer2').stop().fadeTo(800, 0.5);
}, function() {
$('span.layer1', this).stop().fadeTo(800, 0);
$(this).siblings().find('span.layer2').stop().fadeTo(800, 0);
});
});
});
Als erstes wird die Klasse js vom body-Tag entfernt. Danach werden die beiden span-Tags eingefügt, die für den Hover- und den Spotlight-Effekt zuständig sind. Danach wird in einer each()-Schleife festgelegt, dass bei einem Hover die span-Tags erscheinen und entsprechend wieder verschwinden.
Das war es auch schon. Falls es Fragen oder Probleme gibt, möchte ich euch wie immer die Kommentar-Funktion nahe legen. Ansonsten freue ich mich natürlich, wenn ihr den Artikel bookmark't oder auf twitter verbreitet.
WordPress-Statistik-Smiley verbergen
Das Statistik-PlugIn WordPress.com Stats ist sicherlich praktisch. Vom Umfang her eher rudimentär, doch um schnell mal im Backend zu checken, was die Besucherzahl sagt, genau richtig.
Das einzige was störend sein kann, ist das kleine Smiley, das im Blog erscheint, wenn das PlugIn aktiv ist. Doch das wird man mit vier Zeilen CSS ganz schnell los:
CSS
#wpstats {
height: 0;
visibility: hidden;
}
Nun ist das Bild verschwunden, wie es sich für einen "Zähl-Pixel" gehört, verrichtet jedoch weiter seinen Dienst.
Lightbox in Aperture-Bildergalerie einbauen mit jQuery
Aperture ist eine Photo-Editing-Software von Apple™, welche die Möglichkeit bietet, Galerien zu erstellen und im HTML-Format zu exportieren. Diese Funktion kann ich aufgrund des generierten Quelltextes nicht empfehlen, nichtsdestominder ist sie sehr praktisch für Leute, die schnell eine Galerie veröffentlichen wollen, jedoch kein HTML können.
Ein weiteres Manko ist der Umstand, dass jedes Foto eine eigene Unterseite bekommt und man sich an diesen entlang hangelt. Heutzutage allerdings - möchte ich behaupten - ist eine Lightbox Standard, wenn es um das Betrachten von Fotos im Browser geht. Deshalb möchte ich zeigen, wie man mithilfe von jQuery und einem PlugIn diese Funktionalität relativ schnell nachrüsten kann.
Als erstes benötigen wir das PlugIn jQuery lightBox. Wir entpacken das Zip-File und legen den js-Ordner, den css-Ordner und den images-Ordner aus dem jquery-lightbox-0.5-Ordner in dem aus Aperture exportierten Galerie-Ordner ab.
Nun muss das PlugIn eingebunden werden und zwar innerhalb der <head>-Tags der index.html der Galerie. Als erstes die beiden JavaScript-Dateien und das Stylesheet:
HTML
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.pack.js"></script>
Mit folgendem JavaScript-Code aktivieren wir die Lightbox:
JavaScript
$(document).ready( function() {
$('dd.imagecell a').lightBox();
});
Nun ergibt sich allerdings das Problem, dass das Lightbox-PlugIn darauf angewiesen ist, dass die Links um die Thumbnails der Fotos auf die große Version der selben verweisen. Dies tun sie in der Aperture-Galerie allerdings nicht. Vielmehr verweist der Link auf die Unterseite, auf der die große Version des Fotos eingebunden ist. Die Links müssen also erst noch manipuliert werden, bevor die Lightbox funktioniert:
JavaScript
$(document).ready( function() {
var link = $('dd.imagecell a');
link.each( function(i) {
i += 1;
$(this).attr('href', 'pictures/picture-' + i + '.jpg');
});
});
Mit diesem JavaScript-Code werden die Verweise auf den Thumbnails auf die großen Versionen der jeweiligen Fotos umgelenkt. Alles in allem muss man also folgendes in den <head>-Bereich der index.html schreiben:
HTML/JavaScript
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.pack.js"></script>
<script type="text/javascript">
$(document).ready( function() {
var link = $('dd.imagecell a');
link.each( function(i) {
i += 1;
$(this).attr('href', 'pictures/picture-' + i + '.jpg');
});
link.lightBox();
});
</script>
Schon habt ihr mit etwas jQuery eine moderne Lightbox in eure Aperture-Galerie eingebaut.
Noch ein Hinweis am Rande: Die Pfade zum Warte-Bild, den Pfeilen und dem Close-Button sind in der lightbox.js festgelegt. Wenn ihr den images-Ordner also nicht im Galerie-Ordner ablegt, sondern bspw. darunter, müsst ihr diese Pfad-Angaben ändern, sonst wird die Lightbox nicht richtig angezeigt.
Ansonsten gilt wie immer: Wenn es Fragen gibt, nutzt die Kommentar-Funktion!
Weiterführende Links:
Kommunikationsschwierigkeiten
Ich: 'Tschuldigung, weißt du, wann es hier Essen gibt?
Konfirmand: Drüben, in dem anderen Gebäude, wenn du rauskommst links und dann hinten im Erdgeschoss.
Ich: Nee, ich meine wann??
Konfirmand: Ach so, Erbsensuppe!
Ich: Nein, wann???
Konfirmand: Ach so! Ich glaube um halb eins.
Ich: Danke!
Das Mortadella-Buch von Christoph Hänsli
Gerade noch war ich bei Da Giorgio und habe mir eine schmackhafte Mortadella-Bemme geschossen, schon läuft mir das Mortadella-Buch von Christoph Hänsli über den Weg. Das ist ein Zeichen - ich soll darüber bloggen. Und das tue ich hiermit auch.
Für sein Mortadella-Buch hat Christoph Hänsli eine Mortadella-Wurst der Länge nach in 332 Scheiben aufgeschnitten und jede einzelne gemalt. Das ganze ergibt laut Amazon-Produktbeschreibung ein hypnotisches Universum zwischen meditativen Mortadella Mandalas und sich langsam verändernden, zartrosa Sternbildern. Dem ist wohl nichts mehr hinzuzufügen.
Hier gibts das Buch: Mortadella-Buch
Gefunden bei den Blog-Rebellen
Weiterführende Wurstlinks:
- Das Wurstplakat von Christoph Hänsli
- Wurst-Wallpaper auf Phase 5
- Die Plüschwürste von aufschnitt.net
- Der Dauerbrenner: Wurstteppich
Schnee in Hannover
Der Winter lässt sich dieses Jahr nicht lumpen und beschert Hannover eine Schneedecke, die es in der Dicke wohl noch nicht gegeben hat, seit ich das Wort Schnee buchstabieren kann. Alles Grau verschwindet unter einem Weiß und der Lärm der Stadt wird zumindest eine Zeit lang durch den fluffigen Belag gedämpft.
Die perfekte Gelegenheit meine neue Kamera zu testen und die Schneemengen fotografisch festzuhalten. Sonst glaubt uns das doch später keiner. Nachfolgend ein paar Bilder, die ich einerseits tagsüber und andererseits nachts gemacht habe, und die allesamt entsättigt und hart im Kontrast angezogen sind.
Die Ortsfeuerwehr Hannover-Linden bei Nacht und im Schnee.
Das Kestner-Museum Hannover im Schnee.
Verschneite Stadtvilla in Hannover-Linden.
Schnee auf den Dächern des Neuen Rathauses von Hannover.
Schneebedeckte Straße in Hannover-Linden bei Nacht.
Wie immer aktiviert ihr die Lightbox, wenn ihr auf die Fotos klickt, und könnt diese so in voller Auflösung betrachten. Es sei denn, ihr sitzt am Feedreader, dann ist Essig mit Lightbox.