18041 sujets

Questions générales et questions de débutants

Diaporama js css3 sans liste ou autre intégration html des images

Bonjour aux Alsanautes,
j'ai façonné un diaporama qui se fonde juste sur une image dite générique, évolutive image_generique et son clone image_clone.

Un double effet de fondu anime la transition entre 2 images.

Ni liste ordonnée, ni écriture détaillée de toutes les images dans le html : cela soulage la maintenance et la mise à jour du diaporama, ou des diaporamas s'il y en avait de nombreux !

Voici le code la pageWeb entière ; il vous suffirait en local de copier-coller le code et de l'enregistrer avec votre éditeur (le Bloc-notes Windows suffira, avec le codage UTF-8) diaprama.htm, de créer votre propre dossier img où dormiraient 11 images .jpg, et d'y placer les background-image suivants :
upload/57133-flechesens.png flechesens.png : background-image de l'id="sens"
upload/57133-pause.jpg pause.jpg : background-image alternatif de l'id="playplause"
upload/57133-play.jpg play.jpg : background-image alternatif de l'id="playplause"

Remarque : toutes les images du diaporama sont renommées i suivi d'un chiffre : i1.jpg i2.jpg i3.jpg ... et de même extension .jpg (i comme image, non le i en js comme indéfini)

L'astuce, ou la stratégie des méthodes javascript sera de faire évoluer ce Chiffre et son Clone

Une question demeure : comment considérer qu'une image par exemple .png (qui s'est glissée subrepticement dans le dossier-source des images) puisse être lue quand même par mon js ?


<!DOCTYPE html>

<html lang="fr">

<head>

<title>Diaporama css3 et js</title>

<meta 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;border:1px solid #000;outline:none 0;text-align:center;cursor:pointer}

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%}

#commandes1
{display:block;position:relative;width:610px;text-align:center;margin-bottom:5px;line-height:2.4em}

#playpause
{width:27px;height:27px;box-shadow:3px 3px 6px #999;}

#sens
{width:27px;height:27px;;margin:0 0 0 4px}

#conteneur_indicateur
{display:inline-block;position:relative;width:10px;height:27px;background:#ffff;margin-right:4px;top:2px}

/* === class affectees aux commandes manuelles === */

.play
{background-image:url(img/play.jpg)}

.pause
{background-image:url(img/pause.jpg)}

.sens_avant
{background-image:url(img/fleche_sens.png);box-shadow:3px 3px 6px #999;transform:rotate(0deg);transition:all linear 0.5s}

.sens_arriere
{background-image:url(img/fleche_sens.png);box-shadow:-3px -3px 6px #999;transform:rotate(-180deg);transition:all linear 0.5s}

/* === 4 class appliques a image_generique et image_clone === */

.image_00
{box-shadow:6px 6px 8px #999;opacity:0}

.image_0
{box-shadow:6px 6px 8px #999;opacity:0;transition:opacity 1.5s linear}

.image_11
{box-shadow:6px 6px 8px #999;opacity:1}

.image_1
{box-shadow:6px 6px 8px #999;opacity:1;transition:opacity 1.5s linear}

/* === class diverses === */

 .chiffre_courant
{width:30px;background-color:#ffff96;font-weight:bold;cursor:default;top:-7px;box-shadow:3px 3px 6px #999;margin-right:0}

.indicateur_galopant
{display:inline-block;position:absolute;width:8px;height:0;left:0;bottom:0;background-color:#ffff96;border:1px solid #000;box-shadow:3px 3px 6px #999;margin-right:4px;transition:height linear 6s}

.indicateur_statique
{display:inline-block;position:absolute;width:8px;height:25px;left:0;bottom:0;background-color:#ffff96;border:1px solid #000;box-shadow:3px 3px 6px #999;margin-right:4px}

</style>

</head>

<body>

<div id="global">

<div id="conteneur">

<img name="image_clone" id="image_clone" class="image_0" src="img/i9.jpg" alt="" /><! -- Les 2 images en position:absolute se superposent, au centre du conteneur -- >

<img name="image_generique" id="image_generique" class="image_1" src="img/i1.jpg" alt="" />

</div>

<div id="commandes1">

<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" />
<span style="position:absolute;right:0">
<span id="conteneur_indicateur"><span id="indicateur_temporel" class="indicateur_statique"></span></span><input id="chiffre_courant" name="chiffre_courant" type="button" class="chiffre_courant" value="01" title="sur 11 images, celle en cours" />
</span>

</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>
&bull;  Le diaporama peut recevoir des images de dimensions diff&eacute;rentes (hauteur et largeur) ; ces images seront toujours centr&eacute;es (haut=bas, gauche=droite).
<br />
&bull; La strat&eacute;gie du javascript est fond&eacute;e sur une image dite g&eacute;n&eacute;rique, &eacute;volutive.
<br />
&bull; Gr&acirc;ce &agrave; css3 et une astuce de clonage de l'image_generique, un double effet de fondu s'exprime sur les images altern&eacute;es.
<br />
&bull; Le javascript se substitue int&eacute;gralement &agrave; une liste ordonn&eacute;e et &agrave; l'int&eacute;gration html de toutes les images du diaporama !
<br />
&bull; Cr&eacute;ation : Jean Sentrais, artiste peintre - Chinon FR-37500, edit 17 d&eacute;cembre 2014.
<br />
<br />
Note : le diaporama ne pourra consid&eacute;rer des images qu'à la même extension : .png ou .jpg ou .gif
</span>

</div>

<script type="text/javascript">

	function Bid(id) //Juste pour un raccourci d'ecriture.
{
return document.getElementById(id);
}


var conteneur=Bid("conteneur"); //Element a "fonctionner".
var playpause=Bid("playpause");
var sens=Bid("sens");


Chiffre=1; //La premiere image du diaporama sera i1.jpg

NombreImages=11; //Modifier selon votre nombre d'images disponibles ; ici de 1 a 11, et pourquoi pas 53 si vous aviez i1.jpg i2.jpg i.jpg i4.jpg i5.jpg ... i53.jpg

mon_interval=6000; //Modifier selon votre preference du temps de pause sur image : 6000 = 6 secondes.


	function GeneriqueEtClone()
{
document.image_generique.src="img/i"+Chiffre+".jpg"; //Vous pouvez modifier name, dossier-source ou extension selon vos propres donnees.
document.image_clone.src="img/i"+Clone+".jpg"; //Vous pouvez modifier ...
if(Chiffre<10)
	{
chiffre_courant.value="0"+Chiffre+"";
	}
else if(Chiffre>=10)
	{
chiffre_courant.value=""+Chiffre+"";
	}
image_generique.className='image_00'; //Affecter une nouvelle class a name="image_generique"
image_clone.className='image_11'; //Affecter une nouvelle class ...
setTimeout(function(){image_generique.className='image_1';image_clone.className='image_0'},30);
//Le setTimeout, ou delai, est determinant : pas de setTimeout = pas d'application de la class ... 
//car c'est utile de permettre a l'ordi "d'imprimer" les ordres precedents !
}

/* --- Rien ne peut etre modifie ou parametre ci-apres --- */


	function EnAvant()
{
Chiffre=Chiffre+1;
Clone=Chiffre-1;
if(Chiffre>NombreImages)
	{
Chiffre=1;
	}
GeneriqueEtClone(); //Affecter le nouveau Chiffre lors du changement d'images, generique et clone.
if(playpause.className=='play' || !playpause.className)
	{
IndicateurGalopant(); //Montrer en 6s comment s'egrene (s'egraine) dynamiquement le temps de pause sur image.
	}
}


	function EnArriere()
{
Chiffre=Chiffre-1;
Clone=Chiffre+1;
if(Chiffre<1)
	{
Chiffre=NombreImages;
	}
GeneriqueEtClone(); //Affecter le nouveau Chiffre ...
if(playpause.className=='play' || !playpause.className)
	{
IndicateurGalopant();
	}
}


	function Animer()
{
if(sens.className == 'sens_avant' || !sens.className)
	{
EnAvant(); //Resoudre l'effet de latence qui precede l'execution d'un setInterval
defile=setInterval("EnAvant()",mon_interval); //Repetition sequentielle.
	}
else if(sens.className == 'sens_arriere')
	{
EnArriere();
defile=setInterval("EnArriere()",mon_interval);
	}
}


	function StopAnimer()
{
clearInterval(defile);
IndicateurStatique();
}


	function PlayPause() //Interrupteur en "va-et-vient"
{
if(playpause.className == 'play' || !playpause.className) //Condition de class ...
	{
playpause.className = 'pause';
StopAnimer();
	}
else if(playpause.className == 'pause')
	{
playpause.className = 'play';
Animer();
	}
}


	function EnArriereEnAvant() //Commutateur en "va-et-vient", par le jeu de conditions de class
{
if(sens.className == 'sens_arriere' || !sens.className)
	{
sens.className = 'sens_avant';
StopAnimer();
EnAvant(); //Resoudre l'effet de latence qui precede l'execution d'un setInterval
if(playpause.className == "play" || !playpause.className)
		{
defile = setInterval("EnAvant()",mon_interval); //Ecriture d'une repetition sequentielle
		}
	}
else if(sens.className == "sens_avant")
	{
sens.className = 'sens_arriere';
StopAnimer();
EnArriere();
if(playpause.className == "play" || !playpause.className)
		{
defile=setInterval("EnArriere()",mon_interval);
		}
	}
}


sens.onmousedown=function(){EnArriereEnAvant()}; //"Fonctionner" les elements.
playpause.onmousedown=function(){PlayPause();};
conteneur.onmousedown=function(){PlayPause();};


var indicateur=Bid("indicateur_temporel");


	function IndicateurGalopant()
{
IndicateurStatique();
setTimeout("indicateur.className='indicateur_galopant'",15);
}


	function IndicateurStatique()
{
indicateur.className='indicateur_statique';
}

</script>

</body>

</html>


Si d'aventure vous aviez une idée ...
Modifié par senteur_honrable (02 Feb 2015 - 20:30)
J'ai rectifié certaines approximations qui, sans être de véritables erreurs, imposaient de l'incohérence à la compréhension du javascript.

Le Javascript de la page pourrait être appliqué à une animation semblable à une video. Je vous avouerais qu'en fait, c'est de cette animation générée et gérée par javascript que mon diaporama est venu.

En effet, pour maîtriser les antiques animations .gif j'avais rédigé un script qui remplacent ces .gif indélicates et rétives. Tout d'abord il m'a fallu isoler chaque img de la .gif et les enregistrer toutes dans un dossier global : i1.png i2.png i3.png ... (avec PhotoShopElements cela a été "un jeu d'enfant"). Ensuite, dans le script procéder par un setInterval de 40 (=25 images/seconde). Le résultat a été bluffant. Mais bien évidemment sans image_clone et sans transition de css3 qui sont inutiles : même IE v.5.5 a pu le lire ... c'est vous dire comme j'étais content !
Modifié par senteur_honrable (02 Feb 2015 - 01:21)
senteur_honrable a écrit :
même IE v.5.5 a pu le lire ... c'est vous dire comme j'étais content !

Je n'ose croire que personne l'eût espéré ...
Modifié par senteur_honrable (02 Feb 2015 - 06:30)
Sujet clos
Aller à