Galerie Photos CSS3

Sous WordPress, pour créer une galerie de photos avec un effet "lightbox" sans utiliser de plugin, il existe une alternative à Javascript: le CSS3.

On utilise notamment la pseudo-class "target" et les transitions css.

Galerie sans plugin et CSS3

Sommaire

Présentation

La très jolie démonstration de Mary Lou, trouvée sur tympanus, est séduisante. Après adaptation du CSS au design de Tarabistouilles, le résultat est vraiment surprenant, et la comparaison avec la version FancyBox vaut le détour.

Une galerie en CSS3

Seul petit défaut: la galerie ne détecte pas la dernière image, il n'y a pas d'arrêt automatique, les deux flèches de direction sont toujours présentes.

Une seconde galerie en CSS3

Grâce à l'utilisation d'un index, la seconde galerie est bien séparée de la première...

Installation

css3 lignhtbox

Le code source de Mary Lou est à télécharger sur tympanus. Mary Lou présente trois versions de son LightBox made in CSS3. Tarabistouilles a retenu la version 3 qui fonctionne avec un système de navigation entre images. Il suffit donc de créer, à la racine du thème WordPress utilisé, un répertoire dédié à la galerie CSS3, d'y installer un répertoire CSS avec le fichier style3.css, et un répertoire pour les images.

Il ne reste qu'à demander à WordPress de charger le fichier css, grâce à une ligne de php ajouté dans le fichier functions.php:

//Il faut charger le fichier style3.css de css3lightbox

wp_enqueue_style( 'childfifteen-css3lightbox', '/wp-content/themes/childfifteen/css3lightbox/css/style3.css');

Le code HTML de la galerie est à récupérer dans le fichier index3.html téléchargé, il suffit dès lors de le personnaliser.

Le code HTML personnalisé pour les besoins de Tarabistouilles

<!-- /* Code inspiré de celui de Mary Lou sur http://tympanus.net/codrops/2011/12/26/css3-lightbox/-->
         
<div id="galerie1" class="cssgal"><!-- ancre et conteneur de la galerie  
                                                           avec index propre à chaque galerie-->
  <ul class="lb-album">
    <li>
        <a href="#gal-1-image-1"><!----lien de la vignette vers le conteneur "lightbox" de la 1ère image-->
          <img class="gal" width="120" height="90" alt="image01" src="wp-content/imagesgalleries/galcss3/thumbs/picture1-th.jpg">
        </a>
        <div id="gal-1-image-1" class="lb-overlay"><!--ancre de la 1ère image, background opaque-->
            <img alt="image01" src="wp-content/imagesgalleries/galcss3/picture1.jpg">
            <div>
                <h3>Titre de la 1ère image</h3><!--titre de l'image grand format-->
                <a class="lb-prev" href="#gal-1-image-4">Prev</a><!--lien vers image précédente-->
                <a class="lb-next" href="#gal-1-image-2">Next</a><!--lien vers image suivante-->
           </div>
            <a class="lb-close nolink" href="#galerie1">x Close</a>
                  <!--lien vers l'ancre de la galerie: fermeture-->
        </div>
    </li>
    <li>
        <a href="#gal-1-image-2">
          <img class="gal" width="120" height="90" alt="image02" src="wp-content/imagesgalleries/galcss3/thumbs/picture2-th.jpg">
        </a>
        <div id="gal-1-image-2" class="lb-overlay">
            <img alt="image02" src="wp-content/imagesgalleries/galcss3/picture2.jpg">
            <div>
                <h3>Titre de la 2ème image</h3>
                <a class="lb-prev" href="#gal-1-image-1">Prev</a>
                <a class="lb-next" href="#gal-1-image-3">Next</a>
           </div>
            <a class="lb-close nolink" href="#galerie1">x Close</a>
        </div>
    </li>
    <li>
        <a href="#gal-1-image-3">
          <img class="gal" width="120" height="90" alt="image03" src="wp-content/imagesgalleries/galcss3/thumbs/picture3-th.jpg">
        </a>
        <div id="gal-1-image-3" class="lb-overlay">
            <img alt="image03" src="wp-content/imagesgalleries/galcss3/picture3.jpg">
            <div>
                <h3>Titre de la 3ème image</h3>
                <a class="lb-prev" href="#gal-1-image-2">Prev</a>
                <a class="lb-next" href="#gal-1-image-4">Next</a>
           </div>
            <a class="lb-close nolink" href="#galerie1">x Close</a>
        </div>
    </li>
     <li>
        <a href="#gal-1-image-4">
          <img class="gal" width="120" height="90" alt="image04" src="wp-content/imagesgalleries/galcss3/thumbs/picture4-th.jpg">
        </a>
        <div id="gal-1-image-4" class="lb-overlay">
            <img alt="image04" src="wp-content/imagesgalleries/galcss3/picture4.jpg">
            <div>
                <h3>Titre de la 4ème image</h3>
                <a class="lb-prev" href="#gal-1-image-3">Prev</a>
                <a class="lb-next" href="#gal-1-image-1">Next</a>
           </div>
            <a class="lb-close nolink" href="#galerie1">x Close</a>
        </div>
    </li>
  </ul>
</div>

Il s'agit d'afficher des images au format vignette et de déclencher au click sur celles-ci l'affichage de l'image grand format avec, en plus, un effet "lightbox", c'est à dire avec un arrière-plan partiellement opaque. Pour cela nous allons utiliser une liste non ordonnée dont chaque élément contiendra:

  • la vignette liée par une ancre au conteneur de l'image grand format
  • ce conteneur, à savoir, une balise "div", à l'arrière-plan opaque (class="lb-overlay"), contient:
    • l'image grand format
    • le titre de l'image grand format
    • Pour passer d'une image à l'autre, on ajoute deux liens ancrés, pointant respectivement vers l'image grand format précédente et suivante
    • Un dernier lien ancré est ajouté afin de quitter la "ligntbox", il pointe vers le conteneur de la galerie, elle-même identifiée par un index.

Le code CSS

/* Code css de Mary Lou sur http://tympanus.net/codrops/2011/12/26/css3-lightbox/*/
/* Ce code est à personnaliser éventuellement...*/

.lb-album{/*liste non ordonnée, conteneur vignettes*/
        width: 900px;
        margin: 0 auto;
        font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
.lb-album li{/*vignette*/
        float: left;
        margin: 5px;
        position: relative;
}
.lb-album li > a,
.lb-album li > a img{
        display: block;
}
.lb-album li > a{
        width: 150px;
        height: 150px;
        position: relative;
        padding: 10px;
        background: #f1d2c2;
        -webkit-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
        -moz-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
        box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px 4px 4px 4px;
}
.lb-album li > a span{
        position: absolute;
        width: 150px;
        height: 150px;
        top: 10px;
        left: 10px;
        text-align: center;
        line-height: 150px;
        color: rgba(27,54,81,0.8);
        text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
        font-size: 24px;
        opacity: 0;
        filter: alpha(opacity=0); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
        background: rgb(241,210,194);
        background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
        background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
        background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
        background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
        background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
        -webkit-transition: opacity 0.3s linear;
        -moz-transition: opacity 0.3s linear;
        -o-transition: opacity 0.3s linear;
        -ms-transition: opacity 0.3s linear;
        transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
        opacity: 1;
        filter: alpha(opacity=99); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-overlay{/* Conteneur lightbox au démarrage*/
        width: 0px;
        height: 0px;
        position: fixed;
        overflow: hidden;
        left: 0px;
        top: 0px;
        padding: 0px;
        z-index: 99;
        text-align: center;
        background: rgb(241,210,194);
        background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
        background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
        background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
        background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
        background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
}
.lb-overlay > div{/*contient titre et navigation*/
        position: relative;
        color: rgba(27,54,81,0.8);
        width: 550px;
        height: 80px;
        margin: 40px auto 0px auto;
        text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
}
.lb-overlay div h3,
.lb-overlay div p{
        padding: 0px 20px;
        width: 200px;
        height: 60px;
}
.lb-overlay div h3{/*titre image grand format*/
        font-size: 36px;
        float: left;
        text-align: right;
        border-right: 1px solid rgba(27,54,81,0.4);
}
.lb-overlay div h3 span,
.lb-overlay div p{
        /*font-size: 16px;
        font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;*/

        font-style: italic;
}
.lb-overlay div h3 span{
        display: block;
        line-height: 6px;
}
.lb-overlay div p{
        font-size: 14px;
        text-align: left;
        float: left;
        width: 260px;
}
.lb-overlay a.lb-close{/*fermeture  lightbox*/
        background: rgba(27,54,81,0.8);
        z-index: 1001;
        color: #fff;
        position: absolute;
        top: 43px;
        left: 50%;
        font-size: 15px;
        line-height: 26px;
        text-align: center;
        width: 50px;
        height: 23px;
        overflow: hidden;
        margin-left: -25px;
        opacity: 0;
        filter: alpha(opacity=0); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
        -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
        box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}
.lb-overlay img{/*image grand format avec transition css*/
        /* height: 100%; For Opera max-height does not seem to work */
        max-height: 100%;
        position: relative;
        opacity: 0;
        filter: alpha(opacity=0); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
        -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
        -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
        box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
        -webkit-transition: opacity 0.5s linear;
        -moz-transition: opacity 0.5s linear;
        -o-transition: opacity 0.5s linear;
        -ms-transition: opacity 0.5s linear;
        transition: opacity 0.5s linear;
}
.lb-prev, .lb-next{/*navigation*/
        text-indent: -9000px;
        position: absolute;
        top: -32px;
        width: 24px;
        height: 25px;
        left: 50%;
        opacity: 0.8;
        filter: alpha(opacity=80); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; /*IE8*/
}
.lb-prev:hover, .lb-next:hover{
        opacity: 1;
        filter: alpha(opacity=99); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-prev{
        margin-left: -30px;
        background: transparent url(../images/arrows.png) no-repeat top left;
}
.lb-next{
        margin-left: 6px;
        background: transparent url(../images/arrows.png) no-repeat top right;
}
.lb-overlay:target {/*ouverture de la lightbox, background opaque*/
        width: auto;
        height: auto;
        bottom: 0px;
        right: 0px;
        padding: 80px 100px 120px 100px;
}
.lb-overlay:target img,
.lb-overlay:target a.lb-close{
        opacity: 1;
        filter: alpha(opacity=99); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
/*
        100% Height for Opera as the max-height seems to be ignored, not optimal for large screens
        http://bricss.net/post/11230266445/css-hack-to-target-opera
*/

x:-o-prefocus, .lb-overlay img {
    height: 100%;
}

Au démarrage, le conteneur "lightbox" de class "lb-overlay" est de dimension nulle. Lorsqu'on click sur une vignette et donc sur son lien ancré, la pseudo-class CSS3 "target" permet au conteneur "lightbox" de recouvrir tout l'écran et de contenir l'image grand format. Lors de la navigation, grâce à l'utilisation d'une "transition CSS3", les images se succéderont en fondu enchaîné.


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*
*
Site web