Camera et vignettes page 1

Aller plus loin... En utilisant des vignettes (thumbnails), page 1.

Dans les parties qui suivent, on utilise les vignettes pour aider à la pagination. Il faut donc créer des miniatures de même ratio et les mettre dans un dossier particulier. Dans les exemples qui suivent, j'ai nommé de la même manière miniatures (placées dans un dossier vgnt au même niveau que les images) et images, afin d'approcher le fonctionnement originel de GuppY, ce qui permet d'utiliser les galeries photos et leurs miniatures (le zip test_camera est à jour, il peut être utilisé).

La première partie entre les balises <style> et </style> est un peu augmentée pour régler ces vignettes, elle est commentée pour vous aider à régler le style.

<style type="text/css">
.camera_wrap { /* bordure : epaisseur, nature, couleur, arrondi */
    border: 3px solid rgb(255, 85, 0);
    border-radius: 3px;    
}
.camera_command_wrap { /* meme valeur que border pour ajuster les vignettes contre le slider */
    top: 3px;    
}
.camera_caption { /* couleur du texte */
    color: rgb(0, 0, 0);
}
.camera_caption > div { /* couleur du fond de texte et transparence */
    background: rgba(255, 255, 255, 0.8);
}
.camera_wrap .camera_pag .camera_pag_ul { /* position des boutons de pagination */
    text-align: left;
}
.camera_thumbs_cont {    /* couleur du fond des vignettes et transparence */
    background: rgba(216, 216, 216, 0.0);
}
.camera_prevThumbs, .camera_nextThumbs { /* boutons de navigation des vignettes */
    top: 15px;
    bottom: 15px;
    visibility: visible;    /* remplacer visible par hidden pour les masquer */
}
.camera_prevThumbs, .camera_nextThumbs, .camera_prev, .camera_next, .camera_commands  { /* couleur de fond des boutons de navigation */
    background: rgba(128, 128, 128, 0.6);
}
.fluid_container { /* reglage max en largeur et % d'occupation */
    margin: 0 auto;
    max-width: 800px; /* valeur maximum du container de Camera */
    width: 96%;
}
</style>

L'intégration des miniatures est très simple, voir l'exemple ci-dessous, elle est dans le div qui contient l'image sous la forme (en respectant le chemin des miniatures) :

<div data-src="photo/test_camera/Image0005.jpg" data-thumb="photo/test_camera/vgnt/Image0005.jpg" >