Voor een klant moesten er een aantal foto’s geplaatst worden die “toen en nu” weergeven. Na uitgebreid zoeken kom je dan op de onterecht redelijk onbekende Juxtapose uit.

Het embedden in WordPress, in mijn geval het theme Divi is redelijk eenvoudig als je de noodzakelijke kennis van HTML en iFrames hebt.

Embedden van het Javascript
U kunt dit handmarig zelf doen of maak van de uiterst simpele (en goedkope) plugin gebruik. U vindt deze hier of volg de beschrijving hieronder

Het onderstaande script wordt in een puur HTML site in degeplaatst.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="{82152b7b2175edeffbc8c5e2c4dc93298b822ed844556ada9e7878eb812ac601}3Cscript{82152b7b2175edeffbc8c5e2c4dc93298b822ed844556ada9e7878eb812ac601}20src{82152b7b2175edeffbc8c5e2c4dc93298b822ed844556ada9e7878eb812ac601}3D{82152b7b2175edeffbc8c5e2c4dc93298b822ed844556ada9e7878eb812ac601}22https{82152b7b2175edeffbc8c5e2c4dc93298b822ed844556ada9e7878eb812ac601}3A{82152b7b2175edeffbc8c5e2c4dc93298b822ed844556ada9e7878eb812ac601}2F{82152b7b2175edeffbc8c5e2c4dc93298b822ed844556ada9e7878eb812ac601}2Fcdn.knightlab.com{82152b7b2175edeffbc8c5e2c4dc93298b822ed844556ada9e7878eb812ac601}2Flibs{82152b7b2175edeffbc8c5e2c4dc93298b822ed844556ada9e7878eb812ac601}2Fjuxtapose{82152b7b2175edeffbc8c5e2c4dc93298b822ed844556ada9e7878eb812ac601}2Flatest{82152b7b2175edeffbc8c5e2c4dc93298b822ed844556ada9e7878eb812ac601}2Fjs{82152b7b2175edeffbc8c5e2c4dc93298b822ed844556ada9e7878eb812ac601}2Fjuxtapose.min.js{82152b7b2175edeffbc8c5e2c4dc93298b822ed844556ada9e7878eb812ac601}22{82152b7b2175edeffbc8c5e2c4dc93298b822ed844556ada9e7878eb812ac601}3E{82152b7b2175edeffbc8c5e2c4dc93298b822ed844556ada9e7878eb812ac601}3C{82152b7b2175edeffbc8c5e2c4dc93298b822ed844556ada9e7878eb812ac601}2Fscript{82152b7b2175edeffbc8c5e2c4dc93298b822ed844556ada9e7878eb812ac601}3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<link rel="stylesheet" href="https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css">

Bij Divi van Elegantthemes werkt dat iets anders. Daar kies je eerst voor Divi>Thema Opties>Integration
Ga maar het veld “Voeg code toe aan de < head > van uw blog” en voeg daar de bovenstaande code aan toe.
Wijzigingen opslaan.
Nu kan uw site de benodigde javascript laden en heeft de css styling “aan boord”.

Foto’s via Juxtapose gereed maken
Ga naar de site van Juxtapose.

Je hebt van te voren 2 foto’s klaar gemaakt. In dit voorbeeld 1 uit 1945 en hetzelfde gebouw in 2017. Van beiden moet je de URL weten. In dit voorbeeld:
https://www.voorbeeld.nl/1945.jpg en
https://www.voorbeeld.nl/2017.jpg

Op de site van Juxtapose is nu eigenlijk al wel duidelijk wat je moet doen maar … voor de volledigheid:

Bij 1 vul je de url naar de oude foto in
Bij 2 de URL naar de nieuwste foto
Bij 3 het jaartal van de oude foto, bij 4 jet jaartal van de nieuwe foto
Klik op (5) Preview
Klik op (6) Publish

Het volgende wordt dan zichtbaar. Alles in het witte vak is een iframe code die je (in de tekst mode) van een pagina of bericht kunt plaatsen. Copy / Paste en publiceren. Ga naar de pagina of bericht en schuif met de vertical balk.

Ga naar de pagina of bericht en schuif met de vertical balk. Een schitterend “toen en nu voorbeeld”