adHoc.71site.fr

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

Pour ce deuxième exemple, ce sont les vignettes qui servent de boutons de pagination.

Comme pour la page précédente, 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: 10%;
}
.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(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: 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.

Notez une variante pour le loader : ici une barre horizontale haute.

<script>
jQuery(function(){ /* initialisation camera_wrap_1 */
            jQuery('#camera_wrap_1').camera({
                loader: 'bar', /* bar ou pie : type de loader */
                barPosition: 'top', /* position du loader si celui-ci est bar */
                thumbnails: true, /* true / false : présence de vignettes */
                height: '75%', /* 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_tangerine_skin" id="camera_wrap_1">

<div src="images/test_camera/Image0001.jpg" data-thumb="images/test_camera/vgnt/Image0001.jpg">
<div class="camera_caption fadeFromLeft">une image
</div>
</div>

<div src="images/test_camera/Image0002.jpg" data-thumb="images/test_camera/vgnt/Image0002.jpg">
<div class="camera_caption fadeFromRight">encore une image
</div>
</div>

<div src="images/test_camera/Image0003.jpg" data-thumb="images/test_camera/vgnt/Image0003.jpg">
<div class="camera_caption fadeFromTop">toujours une image...
</div>
</div>

<div src="images/test_camera/Image0004.jpg" data-thumb="images/test_camera/vgnt/Image0004.jpg">
<div class="camera_caption fadeFromBottom">que d'images !
</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.

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

Me contacter pour toute aide ou information supplémentaire.