PictureBox : code source complet HTML5/CSS3/JavaScript

[fancy_header tag=”h1″]PictureBox : code source complet HTML5/CSS3/JavaScript[/fancy_header] [p]Cet article s’adresse aux développeurs en herbe avec une base de connaissance en Html/CSS3 et JavaScript. Vous pouvez copier/coller le code avec facilité et le tester chez vous en le personnalisant à votre guise.[/p]

C’est une PictureBox réalisée en Html5/CSS3 et du JavaScript. Très simple mais encore faut-il connaître un peu le fonctionnement des “média queries“. Ce code source vous fera afficher une galerie photos originale et “responsive“, c’est à dire qu’elle sera adaptée à tous les supports tels que les PC, smartphones, tablettes tactiles etc…

[box type=”warning”]Notez bien qu’il y a 4 fichiers CSS, 1 fichier JavaScript et bien sûr l’index (.html). Les images sont disponibles en bas de page dans un caroussel[/box] [fancy_header tag=”h2″]Arborescence de vos fichiers[/fancy_header] [image src=”2018/10/arborescence-picturebox-rue-de-l-info.jpg” width=”138″ align=”center” alt=”Arborescence – PictureBox – Rue de l’info” title=”Arborescence – PictureBox – Rue de l’info” image_hover=”zoom-effect” frame=”style4″] [fancy_header tag=”h2″]Fichier index.html[/fancy_header]

[fancy_header]Fichier style.css[/fancy_header]

[fancy_header]Fichier screen.css[/fancy_header]

[fancy_header]Fichier smartphone.css[/fancy_header]

[fancy_header]Fichier tablette.css[/fancy_header]

[fancy_header]Fichier script.js[/fancy_header]

[fancy_header]Dossier “images”[/fancy_header] [fancy_header tag=”h3”]Clic droit > enregistrer l’image sous[/fancy_header] [carousel_slide id=’6770′]