18041 sujets
Questions générales et questions de débutants
Bonsoir via/vidda,
d'infinis diaporamas sont proposés sur le web (gratuits ou payants), tous plus somptueux les uns que les autres, à un point tel qu'on les voudrait tous.
Or, il est peut-être judicieux de construire soi-même son propre outil de visionnage afin d'en exercer la maîtrise puis le développement personnel ultérieur.
Alors, voici ce que j'ai rédigé pour moi-même : un diaporama html/css/javascript que j'ai voulu élémentaire, compact et personnalisable à souhait.
Dans le code qui suit, html/css/javascript y sont compilés en un seul fichier, mais que tu pourras bien évidemment séparer.
Screenshot du diaporama :
Le diaporama propose les fonctions :
1. marche/arrêt par un seul bouton
2. une lecture automatique et un temps de pause sur image
3. une inversion du sens de lecture (en_avant ou en_arriere).
L'originalité des écritures html et js de mon diaporama est qu'elles soulagent l'intégrateur-web de la rédaction d'une liste ordonnée("Râââh !"), également de la rédaction détaillée ("Uûûh !) de toutes les images dans le html. Je puis assurer que c'est très appréciable, lors la maintenance (mise à jour) du diaporama !
1. Copier le code suivant.
2. Coller dans un éditeur de texte (le Bloc-note ...)
3. Enregistrer sous ... (en UTF-8): mon-diaporama.htm
Note : l'image_generique et son .js considère toutes les images i1.png i2.png i3.png ... jusque i11.png (toutes prénommées i qui évoque une image).
Si tu disposes des images en .jpg, il faudra qu'elles soient alors toutes en .jpg : i1.jpg i2.jpg i3.jpg ... et modifier l'extension correspondante à la bonne ligne de la fonction Image() du js, et l'extension de l'image_generique présente dans le conteneur du html.
Pour qu'il soit enfin opérationnel en local sur ton écran grâce à ton navigateur (FireFox, Chrome, Safari ...), enregistre sous ... les trois crytogrammes suivants (illustrant les commandes du diapo) :
play.png : est un background-image alternatif de l'id="playpause"
pause.png : est un background-image alternatif de l'id="playpause"
fleche_sens.png : est le background-image de l'id="sens"
Ces 3 images sont à déposer dans un dossier img de toutes les images (dont toutes celles de ton diaporama)
Le javascript est configuré pour :
- des images au format .png : i1.png i2.png i3.png i4.png i5.png ...
- lire 11 images : NombreImages=11; (puis tourner en boucle)
- pauser sur chaque images : mon_interval=6000; (6 secondes)
Voilà ! A toi d'essayer puis d'apprécier le résultat ...
EDIT [vendredi 30 janvier 2015 - 20:11] : après qu'Alsa ait apporté la correction d'un grand bug du Forum, j'ai nécessairement restructuré ma réponse, et en ai profité accessoirement pour corriger mes propres imprécisions ...
Modifié par senteur_honrable (30 Jan 2015 - 20:12)
d'infinis diaporamas sont proposés sur le web (gratuits ou payants), tous plus somptueux les uns que les autres, à un point tel qu'on les voudrait tous.
Or, il est peut-être judicieux de construire soi-même son propre outil de visionnage afin d'en exercer la maîtrise puis le développement personnel ultérieur.
Alors, voici ce que j'ai rédigé pour moi-même : un diaporama html/css/javascript que j'ai voulu élémentaire, compact et personnalisable à souhait.
Dans le code qui suit, html/css/javascript y sont compilés en un seul fichier, mais que tu pourras bien évidemment séparer.
Screenshot du diaporama :
Le diaporama propose les fonctions :
1. marche/arrêt par un seul bouton
2. une lecture automatique et un temps de pause sur image
3. une inversion du sens de lecture (en_avant ou en_arriere).
L'originalité des écritures html et js de mon diaporama est qu'elles soulagent l'intégrateur-web de la rédaction d'une liste ordonnée("Râââh !"), également de la rédaction détaillée ("Uûûh !) de toutes les images dans le html. Je puis assurer que c'est très appréciable, lors la maintenance (mise à jour) du diaporama !
1. Copier le code suivant.
2. Coller dans un éditeur de texte (le Bloc-note ...)
3. Enregistrer sous ... (en UTF-8): mon-diaporama.htm
Note : l'image_generique et son .js considère toutes les images i1.png i2.png i3.png ... jusque i11.png (toutes prénommées i qui évoque une image).
Si tu disposes des images en .jpg, il faudra qu'elles soient alors toutes en .jpg : i1.jpg i2.jpg i3.jpg ... et modifier l'extension correspondante à la bonne ligne de la fonction Image() du js, et l'extension de l'image_generique présente dans le conteneur du html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Diaporama tout simple</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Diaporama par javascript et css3 ; dynamique et interactif, automatique ou manuel." />
<style type="text/css">
body
{font-family:verdana,arial;font-size:1em}
input
{display:inline-block;position:relative;margin:0;padding:0;outline:0 none}
h1
{margin:0;text-align:left;font-weight:normal;color:#555;font-family:verdana,arial}
h2
{margin:0 0 10px 0;text-align:left;font-weight:normal;color:#555;font-family:verdana,arial}
#global
{display:block;position:relative;width:612px;left:50%;padding:10px;margin-left:-316px;text-align:center}
#conteneur
{z-index:1;display:block;position:relative;width:610px;height:430px;margin-left:-1px;margin-bottom:30px;cursor:pointer;border:1px solid #fff}
/* === Les img du conteneur y seront parfaitement centrees === */
#conteneur img
{z-index:1;display:inline-block;position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;padding:0px;max-height:100%;max-width:100%}
#commandes
{display:block;position:relative;width:610px;text-align:center;margin-bottom:5px;line-height:2.4em}
#playpause{display:inline-block;position:relative;border:1px solid #000;width:27px;height:27px;cursor:pointer}
#sens{display:inline-block;position:relative;border:1px solid #000;width:27px;height:27px;cursor:pointer}
/* === 4 class affectes aux commandes manuelles === */
.play
{z-index:2;width:27px;height:27px;background-image:url(img/play.png);border:1px solid #000;color:transparent;box-shadow:3px 3px 6px #999}
.pause
{z-index:2;width:27px;height:27px;background-image:url(img/pause.png);border:1px solid #000;color:transparent;box-shadow:3px 3px 6px #999}
.sens_avant
{background-image:url(img/fleche_sens.png);margin:0 0 0 4px;box-shadow:3px 3px 6px #999;transform:rotate(0deg);transition:all linear 0.5s}
.sens_arriere
{background-image:url(img/fleche_sens.png);margin:0 0 0 4px;box-shadow:-3px -3px 6px #999;transform:rotate(-180deg);transition:all linear 0.5s}
/* === 1 class applique a image_generique === */
.image_1
{box-shadow:6px 6px 8px #999}
</style>
</head>
<body>
<div id="global">
<div id="conteneur">
<img name="image_generique" id="image_generique" class="image_1" src="img/i1.png" alt="" />
</div>
<div id="commandes">
<input id="playpause" name="playpause" class="pause" type="button" value="" title="play/pause" /><input id="sens" name="sens" class="sens_avant" type="button" value="" title="inverser le sens de lecture" />
</div>
<span style="display:block;text-align:left;padding:6px 12px 18px 6px;border:1px solid #ccc;font-size:0.8em">
<h1>
Diaporama
</h1>
<h2>
par javascript et css3
</h2>
• Le diaporama peut recevoir des images de dimensions différentes ; ces images seront toujours centrées dans un conteneur.
<br />
• La stratégie du javascript est fondée sur une image dite générique, évolutive : i1.png i2.png i3.png ... (nécessairement
avec la même extension png, jpg ou gif !).
<br />
• Le javascript se substitue intégralement à une liste ordonnée et à l'intégration html de toutes les images du diaporama !
</span>
</div>
<script type="text/javascript">
function Bid(id) //Pour un raccourci d'ecriture.
{
return document.getElementById(id);
}
var conteneur=Bid("conteneur"); //On envisage les elements à "fonctionner".
var playpause=Bid("playpause");
var sens=Bid("sens");
Chiffre=1; //Au demarrage du diaporama, i1.png sera la premiere image.
NombreImages=11; //Nombre d'images a visionner dans le diaporama ; modifiez selon votre propre diaporama.
mon_interval=6000; //Temps de pause sur image (ici 6 secondes ; modifiez selon ...)
function Image()
{
document.image_generique.src="img/i"+Chiffre+".png"; //L'image name="image_generique" est ici confinee dans un dossier img
}
function EnAvant()
{
Chiffre=Chiffre+1; //On progresse de 1
if(Chiffre>NombreImages) //Si le diaporama accede au nombre d'images, on boucle sur la premiere.
{
Chiffre=1;
}
Image(); //On affecte EnAvant() chaque fois a la bonne image.
}
function EnArriere()
{
Chiffre=Chiffre-1; //On regresse de 1
if(Chiffre<1) //Si le diaporama accede a la premiere image,
{
Chiffre=NombreImages; //on boucle sur la derniere.
}
Image(); //On affecte EnArriere() chaque fois a la bonne image.
}
function Animer()
{
if(sens.className == 'sens_avant' || !sens.className) //Arguments sur le sens initie par jeu de class.
{
EnAvant();
defile=setInterval("EnAvant()",mon_interval);
}
else if(sens.className == 'sens_arriere')
{
EnArriere();
defile=setInterval("EnArriere()",mon_interval);
}
}
function StopAnimer()
{
clearInterval(defile);
}
function PlayPause() //Interrupteur en va-et-vient.
{
if(playpause.className == 'play' || !playpause.className) //Arguments selon la marche ou l'arret par jeu de class.
{
playpause.className = 'pause';
StopAnimer();
}
else if(playpause.className == 'pause')
{
playpause.className = 'play';
Animer();
}
}
function EnArriereEnAvant() //Interrupteur en va-et-vient.
{
if(sens.className == 'sens_arriere' || !sens.className) //Argument selon le sens de lecture (interrupteur en va-et-vient) par jeu de class.
{
sens.className = 'sens_avant';
StopAnimer();
EnAvant();
if(playpause.className == "play" || !playpause.className)
{
defile = setInterval("EnAvant()",mon_interval); //Appliquer l'interval repetitif en lecture avant.
}
}
else if(sens.className == "sens_avant")
{
sens.className = 'sens_arriere';
StopAnimer();
EnArriere();
if(playpause.className == "play" || !playpause.className)
{
defile=setInterval("EnArriere()",mon_interval); //Appliquer l'interval repetitif en lecture arriere.
}
}
}
sens.onmousedown=function(){EnArriereEnAvant()}; //Affecter aux elements leurs fonctions propres.
playpause.onmousedown=function(){PlayPause()};
conteneur.onmousedown=function(){PlayPause()};
</script>
</body>
</html>
Pour qu'il soit enfin opérationnel en local sur ton écran grâce à ton navigateur (FireFox, Chrome, Safari ...), enregistre sous ... les trois crytogrammes suivants (illustrant les commandes du diapo) :
play.png : est un background-image alternatif de l'id="playpause" pause.png : est un background-image alternatif de l'id="playpause" fleche_sens.png : est le background-image de l'id="sens"Ces 3 images sont à déposer dans un dossier img de toutes les images (dont toutes celles de ton diaporama)
Le javascript est configuré pour :
- des images au format .png : i1.png i2.png i3.png i4.png i5.png ...
- lire 11 images : NombreImages=11; (puis tourner en boucle)
- pauser sur chaque images : mon_interval=6000; (6 secondes)
Voilà ! A toi d'essayer puis d'apprécier le résultat ...
EDIT [vendredi 30 janvier 2015 - 20:11] : après qu'Alsa ait apporté la correction d'un grand bug du Forum, j'ai nécessairement restructuré ma réponse, et en ai profité accessoirement pour corriger mes propres imprécisions ...
Modifié par senteur_honrable (30 Jan 2015 - 20:12)