j'ai développé pour une utilisation personnelle il y a une bonne trentaine d'année des albums HTML avec diaporama, qui suscitent toujours beaucoup d''intérêt pour ma progéniture.
Avec la venue de la photo numérique, ils ont juste à actualiser, dans un fichier Diaporama.js, le tableau précisant le dossier des photos. Son chargement génère un albumHTMl complet avec menu listant les noms des répertoires puis autorisant affichage de vignettes et visualisation possible en HD manuelle ou automatique.
Ces albums ont été remis au gout du jour en HTML5 et respect de la norme W3C, mais je souhaiterai aller plus loin en autorisant un certain nombre d'animation désormais accessible via CSS3 lors de l'affichage des photos.
Malheureusement les animations CSS3 ne fonctionnent uniquement que sur la première image et ne sont pas reconduite sur les suivantes.
Code : Tout sélectionner
#MyIdDiv {
animation: opac 0.8s
}
@keyframes opac {
from {
opacity: 0
}
to {
opacity: 1
}
… Le dinosaure au cerveau lent que je suis devenu à même du mal à comprendre comment se débarrasser via DOM de toutes instructions "document.write" passéistes !Bref ! Voici le code HTML complet opérationnel - regroupant Html / Css / javascript - pour analyse du dysfonctionnement de l'animation passée en variable. Seules les images jpg sont absentes dans ce post...
Code : Tout sélectionner
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Diaporama HTML5 W3 CSS3</title>
<style>
body {
background-color: #A9A9A9;
}
#Photos {
margin-left: auto;
margin-right: auto;
display: block;
}
#MyIdDiv {
animation: opac 0.8s
}
@keyframes opac {
from {
opacity: 0
}
to {
opacity: 1
}
}
</style>
<script>
// ==========================================================================
// ==========================================================================
// Permet image horizontale ou verticale à la résolution maximale de l'écran
// ==========================================================================
function resize_Child(urlImage, mw, mh, ajustw, ajusth, idConteneur, MyPadding, MyAnimation) {
mw = mw - ajustw;
mh = mh - ajusth;
var photo = new Image();
// photo.src = urlImage;
// Modif du code précédent pour contrer Bug Cache IE qui ne recharge pas image précédente en cache sur F5
// ajout argument variable - inutilisé - dans url
photo.src = urlImage + "?" + new Date().getTime();
photo.onload = function () {
// Taille originelle de la photo
var imgW = photo.width;
var imgH = photo.height;
if (imgW > mw || imgH > mh) {
ratioH = mh / imgH;
ratioW = mw / imgW;
if (ratioH < ratioW || imgH == imgW) {
imgH = Math.floor((imgH * ratioH) - 30);
imgW = Math.floor((imgW * ratioH) - 10);
} else {
imgH = Math.floor((imgH * ratioW) - 30);
imgW = Math.floor((imgW * ratioW) - 10);
}
// Nouvelle Taille proportionnelle en fonction taille écran
photo.width = imgW
photo.height = imgH
}
// Afficher image avec <div id="Photos"></div> (SANS img src) en code HTML
// document.getElementById(idConteneur).appendChild(photo);
// Afficher image (AVEC img src) en code HTML
document.getElementById(idConteneur).src = urlImage;
// Construire éléments du cadre une fois image chargée pour éviter flash sous IE
document.getElementById(idConteneur).style.width = imgW + "px";
document.getElementById(idConteneur).style.height = imgH + "px";
document.getElementById(idConteneur).style.padding = MyPadding + "px";
document.getElementById(idConteneur).style.border = "2px solid #bbb";
document.getElementById(idConteneur).style.background = "#F4F4F4";
document.getElementById(idConteneur).style.color = "#777";
document.getElementById(idConteneur).style.boxShadow = "5px 5px 5px #888";
// ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
// A REVOIR !
// Ne lance pas animation code CSS3 sur les images suivantes...
document.getElementById("MyIdDiv").style.animation = MyAnimation;
// ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
}
}
// ==========================================================================
// ==========================================================================
// Déterminer taille de la fenêtre d'affichage
var fen = document.getElementsByTagName('html')[0];
var MyEcranW = fen.clientWidth;
var MyEcranH = fen.clientHeight;
// Test détection première image réelle pour mode block du div une seule fois
LoadOne = true;
// ==========================================================================
// ==========================================================================
// ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
// Variables test provisoire
// 1- Tableau en attendant chargement depuis fichier externe Diapo.js
var tabImgSave = ["000.jpg", "001.jpg", "005.jpg"];
// 2- Valeur à véhiculer argument Url
// Image de départ
var DiaDebut = 0;
// Temporisation affichage
var MyDelai = 4;
// ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
</script>
</head>
<body onLoad="javascript:TempoDia(1);">
<script>
document.write('<div id="MyIdDiv" style="display: none">');
document.write('<img id="Photos" src="' + tabImgSave[DiaDebut] + '">');
document.write('</div>');
// ============================================================
// ============================================================
// Diaporama
function Diaporama() {
// Appel de la fonction résize src image qui attend les variables suivantes :
// resize_Child(urlImage, mw, mh, ajustw, ajusth, idConteneur, MyPadding, MyAnimation)
resize_Child(tabImgSave[DiaDebut], MyEcranW, MyEcranH, 50, 50, "Photos", 15, "opac 0.8s");
DiaDebut++;
if (DiaDebut < tabImgSave.length) {
TempoDia(MyDelai);
}
}
function TempoDia(MySeconde) {
if (MySeconde > 1 && LoadOne == true) {
// A exécuter que lors de la première image
LoadOne = false;
document.getElementById("MyIdDiv").style.display = "block";
}
setTimeout(Diaporama, (MySeconde * 1000));
}
</script>
</body>
</html>
Un grand merci par avance. Le codage reste la science de la modestie et demande une remise en cause perpétuelle de ses propres connaissances !
