Camera - Utiliser des vignettes (thumbnails) -3-

→ Aller plus loin en utilisant des vignettes (thumbnails) -3-

Pour ce troisième exemple, ce sont les vignettes qui servent de boutons de pagination. Mais, ici, il y a plus d'images et donc apparition de boutons de navigation de ces miniatures. Attention ! Petit inconvénient : l'ensemble est moyennement responsive et ne s'adapte à la largeur de la page qu'après rafraichissement de celle-ci...

Comme pour les pages précédentes, 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 les miniatures (placées dans un dossier vgnt au même niveau que les images) et les images.

Attention ! Dans le cas du style et/ou du script au début du code source utiliser exclusivement l'éditeur de texte Whizziwig et éviter l'éditeur Popline.

La première partie entre les balises [style type="text/css"] 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_prev, .camera_next, .camera_commands { /* position boutons de navigation */
   top: 80%;
}
.camera_command_wrap { /* meme valeur que border pour ajuster les vignettes contre le slider */
    top: 3px;    
}
.camera_caption { /* texte */
    color: rgb(0, 0, 0);
    font-weight:bold;
}
.camera_caption a { /* lien texte */
    background-color:rgb(130, 130, 130);
    padding:0 5px;
    border-radius:6px;    
}
.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: center;
}
.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(0, 0, 0, 0.6);
}
.fluid_container { /* reglage max en largeur et % d'occupation */
    margin: 0 auto;
    max-width: 700px; /* valeur maximum du container de Camera */
    width: 70%;
}
</style>

La seconde partie entre les balises [script] et [/script] tient compte de la mise en place des vignettes (thumbnails) avec la variable false pour les boutons de pagination.


<script>
jQuery(function(){ /* initialisation camera_wrap_1 */
            jQuery('#camera_wrap_1').camera({
                thumbnails: true, /* true / false : présence de vignettes */
                height: '60%', /* ratio des images : H / L exprimé en % */
                pagination: false /* true / false : présence des boutons de pagination */
            });
        });
</script>

Et enfin, le code où vous souhaitez que le slider s'affiche :

NB : Toutes les images et les vignettes de ces tutoriels sont ici : test_camera.zip. Le dossier décompressé est à placer dans le dossier images d'adHoc... Ce n'est évidemment pas une obligation... ce sont juste des tests...


<div class="fluid_container">
<div class="camera_wrap camera_yellow_skin" id="camera_wrap_1">

<div src="images/test_camera/Image0009.jpg" data-thumb="images/test_camera/vgnt/Image0009.jpg">
<div class="camera_caption moveFromBottom">Image0009.jpg
</div>
</div>

<div src="images/test_camera/Image0010.jpg" data-thumb="images/test_camera/vgnt/Image0010.jpg">
<div class="camera_caption moveFromBottom">Image0010.jpg
</div>
</div>

<div src="images/test_camera/Image0011.jpg" data-thumb="images/test_camera/vgnt/Image0011.jpg">
<div class="camera_caption moveFromBottom">Image0011.jpg
</div>
</div>

<div src="images/test_camera/Image0012.jpg" data-thumb="images/test_camera/vgnt/Image0012.jpg">
<div class="camera_caption moveFromBottom">Image0012.jpg
</div>
</div>

<div src="images/test_camera/Image0013.jpg" data-thumb="images/test_camera/vgnt/Image0013.jpg">
<div class="camera_caption moveFromBottom">Image0013.jpg
</div>
</div>

<div src="images/test_camera/Image0014.jpg" data-thumb="images/test_camera/vgnt/Image0014.jpg">
<div class="camera_caption moveFromBottom">Image0014.jpg
</div>
</div>

<div src="images/test_camera/Image0015.jpg" data-thumb="images/test_camera/vgnt/Image0015.jpg">
<div class="camera_caption moveFromBottom">Image0015.jpg
</div>
</div>

<div src="images/test_camera/Image0016.jpg" data-thumb="images/test_camera/vgnt/Image0016.jpg">
<div class="camera_caption moveFromBottom">Image0016.jpg
</div>
</div>

<div src="images/test_camera/Image0017.jpg" data-thumb="images/test_camera/vgnt/Image0017.jpg">
<div class="camera_caption moveFromBottom">Image0017.jpg
</div>
</div>

<div src="images/test_camera/Image0018.jpg" data-thumb="images/test_camera/vgnt/Image0018.jpg">
<div class="camera_caption moveFromBottom">Image0018.jpg
</div>
</div>

<div src="images/test_camera/Image0019.jpg" data-thumb="images/test_camera/vgnt/Image0019.jpg">
<div class="camera_caption moveFromBottom">Image0019.jpg
</div>
</div>

<div src="images/test_camera/Image0020.jpg" data-thumb="images/test_camera/vgnt/Image0020.jpg">
<div class="camera_caption moveFromBottom">Image0020.jpg
</div>
</div>

<div src="images/test_camera/Image0021.jpg" data-thumb="images/test_camera/vgnt/Image0021.jpg">
<div class="camera_caption moveFromBottom">Image0021.jpg
</div>
</div>

<div src="images/test_camera/Image0022.jpg" data-thumb="images/test_camera/vgnt/Image0022.jpg">
<div class="camera_caption moveFromBottom">Image0022.jpg
</div>
</div>

<div src="images/test_camera/Image0023.jpg" data-thumb="images/test_camera/vgnt/Image0023.jpg">
<div class="camera_caption moveFromBottom">Image0023.jpg
</div>
</div>

<div src="images/test_camera/Image0024.jpg" data-thumb="images/test_camera/vgnt/Image0024.jpg">
<div class="camera_caption moveFromBottom">Image0024.jpg
</div>
</div>

<div src="images/test_camera/Image0025.jpg" data-thumb="images/test_camera/vgnt/Image0025.jpg">
<div class="camera_caption moveFromBottom">Image0025.jpg
</div>
</div>

<div src="images/test_camera/Image0026.jpg" data-thumb="images/test_camera/vgnt/Image0026.jpg">
<div class="camera_caption moveFromBottom">Image0026.jpg
</div>
</div>

<div src="images/test_camera/Image0027.jpg" data-thumb="images/test_camera/vgnt/Image0027.jpg">
<div class="camera_caption moveFromBottom">Image0027.jpg
</div>
</div>

<div src="images/test_camera/Image0028.jpg" data-thumb="images/test_camera/vgnt/Image0028.jpg">
<div class="camera_caption moveFromBottom">Image0028.jpg
</div>
</div>

</div>
</div>

Notez la façon dont les vignettes (thumbnails) sont appelées : data-thumb=''...''

Attention ! Les éditeurs de textes dans adHoc ne gèrent pas les appels de ce type, il faudra donc revenir au code source après l'enregistrement afin de compléter le chemin des vignettes en y ajoutant l'URL de votre site... (par exemple pour ce présent site j'ai ajouté //adhoc.71site.fr/ avant le chemin des vignettes). C'est une vraie contrainte... j'en suis hélas, bien conscient...

Voir ci-dessous le rendu : les vignettes servent de boutons de pagination.

Image0009.jpg
Image0010.jpg
Image0011.jpg
Image0012.jpg
Image0013.jpg
Image0014.jpg
Image0015.jpg
Image0016.jpg
Image0017.jpg
Image0018.jpg
Image0019.jpg
Image0020.jpg
Image0021.jpg
Image0022.jpg
Image0023.jpg
Image0024.jpg
Image0025.jpg
Image0026.jpg
Image0027.jpg
Image0028.jpg

-----=====+++++=====-----

Me contacter pour toute aide ou information supplémentaire.


Index |Info | Imprimer | Permalien
Astuces

adHoc

Iframes responsives

Camera

Unite Gallery

Animations au survol

Autres astuces en CSS

Audio-Players

Carousels