🖼️ p-d.js

Démonstration et documentation

Télécharger le fichier .js

Usage

1. Lier le fichier .js à une page en ajoutant à la fin de celle-ci la ligne suivante <script src="path/to/p-d.js"></script>.
2. Créer un paragraphe <p> avec l'attribut de donnée data-diaporama.
3. Insérer des images à l'intérieur de ce paragraphe. Le diaporama va se créer automatiquement.
4. Quelques options de configuration sont disponibles, voir les exemples ci-dessous. Le style peut également être librement modifié en CSS. Par défaut, le diaporama prend la largeur de son élément parent.

Redimensionnement : taille réelle (par défaut)

            <p
               data-diaporama
               style="border:10px red solid;"
            >
                <img src="test-fichiers/img/eiermann.jpg">
                <img src="test-fichiers/img/paxarq.jpg">
                <img src="test-fichiers/img/ronald.gif">
                <img src="test-fichiers/img/patio.png">
                <img src="test-fichiers/img/notepad.gif">
            </p>
        

Redimensionnement : contain

            <p
               data-diaporama
               data-diaporama-contain
               style="border:10px red solid;"
            >
                <img src="test-fichiers/img/eiermann.jpg">
                <img src="test-fichiers/img/paxarq.jpg">
                <img src="test-fichiers/img/ronald.gif">
                <img src="test-fichiers/img/patio.png">
                <img src="test-fichiers/img/notepad.gif">
            </p>
        

Redimensionnement : cover

            <p
               data-diaporama
               data-diaporama-cover
               style="border:10px red solid;"
            >
                <img src="test-fichiers/img/eiermann.jpg">
                <img src="test-fichiers/img/paxarq.jpg">
                <img src="test-fichiers/img/ronald.gif">
                <img src="test-fichiers/img/patio.png">
                <img src="test-fichiers/img/notepad.gif">
            </p>
        

Proporitions (aspect-ratio) personnalisé

            <p
               data-diaporama
               data-diaporama-aspect-ratio = "0.2"
               style="border:10px red solid;"
            >
                <img src="test-fichiers/img/eiermann.jpg">
                <img src="test-fichiers/img/paxarq.jpg">
                <img src="test-fichiers/img/ronald.gif">
                <img src="test-fichiers/img/patio.png">
                <img src="test-fichiers/img/notepad.gif">
            </p>
        

Dimensions du conteneur : largeur forcée

            <p
               data-diaporama
               style="border:10px red solid; width: 300px;"
            >
                <img src="test-fichiers/img/eiermann.jpg">
                <img src="test-fichiers/img/paxarq.jpg">
                <img src="test-fichiers/img/ronald.gif">
                <img src="test-fichiers/img/patio.png">
                <img src="test-fichiers/img/notepad.gif">
            </p>
        

Dimension du conteneur : hauteur forcée

            <p
               data-diaporama
               style="border:10px red solid; height: 300px;"
            >
                <img src="test-fichiers/img/eiermann.jpg">
                <img src="test-fichiers/img/paxarq.jpg">
                <img src="test-fichiers/img/ronald.gif">
                <img src="test-fichiers/img/patio.png">
                <img src="test-fichiers/img/notepad.gif">
            </p>
        

Contrôleur : flèches

            <p
               data-diaporama
               data-diaporama-controller-arrows
               style="border:10px red solid;"
            >
                <img src="test-fichiers/img/eiermann.jpg">
                <img src="test-fichiers/img/paxarq.jpg">
                <img src="test-fichiers/img/ronald.gif">
                <img src="test-fichiers/img/patio.png">
                <img src="test-fichiers/img/notepad.gif">
            </p>
        

Contrôleur : échelle

            <p
               data-diaporama
               data-diaporama-controller-scale = "1" //[0;1], 0.2 default value
               style="border:10px red solid;"
            >
                <img src="test-fichiers/img/eiermann.jpg">
                <img src="test-fichiers/img/paxarq.jpg">
                <img src="test-fichiers/img/ronald.gif">
                <img src="test-fichiers/img/patio.png">
                <img src="test-fichiers/img/notepad.gif">
            </p>