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

mag2[1] mag[1]

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



Reacties

8 reacties op “Specialist aan het werk”

  1. Welcome to our world 🙂

  2. Eigenlijk zowat alles in IT is vandaag nog te veel improvisatie, heuristieken, inzicht en ervaring in plaats van het volgen van bepaalde methodes. Er zijn gewoonweg geen fundamentele wetten zoals in de fysica. Dit in tegenstelling tot de autoindustrie, alwaar auto’s zonder problemen van de band rollen. Zo zou dat eigenlijk ook met software moeten zijn. Niet dat ik een probleem met vakmanschap heb – integendeel zelfs, dat is iets van een andere orde waarvoor ik enorm veel respect heb. Het zou alleszins minder relevant worden m.i.

  3. Fuck man, zo herkenbaar. Vooral die laatste zin.

  4. Ben De Rydt avatar

    Als ik de bovenliggende <a> een position: relative geef, kan ik de span een position: relative geven ten opzichte van die <a>

    moet zijn:

    Als ik de bovenliggende <a> een position: relative geef, kan ik de span een position: absolute geven ten opzichte van die <a>

    Kwestie dat de mensen kunnen volgen.

  5. Dat is bijna exact zoals ik het zou doen.
    En toen ik toch de CSS aant bekijken was zag ik dit:

    :focus { outline:0 none; }

    En eigenlijk is dat pas heel vies. Geen getab door de website, want het gefocuste element staat niet aangeduid. Anysurfer zou u doodbliksemen 😉

  6. Roel Van Gils avatar
    Roel Van Gils

    Wat Jonas zegt :p

    Voor de rest heb je dat heel netjes gedaan. Dat vergrootglaasje zou ik wel gewoon ‘met toestemming gepikt’ hebben van http://www.iconfinder.com/. Ze hebben er daar hele schoontjes.

    (Ik ken trouwens heel wat ‘professionele’ webdesigners/front-end developers/noemt-ze-hoe-je-wil die dit taakje veel ‘viezer’ hadden opgelost hoor.)

  7. Michel,ik heb er geen verstand van, maar het werkt prima.

  8. Proper gemaakt.

    Er bestaan trouwens ook verschillende plugins voor WordPress die ongeveer hetzelfde doen, maar dan volautomatisch. Om er maar twee te noemen:

    http://wordpress.org/extend/plugins/lightbox-plus

    http://wordpress.org/extend/plugins/jquery-colorbox