carrousel

carrousel

En regardant des modèles de montage, sur le net, je revois un montages que j'utilise peu alors, j'y reviens.

Il s'agit d'une série de photos que l'on fait apparaître en cliquant sur des boutons.

Les unités que j'utilise sont des unités Viewport qui s'adaptent aux dimensions de l'écran de lecture, plus générales que les %.

width:60vw; correspondent à 60% de la largeur de l'écran de lecture; height:33.75vw; correspondent à 33.75% de la hauteur de l'écran de lecture en conservant le ratio 16/9 de mes images.

La taille des photos de mon appareil photo sonr 1920px par 1080px; je les héberge sur Ekla ainsi et les redimensionne par l'ajout d'un code dans leur adresse.

Mon écran étant en 1920x1080px, 60vw=60%=1152px en largeur et 33.75vw=33.75%=648px.

Pour les dimensionner en 1152x648px, j'écris leur adresse:

http://ekladata.com/nhV7SrEgSxZzJZn7cTVjzkod1O4.jpg = adresse sur Ekla en 1920x1080px

http://ekladata.com/nhV7SrEgSxZzJZn7cTVjzkod1O4@1152x648.jpg = adresse de mon image en 1152x648px avec le poids coeespondant.

*****

J'aligne les images dans un paragraphe assez large pour les contenir et je vais déplacer ce paragraphe pour faire apparaître l'une ou l'autre des images ,dans les cadre du montage.

Un clic sur un bouton déplacera le paragraphe pour faire apparaître l'image choisie.

Cette façon de faire est assez lourde car le programme doit faire autant de requêtes que d'images; une autre technique est de rassembler les images en une seule, ce qui ne demandera qu'un requête auprès du serveur.

...mais ceci est une autre histoire (Rudyard Kipling).

*****

Le cadre du montage, au ratio 16/9 fait 1152px par 648px sur mon écran et un % sur le votre.

Ce qui déborde du cadre est caché: overflow:hidden;

Les boutons (pos1 à pos 7) sont positionnés et commandent chacun une position différente du paragraphe (car).

Ne me demandez pas pourquoi des valeurs bizarres selon les éditeur html ! FF et Chrome affichent les translations de façon correcte mais Opera décale les images; j'ignore ce qui se passe sous MAC !

De plus, pas de surlignage dans l'éditeur html de Opera: dommage !

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.4vh ridge grey; text-align: left; overflow: hidden;"><input id="pos1" class="pos" type="button" /> <input id="pos2" class="pos" type="button" /> <input id="pos3" class="pos" type="button" /> <input id="pos4" class="pos" type="button" /> <input id="pos5" class="pos" type="button" /> <input id="pos6" class="pos" type="button" /> <input id="pos7" class="pos" type="button" />

<p id="car"><img src="http://ekladata.com/nhV7SrEgSxZzJZn7cTVjzkod1O4@1152x648.jpg" alt="" /> <img src="http://ekladata.com/v4f3HfS0NWT25ZJ_ND-sxW7EXiQ@1152x648.jpg" alt="" /> <img src="http://ekladata.com/H1FZAtdOH1tB2oAkztvdrpBGuFY@1152x648.jpg" alt="" /> <img src="http://ekladata.com/epWtM0sr3gqpJD2DQ-02crAsjFc@1152x648.jpg" alt="" /> <img src="http://ekladata.com/bOvhO0I-dJc5UKwHKLXO4P0a4A0@1152x648.jpg" alt="" /> <img src="http://ekladata.com/BzrsuAfjibmTewRjnYLgdhKtofE@1152x648.jpg" alt="" /> <img src="http://ekladata.com/j7dwhO_NSwh6AJevigrYtsypi5Y@1152x648.jpg" alt="" /> <img src="http://ekladata.com/BeHU-PVInjgig7KB7yUfWnIlE5w@1152x648.jpg" alt="" /></p>

</div>

<style></style>