ARNO*

Geek dilettante habitant une belle et grande propriété sur la Côte d’améthyste

  • Grosse nouveauté dans mon #plugin #SPIP Insertion avancée d’images :
    https://zone.spip.org/trac/spip-zone/browser/_plugins_/medias_responsive_mod

    Outre le raccourci <imgXXX> et ses tripotées de variables (zoom, habillage automatique, image dans un rond, « flip »…), il y avait donc le raccourci <ligneXXX> pour placer plusieurs images l’une à côté de l’autre, éventuellement sur plusieurs lignes bien alignées, en fonction des dimensions des images et de l’écran.

    Il y a désormais un raccourci super-méga-trop-la-classe : <slideXXX>, qui fabrique automatiquement un slider horizontal quand on en met plusieurs à la suite. Par exemple :

    <slide970>
    <slide971>
    <slide972>

    provoque l’affichage suivant :

    Je suis très content, c’est totalement responsive, multilingue (même en direction rtl) et ça fonctionne entièrement sans Javascript. (Attention, limitation : on ne peut mettre que 8 images à la suite.)

    L’intérêt c’est de mettre ces petits spiders (idéalement 2 ou 3 images pas plus) directement dans le corps du texte, et donc d’en mettre plusieurs dans différents endroits du texte si on veut.

    Pour la suite (cette semaine j’espère), j’ajouterai un petit script pour gérer le swipe du doigt pour faire défiler les images sur écran tactile.

    • Et je viens d’ajouter le javascript qui gère le swipe gauche-droite sur écran tactile, pour faire défiler horizontalement le slider. Du coup je passe en translate3d pour que l’animation soit plus fluide. (D’après caniuse, désormais translate3d a grosso modo le même taux de compatibilité que translate.)