Modifier un diaporama - 2

Objectifs (rappel)

  1. Modifier le style des titres durant le diaporama
  2. Le titre des photos n'apparait sous l'image qu'au passage de la souris sur l'image, sans cliquer

1. Décider de l'effet à obtenir

Prenons l'exemple d'une galerie en grille carrée, qui s'ouvre en slider, sur fond sombre.

Le titre de chaque image doit apparaitre (en diaporama) sur deux lignes.

Propriétés à contrôler : Police, taille(s), couleur, alignement, arrière-plan, espace entre les deux lignes.

Le choix de design est contrasté afin de mettre le résultat en évidence.

Pour écrire le code décrivant les propriétés, on peut utiliser des "générateur de code", comme http://csstxt.com/

Il est souvent plus simple d'inspecter le code de son site et de copier des propriétés correspondant à un texte préalablement mis en style avec l'editeur de jimdo. Pour apprendre  à inspecter le code voir mon tuto sur le forum France, où contactez-moi pour une leçon guidée.

Nouvelles propriétés des titres :

    font-family: "Inconsolata",sans-serif,"google";
    text-align: center;
    color: rgba(255, 254, 128, 0.82);
    background-color: #fff6;
    line-height: 2;
    padding: 0.2em 0.5em;
    letter-spacing: 0.1em;



2. Marquer les titres d'une classe

Comme on a deux styles pour les titres, il faut "donner un nom" à  chacun d'eux et l'indiquer dans le code de chaque titre.

Ceci est à placer dans les titres de chaque image, en modifiant bien entendu les parties légendes :

<span class="grotitre">GrosTitre</span><br />
<span class="petitre">Petit titre</span>

 

3. écrire les règles

Chaque classe va être décrite dans le "Modifier le Head", ce qui l'ajoutera aux feuilles de style du site.

Lorsque je veux appeler la class, je la note avec un point devant :
.grotitre

puis, je décris ses propriétés (entre accolades) :

{

    font-family: "Inconsolata",sans-serif,"google";
    text-align: center;
    color: rgba(255, 254, 128, 0.82);
    background-color: #fff6;
    line-height: 2;
    padding: 0.2em 0.5em;
    letter-spacing: 0.1em;

}

L'ensemble constitue une "règle"

Pour simplifier l'écriture des deux règles, on peut combiner les class :

.grotitre, .petitre { font-family: "Inconsolata",sans-serif,"google";
    text-align: center;    color: rgba(255, 254, 128, 0.82);
    background-color: #fff6;    line-height: 2;
    padding: 0.2em 0.5em;    letter-spacing: 0.1em; }

.grotitre {font-size: 30px; }

.petitre {font-size: 20px;}

4. Créer la feuille de style

Ceci est à placer dans "Modifier le Head" en l'encadrant des balises qui indiquent une feuille de style :

<style type="text/css">

/*<![CDATA[*/

.grotitre, .petitre {

    font-family: "Inconsolata",sans-serif,"google";
    text-align: center;
    color: rgba(255, 254, 128, 0.82);
    background-color: #fff6;
    line-height: 2;
    padding: 0.2em 0.5em;
    letter-spacing: 0.1em;

}

.grotitre {font-size: 30px; }

.petitre {font-size: 20px;}

/*]]>*/

</style>

En mode visiteur, le résultat est contrôlé. L'exemple n'est pas esthétique, juste illustratif des propriétés souvent modifiées.



5. Afficher le titre au survol

(diapo. agrandi)

Il faut d'abord masquer le titre par défaut. La propriété à modifier est l'opacité. il suffit de rajouter sa nouvelle valeur aux règles déjà rédigées : opacity:0;

Ce qui va déclencher le retour à une opacité "normale", c'est le survol de l'image. Il faut identifier un élément qui est superposé à l'image, et qui contient aussi le titre parmi ses éléments "enfants".

En inspectant le code, on détermine cet élément "parent"

Les éléments sont identifiés par leur class.
L'élément parent :

.pswp__scroll-wrap

On indique qu'il est survolé :

:hover

On ajoute la class de l'élément enfant qui sera modifié lors du survol

.pswp__caption
Et cela s'écrit en deux règles, d'abord l'opacité par défaut, puis l'opacité au survol (les espaces doivent être respectés dans le code)
.pswp__caption {opacity: 0;}
.pswp__scroll-wrap:hover .pswp__caption {opacity: 1;}

Une fois ces lignes rajoutées au "modifier le Head", toujours entre les balises de déclaration de CSS, on obtient le comportement désiré. à tester sur cette galerie :

Remarque : Pour des raisons de responsivité, l'élément qui déclenche l'apparition du titre occupe toute la fenêtre navigateur. Aussi le titre sera toujours visible en lecture plein écran, la souris survolant toujours cet élément.

Pour que le titre disparaisse "plus souvent", on peut changer l'élément déclencheur pour celui qui contient l'image. Mais dans ce cas, il faudra aussi écrire un code javascript qui créé un évènement déclencheur, car le titre n'est pas enfant de l'image.