Een deur zonder kader errond en zonder handvat is geen deur maar gewoon een stuk muur. Een link in het zwart en zonder lijn eronder is geen link maar gewoon een stuk tekst.

En nee, het telt niet dat de deur opengaat als er op een speciale manier op geduwd wordt, of dat de link schuingedrukt komt te staan als er met de muis overgegaan wordt.

Affordances, noemen we dat onder specialisten.

Het is hetzelfde met thumbnails: geen mens die op kleine beeldjes klikt om grotere beelden te zien als er geen aanduiding is dat er iets te zien zal zijn. Iets gelijk een vergrootglas, bijvoorbeeld.

En toch doe ik het al jaren op mijn eigen weblog, en, erger, doen we het al jaren op Gentblogt: gewoon kleine beeldjes zetten en dan “hopen” dat “de mensen” wel zullen klikken als ze meer willen zien.

Wat ze natuurlijk overweldigend niét doen.

Ik had op Gentblogt in het begin van de week al een lightbox-dinges aangezet, dat je op een beeld klikt en dan met de pijltjestoetsen of door op het beeld te klikken naar andere beelden in een reeks kan gaan: zie bijvoorbeeld alhier.

Maar dat hielp niet met het weten dat een de beelden die er staan maar kleinere versies zijn van grotere beelden. En dus heb ik er vanavond op Gentblogt dan maar een vergrootglas bijgezet. Na, gelijk, vijf jaar of zo. ‘t Werd eens tijd.

Hoe? Geprutst, natuurlijk — weinig zo gevaarlijk als iemand die er een beetje van afweet, net genoeg om vieze dingen te maken.

De parameters: het moet werken zonder aanpassingen aan de manier waarop we de dingen nu al doen, het moet werken met al wat er nu al op staat, het moet transparant zijn, en het moet in allerlei browsers werken, of toch min of meer. Met andere woorden: geen extra html, geen aanpassingen aan de thumbnails.

Mijn gedachtengang:

(1) Ik werk liever met jquery, maar voor die lightbox en voor WordPress in het algemeen wordt er al Prototype gebruikt, dus ‘t zal daarmee te doen zijn.

(2) Alle dingen die doorlinken naar een afbeelding, daar moet een vergrootglas op komen.

(3) Ik zal dan maar een <span> toevoegen zeker na het <img> in de <a>’s met href die beelden bevatten zeker? En in die <span> dan een doorschijnend achtegrondbeeld zetten en bovenop de thumbnail zetten zeker?

Zo gezegd, zo gedaan. Alle <a>’s die linken naar beelden, dat krijg ik met

$$("a[href$=jpg]", "a[href$=jpeg]", "a[href$=png]", "a[href$=gif]")

en dan smijt ik daar een <span> achter als volgt

$$("a[href$=jpg]", "a[href$=jpeg]", "a[href$=png]", "a[href$=gif]").each(function(lnk) { lnk.insert('<span class="mag">[+]</span>') });

Dus waar er

<a href="http://website.com"><img src="tralala.jpg" /></a>

stond, blijft dat er gewoon staan, maar waar er

<a href="tralala.jpg"><img src="tralala_sm.jpg" /></a>

stond, wordt dat

<a href="tralala.jpg"><img src="tralala_sm.jpg" /><span> class="mag">[+]</span></a>

Sweet. (Is dat de beste manier om het te doen? Ik-heb-er-geen-flauw-idee-van. Ik doe maar iets.

Volgende stap: een vergrootglas maken. Illustrator, een cirkel, een lijn, lijn copiëren, lijn 90° draaien, lijn nog eens copiëren. Cirkel en eerste twee lijnen allemaal met elkaar centreren, derde lijn 45° draaien en tegen de cirkel plakken, alles een lijndikte geven, een schaduw geven, exporteren als png, halfdoorschijnend maken, opnieuw exporteren als png, hey presto

De eerste versie is voor mousover, de tweede versie is voor normaal.

En dan wat css beprutsen om die span bovenop het beeld te krijgen. Vertrekkend van deze html, dus:

<a href="tralala.jpg"><img src="tralala_sm.jpg" /><span> class="mag">[+]</span></a>

Eerst van die span een blokje maken dat even groot is als het beeld, ‘t is te zeggen 31×31 pixels:

.mag {
    display: block;
    width: 31px;
    height: 31px;
}

Dan moet die tekst, [+], weg en moet die vervangen worden door het beeldje. Ik doe dat viesgaweg met

text-indent: –1000px
background: transparent url(http://www.gentblogt.be/wp-content/themes/Gantoise2/images/mag.png);

Okay bon. Dan moet dat blokje onderaan rechts het beeld staan. Als ik de bovenliggende <a> een position: relative geef, kan ik de span een position: relative position: absolute geven ten opzichte van die <a>, en proper in de hoek zetten. Op het oog is dat 2 pixels links van de rechterrand van het beeld en 3 pixels van de onderkant. Dat wordt dan in totaal dit:

a[href$=jpg], a[href$=jpeg], a[href$=png], a[href$=gif] {
    position: relative;
}

.mag {
    display: block;
    width: 31px;
    height: 31px;
    position: absolute;
    right: 2px;
    bottom: 3px;
    background: transparent url(http://www.gentblogt.be/wp-content/themes/Gantoise2/images/mag.png) bottom right;
    text-indent: -1000px
}

O ja, en om het een beetje properder te maken, een mousover-effectje:

a:hover .mag {
    background: transparent url(http://www.gentblogt.be/wp-content/themes/Gantoise2/images/mag2.png) bottom right;
}

Oh zeker, ‘t is niet efficiënt en watnog. Maar het werkt wel, voorlopig. Denk ik. In een groot aantal gevallen. Lang niet overal, natuurlijk.

Zo ben ik ruim een uur bezig geweest om er een paar vuiligheden uit te krijgen. Als het <img> in de <a> al een float: right had, bijvoorbeeld, dan bleef het vergrootglas in de linkermarge staan. Oplossing redelijk simpel: parent van images met float-right ook float: right geven. Vies? You betcha.

(En dan drie kwartier verliezen met zoeken waarom het in Chrome wel en in Firefox niet werkt. En dan beseffen dat in Firefox ik nit ingelogd ben, en ik dus een versie van de pagina uit de cache te zien krijg.  En dan stilletjes vloeken.)

Of nog: dat ik stomgaweg vergeten was om alles pas na onLoad te doen – oplossing: alle Prototype-)code in een

Event.observe(window, 'load', function() { });

zetten.

Heeft iedereen dat, denk ik dan soms, zo het gevoel de helft van de tijd aan het improviseren te zijn?

Urgh. Ik zou zó graag willen kunnen zeggen “hey, zó wil ik het. make it happen.”