Ik zit nog maar in het station van Marne-la-Vallée te wachten op een aansluiting naar Straatsburg, en ik heb al meteen negatief twintig goeting om ooit naar Eurodisney te gaan.

Dikke Japanezen in groepen van drie en vier, Vlaamse marginalen in uitgebreide familiegroepen, drukdoende Fransmans met ongemanierde krijsende kinderen, en –urggggh– heelder dorpen Spanjaarden. Met moeders en grootmoeders en tantes die vastgeroest staan op volume nasaal-twaalf. Die aan één stuk door ratelen tegen hun roedels kinderen en tegen miserabele hoopjes zwijgzame mannen.

En vólk! Containers mensenvlees worden er hier uitgebraakt, en geen idee waar ze allemaal vandaan komen: zoveel treins komen er hier nochtans niet toe.

En om de vijf man loopt er een volwassene met zo’n stomme Mickey Mouse-oren rond.   Nee, ze gaan serieus hun best moeten doen om mijn in die Eurodisney te krijgen.

Die keer dat ze in de tuin aan tafel zaten:

Die keer dat Anna al haar beesten en poppen aan de kant gelegd had en in haar prinsessenkleed op haar bed lag:

Die keer dat Zelie de koer aan het volkrijten was:

…en dat Anna en Jan op de telefoon aan het spelen waren:

We have a rapist. Origineel:

Op muziek:

Kom dat nu in nu in ‘s hemelsnaam tegen: ik heb iets RSI-achtigs in mijn hand.

Dat was geleden van, euh, 1986, toen ik dagen en weken aan een stuk met een muis aan het tekenen was in Degas Elite op mijn Atari, en dat ik in de muis van mijn hand de één of andere tendinitis had. Opgezwollen, rood en blauw, hand onbruikbaar, arm verdoofd, the works.

Ik heb in de jaren tussen dan en nu geen dag niet aan een computer gezeten, denk ik, en de meest stomme fouten begaan: slechte houding, uren en dagen aan een stuk onnatuurlijke bewegingen doen – beelden bewerken met een muis, dat soort dingen.

En niets: geen een probleem aan mijn handen of vingers of armen.

Maar nu dus wel, en geen idee waarom. Nu is het, of all places, in de pees van mijn rechterpink: begonnen als een soort blauwe plekachtig gevoel, en ondertussen al een helemaal ongevoelige pink en pijnscheuten in mijn pols en alles.

Yo hoho.

Ik gebruik mijn pink voor rechtershift en enter, dus eigenlijk al met al niet zo enorm veel. En op mijn muis doet hij eigenlijk niets.

Een tijdje het zeer rustigaan doen, denk ik. En zien wat er gebeurt: die keer in 1986 is het ook vanzelf overgegaan.

Ik zit op een terras. Waar gaan we dat schrijven?

Koppen XL over begot de making of van die vieze reclamespot met die plastieken computerbabypoppen waar ze echte hoofden opgeplakt hebben.

Geen probleem met die spot, eigenlijk: ze doen maar, natuurlijk, en het is een idee zoals een ander.

Nee, ik kreeg het schurft van die klanten. Ik heb al veel klanten meegemaakt, in binnen- en buitenland, maar een mens wéét dat het fout gaat als er misschien wel twintig Fransmans rond een tafel zitten en dat ze op dat eigenste ogenblik numeteen een oordeel moeten vellen over iets.

In dergelijke situaties: you can’t win — you can’t even break even. Dan begint er één te zeggen “mjaaaaaaa”, en voor de tafel half om is, zijn ze elkaar aan het overbieden met “opinies” waar ze eigenlijk helemaal niet in geloven, gewoon om luidop te ventileren dat ze een opinie hebben, ge weet nooit waar het goed voor zou kunnen zijn.

Oh, hatelijke situaties.

Wel akelig trouwens dat er op de VRT zo’n schaamteloze reclamefilm voor een reclamefilm komt, kritiekloos en alles.

Teveel artikels online gezet de laatste twee weken.

Te weinig tijd gehad.

Geen vakantie gehad.

En de vakantie is bijna gedaan.

Fuck.

In diezelfde context als toen ik zei dat ik heel erg graag zou hebben dat ik gewoon zou kunnen zeggen “make it so”: ik heb de volgende toepassing nodig.

1. Drag & drop een willekeurig aantal afbeeldingen naar een venster.
2. Toon die afbeeldingen in groepjes van telkens twee met een lijn tussen de groepen. Laat mij de beelden verslepen van groep naar groep (en eventueel groepen bijmaken)
3. Als ik op een knop duw (of eventueel on the fly): maak een thumbnail voor elk beeld, zodat alle groepen even breed zijn
4. Als ik op nog een knop duw: upload afbeeldingen en thumbnails naar een ftp-server.

Een hapsnelklaar minofmeer idee van stap 2 staat alhier. Geef bv. "20100723" en "comedy" en "11" en "Comedy" in en duw dan op "allez ju" om te zien wat en hoe.

Wat er moet gebeuren is zo enorm klaar en duidelijk, en voor het gemak lijkt het mij het simpelste om dat met een kleine AIR-toepassing te doen, kwestie van crossbrowserheid.

Blergh. ‘t Is alleen dat ik dat al een eeuw niet meer gedaan heb, en dat ik eigenlijk hoegenaamd geen goesting heb om eraan te beginnen.

Zucht.

*
*     *

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.”

Bleh. Ik ben er helemaal van aangedaan: RIP Alex Higgins.

Zoals ze in het Engels zeggen – this one hit a little too close to home. Shit, shit, shit.