🖼️ 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>