Een betere rollover image voor WordPress

Toen ik gisteren de blogpost maakte over de wolkjesachtergrond in Photoshop, wilde ik natuurlijk de before and after laten zien. Ik deed dat met slider-plugin twentytwenty. Deze plugin had ik eerder geïnstalleerd, omdat de good old “beweeg je muis over dit plaatje” niet werkt op mobiele apparaten. Daar heb je immers geen muis…

Leuk allemaal, zo’n slider, maar ik vond het niet ideaal. Je ziet het verschil toch net even minder goed. Daarbij kwam nog dat de slider hier niet op volle breedte kan. Kortom, dat moest beter kunnen!

Enter nerd mode

Eén probleem: ik weet geen fuck van JavaScript/jQuery. Echt, letterlijk, niks. En dat heb je wél nodig voor zo’n functie. Ik besloot me vanmorgen eens in te lezen. Ik zag laatst een documentaire over een veertienjarig jochie dat al codend bij Google terechtkwam, en hey, als een veertienjarig blaagje het kan, dan moet ik het ook kunnen.

En hoezee! Het is gelukt! Aanschouw, en test het vooral ook even op je telefoon. (Ik heb het zelf alleen nog maar getest op mijn iPhone, dus wie weet loopt het finaal in de soep op Android, hahaha.)

_MG_3502na

Wanneer je op je telefoon je vinger houdt op het plaatje, zie je de onderliggende afbeelding. Haal je je vinger weg, dan verschijnt de “after” weer.

Doe het zelluf

Misschien denk je nu: DIT MOET IK OOK! Ooit wil ik er een echte WordPress-plugin van maken, maar ik moet eerst nog even uitzoeken hoe dat werkt. Daarom nu de nerd-way, voor iedereen die weet hoe je met een ftp-programma werkt (én gebruik maakt van een child theme).

Stap 1

Download mijn stukje code hier en load het bestand up naar je server. Het maakt niet zo heel veel uit waar je het precies neerzet, maar omdat het toch een soort-van-plugin is, heb ik ‘m netjes geplaatst bij de andere plugins.

Stap 2

Open je header.php en plaats daar een regel in die het bestand aanroept. Deze regel plaats je helemaal onderin de head-sectie, één regel boven </head>.

header

Let op: als je geen child theme gebruikt, kan het zijn dat de aanpassing foetsie is zodra je een theme-update doet.

Stap 3

Maak een bericht en load twee plaatjes up die je wil gebruiken in je rollover. Plaats het na-plaatje in je bericht. (Dat is het plaatje dat je als eerste ziet, zonder dat je met je muis of vinger over de afbeelding heengaat.) Ga naar de tekst-editor en voeg dan deze twee stukjes toe aan je afbeeldingscode:

plaatje

De eerste, data-other-src, roept het andere plaatje aan. Daar zet je de link van het voor-plaatje. Vervolgens voeg je aan class de klasse hophop toe. Waarom hophop? Ach ja, ik vond het wel gezellig klinken. Het resultaat, nog maar een keertje:

_MG_3502na

Oppernerd gezocht

Er zijn nog een paar dingetjes die ik zou willen verbeteren aan mijn code. Om de boel op je mobiel werkend te krijgen, negeert de code de default-reacties van je telefoon. (Anders zou je telefoon bijvoorbeeld het plaatje willen opslaan, als je er te lang met je vinger op tapt…) Hierdoor is het ook niet mogelijk met je vinger op het plaatje te scrollen. Dat is in mijn geval geen probleem, omdat er nog genoeg ruimte omheen zit om “grip” te hebben, maar perfect is anders. Echter, ik doe dit pas een halve dag, dus ik weet niet hoe ik dit moet oplossen.

Ook lijkt het erop dat data-image-src vooraan moet staan in de afbeeldingscode, maar WordPress jongleert die dingen heen en weer bij het switchen tussen WYSIWYG en tekst. Ik begrijp niet waarom data-image-src niet werkt als ‘ie achteraan staat, iemand? OPGELOST: WordPress, of mijn Retina 2x-plugin, ik weet het niet precies, maar die herschreef de boel en voegde een hoop src-set afbeeldingsformaten toe. Dat heb ik uitgezet, en nu werkt het als een zonnetje!

Oh enne, opper-nerds: doe ik verder nog iets ongelofelijk fout, please do tell! Dan kan ik ervan leren en de boel aanpassen.

7 reacties op “Een betere rollover image voor WordPress”

  1. Loes schreef:

    Woah, ik vind het knap in een halve dag. Op mijn Samsung Galaxy S7 werkt het als een tierelier. Thumbs up!

    1. Toeps schreef:

      Joepie!

  2. Jessica schreef:

    Werkt uitstekend op mijn LG G3. Goed bezig!

    1. Toeps schreef:

      Dank dank!

  3. An schreef:

    Uiteraard roep je van die dingen beter gewoon aan in je functions.php, ipv dat in je header te hard coden. Mail me even als je een properdere WP-code wilt :-)

  4. BAH schreef:

    1 usability opmerking. Als je (op android) wilt scrollen lukt dat niet met je vinger op het plaatje. Dus als het plaatje (bijna) schermvullend is zit je vast. Scherm kantelen en weer terug helpt misschien.

    1. Toeps schreef:

      Ja dat is overal, da’s helaas niet te voorkomen omdat een aanraking niet te onderscheiden valt van een tap. Maar als het goed is zit er altijd wel een witmarge aan de zijkant, waarop je kunt scrollen?

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *