Les images présentées dans les deux exemples sont libres de droits et issues de ce site : https://unsplash.com/
Le premier exemple reprend assez fidèlement la proposition, mais il n'est qu'imparfaitement "responsive design". Il faut adapter, dans le style, les valeurs à plusieurs tailles d'écran.
Le second est parfaitement "responsive design"... mais il est écrit dans un fichier .html appelé dans un Iframe responsive (voir donc impérativement cette page au préalable). Les réglages sont à peu près les mêmes, mais il faut les effectuer dans le fichier .html (avec notepad++ par exemple) et il utilise une unité proportionnelle vw à la largeur de l'affichage de la page.
Toutes les images de ce tutoriel ont comme dimensions : 335*480 pixels. Elles sont placées dans un dossier ImagesAccordion mis dans le dossier images à la racine de adHoc (mais vous pouvez adapter tous ces chemins). Le premier exemple contient 7 images et le second contient 8 images. Toutes les images, ainsi que les fichiers nécessaires à l'intégration dans un Iframe responsive sont dans un zip disponible au téléchargement ici : ImagesAccordion.zip pour tester ce slideshow.
Premier exemple : dans le code source
Cet exemple, dont le code est détaillé et commenté le plus possible, a une partie [style type="text/css"]...[/style] à mettre au début du code source de la page ou de la boîte encadrée de ces balises, ou bien tel quel, dans un fichier spécifique comme c'est le cas ici (nommé CSS_slideshow_accordeon.css) dont l'appel au début du code source est le suivant :
La largeur du conteneur avec N images est obtenue en additionnant la largeur d'une image et (N-1) fois la largeur d'une bande, ici 335px + (6 x 60px) pour 7 images dans son affichage le plus large.
Il y a des adaptations à prévoir pour des écrans de largeurs différentes avec les règles @media screen qui vous permettent d'ajuster le slideshow. Voir les dimensions dans le style pour max-width: 900px , max-width: 720px et max-width: 480px. Dans ces cas là, les largeurs d'images et de bandes sont modifiées, la taille de la police également, entre autres.
Ensuite, le code du procédé est à placer, dans le code source de la page ou de la boîte, à l'endroit où vous souhaitez voir s'afficher ce slideshow.
Notez bien l'imbrication des balises [figure]...[/figure].
Et, dans les balises [input... /] :
checked="checked" pour l'image que l'on veut voir déployée à l'affichage,
id="ia-selector-last" pour la dernière image du slideshow.
Second exemple : dans un Iframe
Cette seconde solution a très nettement ma préférence : elle est totalement responsive. Le style n'a pas a être modifié suivant les tailles d'écran.... bien sûr, il faut définir une image transparente qui contiendra le fichier .html : ici c'est un fichier ratio690x520.gif (d'un poids numérique négligeable : moins de 1ko) qui a été créé et placé dans le dossier images d'adHoc.
Le fichier Images-Accordion.html est placé dans le dossier images à la racine de adHoc, l'appel aux images est rédigé en conséquence et il faut l'adapter à votre configuration. Sinon, vous retrouverez exactement les mêmes réglages que pour le premier exemple. Mais il n'y a plus de réglage pour des largeurs d'écran différentes puisque l'affichage est proportionnel.
Et comme dans le premier exemple : La largeur du conteneur avec N images est obtenue en additionnant la largeur d'une image et (N-1) fois la largeur d'une bande, et donc ici 50vw + (7 x 7vw) pour 8 images.
Ci-dessous le code de l'Iframe responsive qui appelle le fichier Images-Accordion.html.
Ci-dessous le code du fichier Images-Accordion.html.
Utilisez sans modération le fichier .html du zip en téléchargement : ImagesAccordion.zip. Veuillez, s'il vous plaît laisser les références d'origine du procédé et de mon site dans l'en-tête, merci.
Me contacter sur le forum pour toute aide ou information supplémentaire.
Date de création: 23/12/2020
Dernière modification: 23/12/2020
Page lue: 238 fois