Sujet Précédent Sujet Suivant

Fondu enchainé dans transition d'image

Résolu
shakiboy Messages postés 2 Date d'inscription lundi 27 février 2006 Statut Membre Dernière intervention 25 juillet 2013 - Modifié le 25 juil. 2013 à 17:53
f0xi Messages postés 4205 Date d'inscription samedi 16 octobre 2004 Statut Modérateur Dernière intervention 12 mars 2022 - 5 août 2013 à 22:55
Bonjour,
J'ai trouvé et adapté un ptit script qui me permet d'afficher en transition (sans effet) 4 images.
A la 4eme image, mon "diaporama" s'arrête et reste figé sur la derniere. C'est normal...

Ma question : je cherche maintenant, sur base de ce code pouvoir ajouter une transition entre mes images pour que ce soit moins brut ! une simple transition fondu enchainé...

Que puis-je faire pour ca?

Voici mon code : 



<html>
<head>

<script type="text/javascript"> 
var Img=new Array; 
Img[0]="01.jpg"; 
Img[1]="02.jpg"; 
Img[2]="03.jpg"; 
Img[3]="04.jpg"; 
var i=0;
 

function change(index) { 
document.getElementById('pic').src=Img[index]; 
i++; 
if (i < Img.length) 
{ 
setTimeout('change(i)',1500); } } 
setTimeout('change(i)',1500);
</script>
</head>
<body>
<img src="01.jpg" id="pic">
</body>
</html>





Un grand merci pour votre aide,







Eric.

3 réponses

Réponse 1 / 3
@karamel Messages postés 1854 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 8 avril 2024 153
25 juil. 2013 à 17:53
bonjour

un script que j'ai dans mon stock 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<style>

.transpa0 {
opacity:0;
filter: Alpha (opacity=0);
position:absolute;
left:0;
top:0;
height:50%;
width:50%
}

.transpa100 {
opacity: 1;
filter: Alpha(opacity=100);
position:absolute;
left:0;
top:0;
height:50%;
width:50%
}

</style>

<script>

var _maliste = ['photos/1.jpg', 'photos/2.jpg', 'photos/3.jpg', 'photos/4.jpg' ];
var tbmage=new Array
var fafade={

temps_pause:3000,
opa:100,
tour:1,
elem0:'null',
elem1:'null',
elem2:'null',
gide:1,

precharge:function() {

for (var i = 0; i < _maliste.length; i++) {
tbmage[i] = new Image();
tbmage.src = _maliste[i];
}
},

change_opacity:function(){

if((parseInt(navigator.userAgent.substring(30,31))<=8)){
fafade.opa-=20;
fafade.elem1.style.filter = 'alpha(opacity=' + fafade.opa + ')';
fafade.elem2.style.filter = 'alpha(opacity=' + (100-fafade.opa) + ')';
} 
else{
fafade.opa-=5;
fafade.elem1.style.opacity = fafade.opa/100;
fafade.elem2.style.opacity = (100-fafade.opa)/100;
}
if(fafade.opa<=0){
fafade.opa=100;
fafade.tour++;

if(fafade.tour==_maliste.length){
fafade.tour=0;
}

if(fafade.gide!=1){
fafade.elem1=fafade.elem0.getElementsByTagName('img')[0];
fafade.elem2=fafade.elem0.getElementsByTagName('img')[1];
fafade.gide=1;
}
else{
fafade.elem1=fafade.elem0.getElementsByTagName('img')[1];
fafade.elem2=fafade.elem0.getElementsByTagName('img')[0];
fafade.gide=2;
}

fafade.elem2.src=_maliste[fafade.tour];

setTimeout(fafade.change_opacity,fafade.temps_pause);

return false;
}

setTimeout(fafade.change_opacity,25);
},

init:function(){
fafade.precharge();
fafade.elem0=document.getElementById('gene');
fafade.elem1=fafade.elem0.getElementsByTagName('img')[0];
fafade.elem2=fafade.elem0.getElementsByTagName('img')[1];
setTimeout (fafade.change_opacity,fafade.temps_pause);
}

}


typeof window.addEventListener == 'undefined' ? attachEvent("onload",fafade.init) : addEventListener("load",fafade.init, false);


</script>
</head>
<body>

<div id='gene'> 
<img src="photos/1.jpg" class="transpa100"/>  
<img src="photos/2.jpg" class="transpa0"/>
</div>

</body>
</html>
3
Réponse 2 / 3
f0xi Messages postés 4205 Date d'inscription samedi 16 octobre 2004 Statut Modérateur Dernière intervention 12 mars 2022 35
Modifié par f0xi le 4/08/2013 à 03:24
HTML5/CSS3 + JQuery (facultatif) 

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Slider</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
body{
  background-color:#444;
}


#slideshow{
  display:block;
  position:absolute;

  padding:4px;
 
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  
  width: 1080px;
  height:720px;
  
  border:8px solid #fff;
  background-color:#fff;
  
  text-align:center;
  
  overflow:hidden;
  
  box-shadow:0 0 8px #000;
  border-radius:4px;  
  transition: 1s width, 1s height;
}

#slideshow img{
  position:absolute;
  display:inline-block;
  float:left;

  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;

  opacity:0;
  transition:2s opacity;
  z-index:0;

  max-width:1080px;
  max-height:720px;
}
#slideshow img:first-child{
  z-index:1;
  opacity:1;
}
</style>
<script>
function changePic(){
  var P = '#slideshow';
  var position=$(P).attr('position');
  var max     =$(P)[0].childElementCount;
  var O = '#ss'+position;
  position++;
  if(position > max){ position = 1; }
  var N = '#ss'+position;
  $(N).css('z-index','1').css('opacity','1');
  $(O).css('z-index','0').css('opacity','0');
  $(P).attr('position', position).height($(N).height()).width($(N).width());  
}

$(document).ready(function(){
  setInterval("changePic();", 5000);
});
</script>
</head>
<body>
<div id="slideshow" position="1">
  <img id="ss1" src="sliderimgs/a.jpg" alt=""/>
  <img id="ss2" src="sliderimgs/b.jpg" alt=""/>
  <img id="ss3" src="sliderimgs/c.jpg" alt=""/>
  <img id="ss4" src="sliderimgs/d.jpg" alt=""/>
  <img id="ss5" src="sliderimgs/e.jpg" alt=""/>
  <img id="ss6" src="sliderimgs/f.jpg" alt=""/>
  <img id="ss7" src="sliderimgs/g.jpg" alt=""/>
  <img id="ss8" src="sliderimgs/h.jpg" alt=""/>
  <img id="ss9" src="sliderimgs/i.jpg" alt=""/>
  <img id="ss10" src="sliderimgs/j.jpg" alt=""/>
</div>
</body>
</html>


Demo -> https://c9.io/deefaze/jq-codes/workspace/index.html

________________________________________________________
[ besoin de câbles audio, vidèo, informatique pas cher ?]
1
Réponse 3 / 3
@karamel Messages postés 1854 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 8 avril 2024 153
4 août 2013 à 10:57
pas mal le script mais par contre l'effet ne fonctionne pas avec ie 8 sachant que ie 8 c'est environ 23 % d'utilisateur et les image mis a chaud dans la page il faut avoir une bonne connexion

--
0
f0xi Messages postés 4205 Date d'inscription samedi 16 octobre 2004 Statut Modérateur Dernière intervention 12 mars 2022 35
Modifié par f0xi le 5/08/2013 à 13:41
j'ai fais ça à l'arrache en local avec des images HD > 3000x2000 :) j'avais que ça sous la main.

Bien sur, le but n'etait que de montrer le CSS, pour le pré-load etc je te laisse faire selon ton contenus.

IE8 -> te prend pas la tête a coder pour IE8 -> IF IE<9 -> GO MAJ TON NAVIGATEUR.
IE9 et IE10 sont de plus en plus utilisés, faut arreter de se prendre la tête à supporté des navigateurs qui ne sont plus maintenus et dont le % d'utilisation ne fait que baisser.
0
BBFUNK01 Messages postés 1310 Date d'inscription jeudi 16 juillet 2009 Statut Membre Dernière intervention 20 juin 2014 6
5 août 2013 à 17:15
Hello,

Je ne suis pas tout à fait d'accord avec toi foxi :

"IE8 -> te prend pas la tête a coder pour IE8 -> IF IE<9 -> GO MAJ TON NAVIGATEUR."

Toutes les personnes qui sont encore sous Windows XP ne peuvent pas passer à IE9, certes elles peuvent utiliser Firefox, Chrome, ou d'autres navigateurs mais il y a encore beaucoup de personnes qui n'osent pas forcément "changer de crémerie" si je puis dire, à mon avis il faut se farcir le debug sur IE8 pendant quelques temps encore... (malheureusement :( )

A+
0
f0xi Messages postés 4205 Date d'inscription samedi 16 octobre 2004 Statut Modérateur Dernière intervention 12 mars 2022 35
Modifié par f0xi le 5/08/2013 à 22:56
Windows XP -> plus maintenus.
IE6/IE7/IE8 -> plus maintenus (ou si peu pour IE8)

pourquoi s'embeter avec ces choses, chez nous y'a pas le budget pour faire des sites moderne next-gen et une version préhistorique.
gain de temps, gain d'argent sur tout les plans.
0

Discussions similaires

Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
integrer une variable javascript dans un lien hypertext
rabixpvb -
Stopub -

4 réponses
est-ce que "goto" existe en javascript ?
dmk04 -
bultez -

4 réponses
Partie entière d'un nombre
Sniper_Vgaerr -
DeAtHCrAsH -

2 réponses
Redirection par header ou javascript?
Evangun -
Anthomicro -

8 réponses
Rejoignez-nous