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" >
Dans ce premier script, les miniatures apparaissent lorsque l'on passe le souris sur les boutons de pagination. C'est la solution que je préfère...
thumbnails: true
pagination: true
<script>
jQuery(function(){ /* initialisation camera_wrap_1 */
jQuery('#camera_wrap_1').camera({
thumbnails: true, /* true / false : présence de vignettes */
height: '25%', /* ratio des images : H / L exprimé en % */
pagination: true /* true / false : présence des boutons de pagination */
});
});
</script>
<div class="fluid_container">
<div class="camera_wrap camera_white_skin" id="camera_wrap_1">
<div data-src="photo/test_camera/Image0005.jpg" data-thumb="photo/test_camera/vgnt/Image0005.jpg" >
<div class="camera_caption fadeFromLeft">une image</div>
</div>
<div data-src="photo/test_camera/Image0006.jpg" data-thumb="photo/test_camera/vgnt/Image0006.jpg" >
<div class="camera_caption fadeFromRight">encore une image</div>
</div>
<div data-src="photo/test_camera/Image0007.jpg" data-thumb="photo/test_camera/vgnt/Image0007.jpg" >
<div class="camera_caption fadeFromTop">toujours une image...</div>
</div>
<div data-src="photo/test_camera/Image0008.jpg" data-thumb="photo/test_camera/vgnt/Image0008.jpg" >
<div class="camera_caption fadeFromBottom">que d'images !</div>
</div>
</div>
</div>
Catégorie : Astuces - Camera
Page lue 75551 fois