Modifier le dispositif

Le petit dispositif galerie/screencomics se compose de plusieurs fichiers :

    /fonts
    /imgs
    index.html
    script.js
    style.css

Pour adapter le tout à votre projet il nous faudra modifier quelques fichiers.

1. Charger les images

Pour commencer, il suffit de copier vos images de le dossier /imgs
Pensez à nommer vos fichiers suivant cette convention :

    /imgs
        1.jpg
        2.jpg
        3.gif
        4.jpg
        5.gif
        ...

2. Adapter le html

Pour modifier le contenu de la page web nous allons modifier le fichier index.html. Ouvrez-le avec un logiciel d'édition de texte du type TextEdit (MacOS), Gedit (Linux), Bloc Note (Windows), …
Il va y avoir plusieurs choses à modifier dans ce fichier.

infos

Vous pouvez commencer par adapter le contenu de la page d'accueil.

Remplacez Titre dans <h1>Titre</h1> par votre titre.
Faites de même pour prénom, nom, ainsi que l'adresse du site si vous en avez un.

référence des images

À l'intérieur de la balise <div id="images"> … </div> (en fin de fichier) se trouve une série de balise <img/> qu'il va falloir adapter à votre série d'images.

Vous est fourni ci-après une série de balises déjà écrites allant jusqu'à 40.
Copiez le nombre de lignes nécessaire et collez-les à l'intérieur de la balise <div id="images"> … </div>. Changez si besoin l'extension .jpg du chemin de fichier si certaines de vos images sont dans un autre format.

/!\ Attention, certains logiciel d'édition de textes ont tendance à automatiquement transformer le caractère " en guillemet française.

    <img src="imgs/1.jpg"/>
    <img src="imgs/2.jpg"/>
    <img src="imgs/3.jpg"/>
    <img src="imgs/4.jpg"/>
    <img src="imgs/5.jpg"/>
    <img src="imgs/6.jpg"/>
    <img src="imgs/7.jpg"/>
    <img src="imgs/8.jpg"/>
    <img src="imgs/9.jpg"/>
    <img src="imgs/10.jpg"/>
    <img src="imgs/11.jpg"/>
    <img src="imgs/12.jpg"/>
    <img src="imgs/13.jpg"/>
    <img src="imgs/14.jpg"/>
    <img src="imgs/15.jpg"/>
    <img src="imgs/16.jpg"/>
    <img src="imgs/17.jpg"/>
    <img src="imgs/18.jpg"/>
    <img src="imgs/19.jpg"/>
    <img src="imgs/20.jpg"/>
    <img src="imgs/21.jpg"/>
    <img src="imgs/22.jpg"/>
    <img src="imgs/23.jpg"/>
    <img src="imgs/24.jpg"/>
    <img src="imgs/25.jpg"/>
    <img src="imgs/26.jpg"/>
    <img src="imgs/27.jpg"/>
    <img src="imgs/28.jpg"/>
    <img src="imgs/29.jpg"/>
    <img src="imgs/30.jpg"/>
    <img src="imgs/31.jpg"/>
    <img src="imgs/32.jpg"/>
    <img src="imgs/33.jpg"/>
    <img src="imgs/34.jpg"/>
    <img src="imgs/35.jpg"/>
    <img src="imgs/36.jpg"/>
    <img src="imgs/37.jpg"/>
    <img src="imgs/38.jpg"/>
    <img src="imgs/39.jpg"/>
    <img src="imgs/40.jpg"/>
    <img src="imgs/41.jpg"/>
    <img src="imgs/42.jpg"/>
    <img src="imgs/43.jpg"/>
    <img src="imgs/44.jpg"/>
    <img src="imgs/45.jpg"/>
    <img src="imgs/46.jpg"/>
    <img src="imgs/47.jpg"/>
    <img src="imgs/48.jpg"/>

3. Changez les couleurs au besoin

Si tout se passe bien, vous pouvez déjà tester votre code en lançant le fichier index.html avec un navigateur (Firefox, Chromium ou Chrome de préférence)

Il est possible de changer rapidement les quelques couleurs de la page.

Ouvrez le fichier style.css avec votre logiciel d'édition de texte. Au tout début du fichier vous pouvez voir :

    :root{
        --main-color: blue;
        --bg-color: white;
        --typo-color: black;
        --nav-color: white;
        --line-color: black;
    }

Vous est indiqué à côté à quoi correspond ces couleurs. Vous pouvez changer ces couleurs en remplaçant blue par #1C1C1C par exemple. Ces codes de couleurs peuvent être récupérés sur n'importe quel logiciel de retouche d'image ou sur internet (recherchez ‘color picker’)