I have set up a jQuery.popeye site where you can find documentation and demos.

You will also find links to a new feature request forum and bug tracker there. Hope you like the new stuff!

Writing the history of single-page image galleries on the web, one could start like this:

In the beginning, there was nothing. And the Developer said: “Let there be pop-ups!” And the Users saw that pop-ups were bad…

Then came Lightbox. Finally, an unobtrusive script allowed to display enlarged versions of thumbnail images embedded in web pages without leaving that web page or breaking the layout. The “simple” solution was to add a semi-transparent overlay to the page, on which the enlarged image is centered.

Since then, we’ve seen a ton of similar scripts used on an ever-increasing number of websites.

While at first, I, like everyone else, was really enthusiastic about this technique, I have come to see some of the downsides of a lightbox-ish image presentation:

• Lightboxes are usually not consistent with the look & feel of the rest of the website, and
• they still feel like a kind of pop-up, since the image leaves the layer of the web page and opens up a new layer.

Besides – I’m getting tired of seeing the same effect, the same UI controls over and over…

So, while working on a client project in which I at first used a jQuery Lightbox plugin, I ended up dissatisfied with the outcome. I had gone through great length to stir up a consistent look & feel, just to see it vanish under the lightbox overlay.

I wanted something more integrated in the flow of the web page – a box with a small preview image with caption, the possibility to flip through an array of more thumbnails and, of course, to show an enlarged version, all in one place. Lightbox offers that. Moreover, I wanted the box to stay anchored to the page layout and not hovering above it disconnectedly. The way to achieve this was writing a script which would fix one corner of the enlarged image to the exact spot where the thumbnail had been.

After toying around for a while, I decided to put the final outcome into a proper jQuery plugin and see, what other people (you!) think. May jQuery.popeye be of use!

Behavior

The plugin transforms an unoredered list of images into a box displaying only one preview image at a time. The box has controls to skim through the preview images and to enlarge a given image. The box expands to accomodate the enlarged version, while the controls are hidden in full image size mode. A simple click on the image returns the box to its compact state.

The compact box has fixed, automatically calculated dimensions. The widht and height are calculated so that all thumbnail images are cropped to the smallest width and height in the set and centered resulting image area (stage).

This behaviour can be overriden in the plugin options.

I have set up a demo page which best shows the behavior of jQuery.popeye.

Usage

jQuery.popeye degrades gracefully into a scrollable list of thumbnails which link to an enlarged version. The HTML-setup should look like this:

			

			

			
...

Once the plugin has been included in your web page, the popeye(es) can be easily created with the following command:

$(document).ready(function () {
	$('.popeye').popeye();
});

Of course, multiple popeyees can be used together on a single page.

Customization

jQuery.popeye supports a wide range of options. They are, in detail:

Update: These are the options for jQuery.popeye 0.2. The options for the latest version have changed!

To overwrite the default parameters, you can use the following code:

var options = {
	direction:  'right',
	duration:   230,
	stageW:     '200px',
	stageH:     '240px'
}
$('.popeye').popeye(options);

The plugin comes with the mandatory css-file jquery.popeye.css which shouldn’t be altered. Additionally, I have included a second, customizable CSS-file with an example style for you to build upon.

I repeat…

• Get the latest version of jQuery,
• (optional) get the jQuery Easing Plugin,
• see it in action on the demo page,
• get the plugin:

Download jQuery.popeye
from the jQuery Plugin Repository

Considerations

There are still some issues with the first release of jQuery.popeye which I hope to resolve in future versions. They mainly concern the size of the enlarged box (the whole image should stay visible) and the gallery controls (will introduce proper controls to enlarged box).

But for now, your feedback, bug reports, improvements and feature requests are very welcome in the comment section.

“I yam what I yam!” — Popeye

In den vorherigen Tutorials und Beispielen hatte ich diesen weggelassen, damit die Hintergrundgrafiken, die einem Rollover-Link per CSS zugewiesen werden, nicht vom Linktext, also dem Text zwischen dem öffnenden und schließenden <a>, überlagert werden.

Unschön! Der entstehende Code hat keine semantische Aussagekraft, von derSuchmaschinenfreundlichkeit ganz zu schweigen. Außerdem zeigen ältere Browser bei Einsatz dieser Technik dann gar nichts an, der Link wird also unsichtbar für den Benutzer. Kurz gesagt: ein Link sollte immer einen Ankertext haben.

Hier also der Code verbesserte Rollover-Code:

Linktext 1

a.rollover {
	display: block;
	float: left;
	width: XYpx; /* Breite einer Rollover-Status-Grafik  */
	height: 0px !important;
	padding-top: XYpx; /* Höhe einer Rollover-Status-Grafik */
	overflow: hidden;
}
#rollover1 {
	background: url(rollover.png) no-repeat left 0px;
}
#meinRollover1:hover {
	background: url(rollover.png) no-repeat left -XYpx; /* Höhe einer Rollover-Status-Grafik (negativ) */
}
#rollover1:active {
	background: url(rollover.png) no-repeat left -XYpx; /* doppelte Höhe einer Rollover-Status-Grafik (negativ) */
}

Dabei verwende ich wieder eine Grafik, in der die drei Rollover-Stati übereinander in einer einzigen Datei abgespeichert sind, die dann jeweils nur in ihrer Position als Hintergrundgrafik der Links verschoben wird. Dies geschieht durch die Angabe des negativen Abstands in Pixeln zum oberen Rand der Grafik. Neu ist, dass der Linktext zwar da ist, durch die CSS-Anweisungen aber so weit nach unten verschoben wird, dass er nicht mehr über der Grafik liegt, sondern unsichtbar wird.

Wie das Ergebnis genau aussieht, zeigt dieses Beispiel.

Kompatibel mit folgenden Browsern:

• Mozilla 1.7
• Firefox 1+
• Opera 9+
• Safari (Windows) 3+
• Internet Explorer 6+ (allerdings keine Anzeige des dritten Status :active)

CSS bietet zur Positionierung von Hintergrundgrafiken die 5 Werte left, right, top, bottom und center, wobei center sowohl vertikale als auch horizontale Positionierung einschließt. Aus diesen 5 Werten lässt sich also eine Matrix mit 9 verschiedenen Positionen erstellen:

Genau wie diese Matrix lässt sich auch eine Grafik aufbauen, die 3 verschiedene Grafiken mit jeweils 3 Rollover-Stati vereint. Doch zunächst zu den einzelnen Rollover-Grafiken. Ich will auf meiner Website 3 Rollover mit jeweils verschiedenen Grafiken einbauen. Dazu lege ich drei Grafiken an, die jeweils die drei gewünschten Rollover-Stati enthalten (normal, mouseover und click):

Bild 1 hat eine Dateigröße von 8,16 KB

Bild 2 hat eine Dateigröße von 3,76 KB

Bild 3 hat eine Dateigröße von 6,18 KB, macht also insgesamt 18,1 KB.

Durch folgenden Code lässt sich nun aus jeder dieser Grafiken ein Rollover erstellen:

#meinRollover1 {
	display:block;
	width: 106px;
	height: 118px;
	background: #FFF url(rollover.gif) no-repeat left top;
}
#meinRollover1:hover {
	background: #FFF url(rollover.gif) no-repeat left center;
}
#meinRollover1:active {
	background: #FFF url(rollover.gif) no-repeat left bottom;
}

Dabei geben width und height natürlich die Dimensionen nur eines der Einzelbilder, die die verschiedenen Stati darstellen, an (Beispiel).

Nun kombiniere ich, wie in obiger Matrix, alle 9 Einzelbilder in einer einzigen Datei:

Dabei achte ich darauf, dass jedes Einzelbild auch entsprechend seiner CSS-Positionierung in der Datei platziert wird. Jedem Einzelbild wird also genau so viel Platz eingeräumt, wie das größte Einzelbild beansprucht. Ebenso platziere ich die Einzelbilder entsprechend der CSS-Matrix, das Einzelbild zum Beipspiel, das nach der CSS-Matrix sowohl vertikal als auch horizontal zentriert wird, muss also auch in der Datei ebenso zentriert werden. Dies lässt sich in Photoshop besonders leicht durch die Verwendung von Hilfslinien erreichen. Zur Verdeutlichung hier nochmal die kombinierte Grafik mit eingezeichneten Hilfslinien:

Mit folgendem Code erstelle ich nun 3 völlig voneinander unabhängige Rollover-Links, die alle nur diese einzige Datei verwenden:

a {
	display:block;
}
#meinRollover1 {
	width: 106px;
	height: 118px;
	background: #FFF url(rollover_combined.gif) no-repeat left top;
}
#meinRollover1:hover {
	background: #FFF url(rollover_combined.gif) no-repeat left center;
}
#meinRollover1:active {
	background: #FFF url(rollover_combined.gif) no-repeat left bottom;
}
#meinRollover2 {
	width: 44px;
	height: 79px;
	background: #FFF url(rollover_combined.gif) no-repeat center top;
}
#meinRollover2:hover {
	background: #FFF url(rollover_combined.gif) no-repeat center center;
}
#meinRollover2:active {
	background: #FFF url(rollover_combined.gif) no-repeat center bottom;
}
#meinRollover3 {
	width: 104px;
	height: 73px;
	background: #FFF url(rollover_combined.gif) no-repeat right top;
}
#meinRollover3:hover {
	background: #FFF url(rollover_combined.gif) no-repeat right center;
}
#meinRollover3:active {
	background: #FFF url(rollover_combined.gif) no-repeat right bottom;
}

Jedem einzelnen Rollover werden dabei die Dimensionen zugewiesen, die das tatsächliche Einzelbild beansprucht, die Positionierungwerte werden aus der CSS-Matrix übernommen.
Hier ein funktionierendes Beispiel der 3 Rollover.

Das Resultat: Die kombinierte Grafik belegt 14,6 KB, was gegenüber den Deteigrößen der drei einzelnen Grafiken (zusammen 18,1 KB) einer Reduzierung von 20% entspricht.

Sicherlich sind jedem noch die 50 Zeilen Javascript-Code bekannt, die Adobe ImageReady produziert, um Links mit grafischen Rollover zu versehen. Dabei wurde bei Mouseover über ein Grafik per Javascript der Pfad dieser Grafik durch den Pfad einer Anderen ersetzt. Die Ersatz-Grafiken müssen dabei vorher, ebenfalls per Javascript, in den Browser vorgeladen werden, damit beim Rollover keine Verzögerung auftritt. Obwohl diese Technik inzwischen veraltet ist, produziert ImageReady leider weiterhin diese Lösung.

Die Nachteile dabei sind:

• Aufspaltung der Rollover-Grafik in 2 Grafiken, dadurch müssen auch 2 HTTP-Requests abgefeuert werden um die Grafiken vom Server zu holen, was sich auf die Ladezeit der Site auswirken kann (wenn viele Rollover benutzt werden),
• 50 Zeilen Javascript zuviel,
• ImageReady bedient sich keiner externen Event-Handler, sondern platziert die Javascript-Aufrufe in den Link-Tags (mittels onmouseover, onmouseout, etc). Dies ließe sich natürlich beheben leicht beheben, doch
• der Effekt funktioniert sowieso nicht bei ausgeschaltetem Javascript (D’Oh).

Glücklicherweise gibt es eine Lösung, die ohne Javascript auskommt und dabei ohne CSS-Hacks in allen modernen Browsern funktionieren sollte.

Nehmen wir folgende Grafik:

Diese soll mit einem Rollover versehen werden, so dass sie bei Mouseover folgendes anzeigt:

Getrennt habe beide Grafiken eine Dateigröße von knapp 8 Kb und es sind 2 HTTP-Requests nötig, um beide abzurufen.

Kombinieren wir beide Grafiken in eine, indem wir die Höhe der Grafikdatei auf 200% aufziehen und die zweite Grafik unterhalb der ersten platzieren, erhalten wir folgendes:

Das Resultat: knapp 7 Kb Dateigröße, ein HTTP-Request – Ladezeit verringert, Ziel 1 erreicht.

Doch wie wird die Grafik nun eingebunden, damit nicht beide Rollover-Stati gleichzeitig zu sehen sind? Nehmen wir folgenden XHTML-Code

und fügen folgendes als CSS dazu

#meinRollover1 {
	display:block;
	width: 126px;
	height: 151px;
	background: #FFF url(rollover1.png) no-repeat top;
}

Zeile 1: Die Umstellung des Inline-Elements A auf ein Block-Level-Element bewirkt, dass wir diesem eine Höhe und Breite zuweisen können. Natürlich nehmen wir hier die Dimensionen der Grafik, als Höhe allerdings die halbe Höhe, also die ursprüngliche Höhe des Teils der Grafik, den wir anzeigen möchten. In Zeile 4 wird die Grafik dem Link dann als Hintergrundbild zugewiesen.

So weit, so gut. Wie kommt nun der Rollover-Effekt zu Stande? Glüclicherweise unterstützen alle Browser den Einsatz des Pseudolements :hover bei Links (bei anderen Elementen tut sich der IE6 immer noch schwer, ihm kann allerdings mit Einbindung der csshover.htc geholfen werden, was wiederrum dazu führt, dass das CSS-Stylesheet nicht mehr korrekt validiert).

Fügen wir also eine weitere CSS-Beschrebung ein:

#meinRollover1:hover {
	background: #FFF url(rollover1.png) no-repeat bottom;
}

Eine einzige Zeile CSS reicht hier aus, um den gewünschten Effekt zu erzeugen. Die Hintergrundgrafik wird beim :hover-Status einfach unten ausgerichtet, und das Licht geht an (Beispiel).

Natürlich gib es auch Situationen, in denen man anderen Elementen als einem Link einen grafischen Rollover zuweisen möchte. Hierbei ist, wie oben schon erwähnt, zu beachten, dass nicht alle Browser :hover bei anderen Elementen wie z.B. DIV unterstützen. Hier kann man entweder A-Elemente als Layout-Elemente verwenden, sie per Javascript mittels void(0) deaktivieren und evtl. den Cursor ändern, damit der Benutzer nicht merkt, dass es sich um einen Link handelt. Dies ist aber semantsich nicht korrekt, denn in XHTML ist ein Link ein Link und sollte so verwendet werden.

Stattdessen kann man vorerst nur die Datei csshover.htc in sein Sytlesheet einbinden

html, body {
	behavior:url("csshover.htc");
}

was allerdings dann kein valides CSS mehr ist, und darauf warten, dass zukünftige Browsergenerationen (Winke Winke, IE7) hier bessere Unterstützung für :hover bieten. IE7 wirklich schnell übernommen wird, hier ist das Problem nämlich gelöst.