adHoc.71site.fr Slider Camera

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

adHoc.71site.fr

Camera - Utiliser des vignettes (thumbnails) -3-

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

Les 10 derniers articles