1

Est-ce qu’il y a des créateurs de contenu dans l’assemblée ? Allez, ne soyez pas timide et levez la main. J’en vois quelques-uns. Tant mieux, car c’est à vous que je vais parler aujourd’hui. Combien d’entre vous ont voulu intégrer des images dans un article pour pouvoir comparer des paysages ou des situations ? JuxtaposeJS est un petit programme Javascript en ligne qui va vous permettre  de créer un slider pour pouvoir comparer vos images. Explications.

Pour bien commencer, il vous faut donc des images à comparer, mais bon, à ce niveau-là et si vous voulez utiliser ce programme, je pense que vous avez ce qu’il faut. Ensuite, il faut vous rendre sur JuxtaposeJS (projet de l’Université de Northwestern dans l’Illinois). Tout y est expliqué et vraiment facile d’accès. À vous de choisir votre première image (en y ajoutant label et crédit si besoin), pareil pour votre deuxième photo et c’est presque fini ! La création de votre slider se fait sur le site, il n’y a donc rien à charger ou installer.

Exemple d'upload

Capture d’écran du module d’upload de photos – Crédit : knightlab.northwestern.edu

 

En cliquant sur le bouton « Publish », un code iframe est généré. Cet iframe peut avoir une largeur absolue ou bien de 100% pour assurer une compatibilité avec les sites en responsive web design. Une fois collé sur votre site ou votre blog, le code JuxtaposeJS fait le boulot. JuxtaposeJS fonctionne avec la plupart des formats photos mais aussi avec les GIFs.

C’est gratuit, ça marche sur la majorité des navigateurs y compris sur les smartphones et tablettes. Cerise sur le gâteau, vous pouvez directement forker le projet sur le GitHub de Knight Lab et proposer vos améliorations à la communauté.

Pour voir vraiment ce que le programme donne dans des articles, je me permets de vous adresser quelques liens, en commençant par Twitter avec le hashtag #JuxtaposeJS mais aussi directement sur le site de JuxtaposeJS avec notamment des comparaisons de Berlin d’après guerre et de nos jours.

Alors, vous adoptez JuxtaposeJS vous aussi ?

Source / référence :

Site officiel JuxtaposeJS

Chriskelso