begin process at 2012 02 14 04:17:31
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Effets

 > DIAPO EN FONDU ENCHAINE

DIAPO EN FONDU ENCHAINE


 Information sur la source

Note :
9,46 / 10 - par 13 personnes
9,46 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Classé sous :diaporama, fondu, imagesurvol, image, enchaine Niveau :Débutant Date de création :25/09/2008 Date de mise à jour :26/05/2009 13:05:43 Vu / téléchargé :28 106 / 2 915

Auteur : kazma

Ecrire un message privé
Commentaire sur cette source (78)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
diapo en fondu enchaine c'est exactement sa des image qui s'enchaine avec un effet de fondu il y a quatre script un par selectione de l'image avec la sourie un autre avec bouton marche arret un avec marche arret au passage de la sourie et le dernier automatique les script peuvent paraitre cour mais il sont efficaces et simple a mettre en oeuvre compatible ie ff safa opera chrome et aussi IE 7 et 8 beta 2. afin d'optimise l'afichage il peut etre interressant d'ajouter un prechargement d'image

Source

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html <html xmlns="http://www.w3.org/1999/xhtml">
  • <head>
  • <script>
  • var oxo=1;
  • var opaa=0;
  • var opab=100;
  • function defilmage(selimage){
  • if(oxo==1){
  • opaa=30;
  • document.getElementById('divimageb').src=selimage+".jpg";
  • oxo=0;
  • }
  • imacibleb=document.getElementById('divimagea');
  • imaciblea=document.getElementById('divimageb');
  • if(imacibleb.src==imaciblea.src){
  • return false;
  • }
  • opaa+=5;
  • opab-=10;
  • if(document.all && !window.opera){
  • imaciblea.style.filter = 'alpha(opacity=' + opaa + ');' ;
  • imacibleb.style.filter = 'alpha(opacity=' + opab + ');';
  • }
  • else{
  • imaciblea.style.opacity = opaa/100;
  • imacibleb.style.opacity = opab/100;
  • }
  • if(opaa>=100){
  • opaa=30;
  • opab=100;
  • document.getElementById('divimagea').src=document.getElementById('divimageb').src
  • return false;
  • }
  • setTimeout("defilmage()",25);
  • }
  • </script>
  • </head>
  • <body>
  • <div id="divconteneur"STYLE="position:absolute;top:150px;left:50px;">
  • <img id='divimagea' src="1.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:100;FILTER:alpha(opacity=100)">
  • <img id='divimageb' src="3.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:0;FILTER:alpha(opacity=0)">
  • </div>
  • <img src="1.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('1')">
  • <img src="3.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('3')">
  • <img src="4.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('4')">
  • <img src="5.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('5')">
  • <img src="6.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('6')">
  • </body>
  • </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<script>
var oxo=1;
var opaa=0;
var opab=100;
function defilmage(selimage){
if(oxo==1){
opaa=30;
document.getElementById('divimageb').src=selimage+".jpg";
oxo=0;
}
imacibleb=document.getElementById('divimagea');
imaciblea=document.getElementById('divimageb');
if(imacibleb.src==imaciblea.src){
return false;
}
opaa+=5;
opab-=10;
if(document.all && !window.opera){ 
imaciblea.style.filter = 'alpha(opacity=' + opaa + ');' ;
imacibleb.style.filter = 'alpha(opacity=' + opab + ');';
} 
else{ 
imaciblea.style.opacity = opaa/100;
imacibleb.style.opacity = opab/100;
}
if(opaa>=100){
opaa=30;
opab=100;
document.getElementById('divimagea').src=document.getElementById('divimageb').src
return false;
}
setTimeout("defilmage()",25);
}
</script>
</head>
<body>
<div id="divconteneur"STYLE="position:absolute;top:150px;left:50px;">
<img id='divimagea' src="1.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:100;FILTER:alpha(opacity=100)">
<img id='divimageb' src="3.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:0;FILTER:alpha(opacity=0)">
</div>
<img src="1.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('1')">
<img src="3.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('3')">
<img src="4.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('4')">
<img src="5.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('5')">
<img src="6.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('6')">
</body>
</html>

 Conclusion

ca marche CA MAAAAAAACHE

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

26 septembre 2008 10:41:37 :
ajout d'un conteneur (un div)
28 septembre 2008 15:42:39 :
reinitilisation d'une variable plutot afin de mieux gere les deplacements rapides
03 octobre 2008 12:07:28 :
mise a jour xhtml
15 novembre 2008 16:19:53 :
ajout de sources
20 janvier 2009 11:59:17 :
ajout de script
03 mars 2009 19:37:31 :
ajout d'une variable pour la vitesse + optimisation
25 mai 2009 19:35:07 :
ajout d'un prechargement ajout d'un tableau pour les images
26 mai 2009 13:05:44 :
ajout d'un repertoire pour les images

 Sources du même auteur

Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT...
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS
Source avec Zip Source avec une capture DRAG & DROP VERS UN CANVAS
Source avec Zip Source avec une capture DIAPO EN CSS 3D
Source avec Zip CONVERTISSEUR D'IMAGE BASE 64

 Sources de la même categorie

Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
TAILLE DE TEXTE EN FONCTION DE LA RÉSOLUTION par tefa24600

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture DIAPORAMA SIMPLE PAR IFRAME par sartoz
Source avec Zip Source avec une capture CENTRAGE D'IMAGE AVEC PETIT EFFET par kazma
Source avec Zip Source avec une capture LIGHTBOX DIAPORAMA par kazma
Source avec Zip Source avec une capture CAROUSELLE 3D par kazma
Source avec Zip Source avec une capture AFFICHAGE D'IMAGE par kazma

Commentaires et avis

Commentaire de jjdagadir le 26/09/2008 12:26:55 9/10

çà marche bien et çà peut facilement se caser et être utile.
Il peut être sympa de spécifier pour certains que les vignettes sont redimensionnables et que les EM sont une mesure au même titre que les pixels.
Donc quelques commentaires...mais bravo, le code est léger et çà marche.

KENAVO

Commentaire de petifa le 27/09/2008 11:44:45

slt,  tu as raison ça marche, c'est simple. Mais j'ai une petite question, pourquoi ne pas mettre oxo en paramètre de la fonction defilmage?
et aussi à la fin lorsque l'image doit être affichée tu mets
# if(opaa>=100){
# opaa=30;
alors qu'à l'initialisation opaa est à 0. Il y a une raison?
bon code

Commentaire de kazma le 27/09/2008 13:21:32 administrateur CS

opaa c'est un reglage que j'ai fait pour que l'opacité ne demamre pas a partir de zero question de visuel rien n'empeche de modifie voir supprime cette valeur pour oxo etant donne que c'est un variable que je modifie c'est a voir

Commentaire de petifa le 27/09/2008 18:11:50 9/10

oui je suis d'accord mais pour le fondu n'a pas le même rendu si tu bouge assez rapidement sur les diverses "images". Par exemple si tu es sur une image et que pendant le fondu tu bouge sur une autre les variables ne sont pas réinitialisées.
Si tu met en paramètre de fonction tu peux refaire un fondu "complet" à chaque fois, mais bon c classe
merci kazma pour cette source

Commentaire de kazma le 27/09/2008 19:27:39 administrateur CS

reinitialise la variable a la troisieme ligne du script (opaa=30) selon mes testes en reinitialisant juste opaa cela suffit

function defilmage(selimage){
if(oxo==1){
opaa=30;
document.getElementById('divimageb').src=selimage+".jpg";
oxo=0


++

Commentaire de sopatleb le 10/10/2008 13:27:01

bonjour kazma j'ai modifié ton code pour en faire un trombinoscope a mettre sur un site. je joind le code mais faudra mettre les photos.
je vais mettre le tous sur le site. par contre j'aimerai lorsque je clique sur le nom afficher un commentaire a un autre endroit de la page.

Sopatleb



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<script>
var oxo=1;
var opaa=0;
var opab=100;
function defilmage(selimage){
if(oxo==1){
opaa=30;
document.getElementById('divimageb').src=selimage+".jpg";
oxo=0;
}
imacibleb=document.getElementById('divimagea');
imaciblea=document.getElementById('divimageb');
if(imacibleb.src==imaciblea.src){
return false;
}
opaa+=5;
opab-=10;
if(document.all && !window.opera){
imaciblea.style.filter = 'alpha(opacity=' + opaa + ');' ;
imacibleb.style.filter = 'alpha(opacity=' + opab + ');';
}
else{
imaciblea.style.opacity = opaa/100;
imacibleb.style.opacity = opab/100;
}
if(opaa>=100){
opaa=30;
opab=100;
document.getElementById('divimagea').src=document.getElementById('divimageb').src
return false;
}
setTimeout("defilmage()",25);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
background-color: #000099;
}
-->
</style></head>
<body>
<div id="divconteneur"style="position:absolute; top:455px; left:400px;"><img src="1.jpg" name="divimagea" id='divimagea' style="position:absolute; width:11em; height:15em; border: 8;" /><img id='divimageb' src="1.jpg" style="position:fixed; width:12em; height:15em;" /></div>


<img src="1.jpg" border="2" style="width:6em; height:7em; position: absolute; left: 434px; top: 9px;" onmouseover="oxo=1;defilmage('1')"/>
<img src="president.jpg" width="140" height="44" border="2" style="width:140px; height:40px; position: absolute; left: 420px; top: 129px;" onmouseover="oxo=1;defilmage('1')" />

<img src="2.jpg" border="2" style="width:6em; height:7em; position: absolute; left: 248px; top: 87px;" onmouseover="oxo=1;defilmage('2')"/>
<img src="secretaire.jpg" width="164" border="2" style="width:140px; height:40px; position: absolute; left: 230px; top: 204px;" onmouseover="oxo=1;defilmage('2')"/>

<img src="4.jpg" border="2" style="width:6em; height:7em; position: absolute; left: 631px; top: 84px;" onmouseover="oxo=1;defilmage('4')"/>
<img src="tresorier.jpg" width="164" border="2" style="width:140px; height:40px; position: absolute; left: 617px; top: 203px;" onmouseover="oxo=1;defilmage('4')"/>

<img src="5.jpg" style="width:6em; height:7em; position: absolute; left: 379px; top: 253px;" onmouseover="oxo=1;defilmage('5')" />
<img src="initiation.jpg" width="164" border="2" style="width:140px; height:40px; position: absolute; left: 357px; top: 371px;" onmouseover="oxo=1;defilmage('5')"/>

<img src="6.jpg" style="width:6em; height:7em; position: absolute; left: 529px; top: 255px;" onmouseover="oxo=1;defilmage('6')"/>
<img src="nature.jpg" width="164" border="2" style="width:140px; height:40px; position: absolute; left: 511px; top: 371px;" onmouseover="oxo=1;defilmage('6')"/>

<img src="3.jpg" style="width:6em; height:7em; position: absolute; left: 689px; top: 254px;" onmouseover="oxo=1;defilmage('3')"/>
<img src="organisation.jpg" width="164" border="2" style="width:140px; height:40px; position: absolute; left: 665px; top: 371px;" onmouseover="oxo=1;defilmage('3')"/>

<img src="7.jpg" style="width:6em; height:7em; position: absolute; left: 221px; top: 252px;" onmouseover="oxo=1;defilmage('7')" /><img src="arbitre.jpg" width="164" border="2" style="width:140px; height:40px; position: absolute; left: 203px; top: 371px;" onmouseover="oxo=1;defilmage('7')"/>

<img src="8.jpg" style="width:6em; height:7em; position: absolute; left: 67px; top: 250px;" onmouseover="oxo=1;defilmage('8')" />
<img src="journal.jpg" width="164" border="2" style="width:140px; height:40px; position: absolute; left: 43px; top: 371px;" onmouseover="oxo=1;defilmage('8')"/>

<img src="9.jpg" style="width:6em; height:7em; position: absolute; left: 841px; top: 252px;" onmouseover="oxo=1;defilmage('9')"/>
<img src="webmaster.jpg" width="164" border="2" style="width:140px; height:40px; position: absolute; left: 819px; top: 370px;" onmouseover="oxo=1;defilmage('9')"/>
</body>
</html>

Commentaire de kazma le 10/10/2008 18:10:46 administrateur CS

pas de soucis si tu veut mettre le tout sur le site

pour modifie un texte rajoute une ligne vers la fin du script

opab=100;
document.getElementById('divimagea').src=document.getElementById('divimageb').src
document.getElementById(MONTEXTE).nodevalue=le texte
return false;
}
setTimeout("defilmage()",25);
}
</script>

rajoute un parametre a la fonction parametre qui sera le texte selon l'image parametre que tu configure a l'appel de la fonction

function defilmage(MONTEXTE,selimage){

parametre que tu configure a l'appel de la fonction

onmouseover="oxo=1;defilmage('le texte a afficher','3')"/>

Commentaire de pmthelord le 13/11/2008 10:57:44

Hello et merci pour ton code !

Moi j'ai une autre question.

Comment faire pour centrer l'image qui s'affiche au centre de la page horizontalement ?

Merci à toi

Commentaire de pmthelord le 13/11/2008 18:58:55 10/10

Hello et merci pour ton code !

Moi j'ai une autre question.

Comment faire pour centrer l'image qui s'affiche au centre de la page horizontalement ?

Merci à toi

Commentaire de bad_dark_spirit le 24/11/2008 15:47:33 10/10

Ca marche très bien, c'est dommage pour le positionnement de l'image en absolute, c'est toujours un peu lourd pour les compatibilité. En ce qui concerne le reste, c'est super, surtout en ce qui concerne la compatibilité avec les navigateurs :)

Commentaire de grandcharles le 26/12/2008 01:59:26 9/10

Bonjour, et merci pour ce code, qui me plait plus spécialement que d'autres que j'ai pu essayer. Mais étant encore un novice en la matière, pourrait-on avoir une réponse à la question posée un peu plus haut, à savoir, comment centrer LE fondu sur la page web, parce que j'ai beau essayer, je ne trouve pas.

Merci d'avance.

Charles

Commentaire de delaney le 19/01/2009 18:20:14

Bonjour Kazma et merci pour cet excellent code !
Je m'arrache les cheveux en essayant d'y ajouter un bouton pause (ou de provoquer l'interruption du script en survolant l'image avec la souris).
Aurais-tu une idée ?

Commentaire de delaney le 20/01/2009 09:41:35 10/10

désolé, j'avais oublié de donner une note à ce code :)
voilà qui est fait

Commentaire de kazma le 20/01/2009 11:56:42 administrateur CS

retelecharge le zip j'y ai rajouter deux source une avec bouton marche arret l'autre avec marche arret au passage de la sourie

Commentaire de delaney le 20/01/2009 12:12:27

Super !
merci Kazma t'es un chef !!!

Commentaire de kawapoulpe le 03/03/2009 16:03:47 9/10

Bonjour,

Je trouve votre script très intéressant.
Je souhaite le mettre en oeuvre pour afficher un petit bandeau en haut de mon site permettant de faire défiler qques images en boucle et en fondu enchaîné.
Je suis parti sur le modèle fondu auto (je ne souhaite pas que la souris agisse dessus, je veux que çà bouge tout seul dès le chargement de la page).
Pour info : Je suis débutant.
J'ai qques questions :
1 - Pourquoi, au démarrage (à l'affichage de la page), j'ai 2 images qui se fondent très vite, puis ça défile ensuite normalement ?
2 - Est-il possible de changer la vitesse de fondu ? (temps de fondu pour passer d'une image à l'autre, que je trouve trop rapide).

3 - Je souhaite mettre plusieurs photos l'une à coté de l'autre mais qui soient indépendantes. Pour cela, j'ai essayé de dupliquer le div pour en mettre 4 les uns à coté des autres (en changeant leur positionnement) afin d'avoir 4 animations différentes. Mais seule la première change, pas les autres (j'ai changé le nom du div conteneur pour les 4).
Que dois-je faire pour en faire fonctionner plusieurs ? Dois-je aussi dupliquer la fonction et la personnaliser pour chaque animation ? (soit 4 fonctions, ayant chacune un nom différent et associée à chaque animation conteneur + divimage) ou bien ai-je raté un truc ?

Merci d'avance.
Cordialement.
Kawapoulpe.

Commentaire de kazma le 03/03/2009 19:45:26 administrateur CS

retelecharge le zip j'ai fat les modif
-pour l'affichage au demmarage c'est bon
-pour la vitesse j'ai cree une variable tu n'a qu'a modifier sa valeur

-pour plusieurs diapos il faudrait refaire a chaque fois le script et modifier a chaque fois le nom des variable et autres je n'ai aucune autres alternative pour le moment

Commentaire de delaney le 03/03/2009 19:54:21

Salut Kazma,

Merci encore pour ce code, il est top. Je l'ai utilisé sur un site (celui de ma belle-mère : www.serres-isle-adam.fr) en le modifiant un peu.
Je l'ai couplé à une base de données (via php) qui fournit automatiquement les photos au script. Si tu es d'accord et si quelqu'un en a besoin, je peux essayer de poster le code modifié. Merci et a+

Commentaire de kawapoulpe le 03/03/2009 22:42:00

Salut,
Merci pour cette rapidité !
Ok pour le point 1. Plus de truc bizarre, c'est tout propre !
Ok pour le point 3, je vais dupliquer.

Par contre pour le point 2, ce n'est pas ce que je voulais.

Ce que tu as mis en variable, c'est le temps d'affichage de chaque image, mais ça, j'avais vu où il était (mais bon, c'est cool quand même car c'est plus visible et plus facile à paramétrer de l'extérieur :o))

Ce que j'aimerai paramétrer, c'est la vitesse du fondu-enchainé, c'est à dire le temps qu'il met pour passer d'une image à l'autre avec le jeu des opacités.
Autrement dit, je souhaite allonger le temps qu'il met à partir du moment où il commence à faire disparaître une image jusqu'à affichage complet de l'autre.
est-ce possible ?

En tout cas merci pour ce super script !
Cordialement.
Kawapoulpe.

Commentaire de kazma le 04/03/2009 10:38:12 administrateur CS


toutes les lignes ou j'ai mis un des @ sont celles que tu peut modifie afin de jouer sur le fondu tu peut toujour essayer cette exemple que j'ai modifie afin que le fondu soit plus long (oubli pas de retirer les @)



function defilmage(reg){
oxo=reg;

if(compteur==nombredimage){
compteur=0
}

if(oxo==1){
compteur++
opaa=00;  @@@@@@@@@@@@@@@
document.getElementById('divimageb').src=compteur+".jpg";
oxo=0;
}
imacibleb=document.getElementById('divimagea');
imaciblea=document.getElementById('divimageb');

opaa+=5;          @@@@@@@@@@@@@@@@@@@@@@@@@@@
opab-=5;          @@@@@@@@@@@@@@@@@@@@@@@@@@@
if(document.all && !window.opera){
imaciblea.style.filter = 'alpha(opacity=' + opaa + ');' ;
imacibleb.style.filter = 'alpha(opacity=' + opab + ');';
}
else{
imaciblea.style.opacity = opaa/100;
imacibleb.style.opacity = opab/100;
}
if(opaa>=100){
opaa=00;           @@@@@@@@@@@@@@@@@@@@@@
opab=100;
imacibleb.src=imaciblea.src
marche=setTimeout("defilmage(1)",vitesse);
return false
}
setTimeout("defilmage()",100);    @@@@@@@@@@@@@@@@@@@@@@@@
}
document.onload=setTimeout(defilmage,vitesse);

Commentaire de kawapoulpe le 04/03/2009 12:05:42

Bonjour,

Super, merci !!
Ça fait exactement ce que je veux, maintenant !

Merci beaucoup !
Cordialement.
Kawapoulpe.

Commentaire de cagoulechonchon le 22/05/2009 16:51:47

Merci Kasma pour ce script il est top et fait exactement ce que je veux !

Une question toutefois : lorsque je place mes images dans un dossier ("image") le diaporama bug apres la 2eme image. (j'ai juste changé la source ici :
<img id='divimagea' src="image/1.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:100;FILTER:alpha(opacity=100)">
<img id='divimageb'src="image/2.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:0;FILTER:alpha(opacity=0)">

Peut etre faut il faire une autre modification ailleurs mais je ne trouve pas où ..
Pouvez-vous me donner un conseil ?

Commentaire de kazma le 22/05/2009 18:37:22 administrateur CS

ici tu fait la modif

document.getElementById('divimageb').src=compteur+".jpg";

ca donne

document.getElementById('divimageb').src="image/"+compteur+".jpg";

Commentaire de cagoulechonchon le 23/05/2009 16:23:32

Merci Kazma tu es un dieu !

Commentaire de kazma le 23/05/2009 17:49:04 administrateur CS

je me contenterait d'etre un simple homosapiens

Commentaire de cPalabait le 24/05/2009 01:30:14 8/10

Bonjour,
Votre code est excellent, notamment parce qu'il fonctionne parfaitement avec IE  (contrairement à un autre code de "fondu enchainer" avec lequel je me suis cassé les dents! ).
Pour simplifier mes pages, j'ai tenté d'en isoler la partie "javascript" dans un fichier .js placé dans un sous-répertoire ... mais sans succès !
Est-ce possible ?
Je pense que c'est la ligne "document.onload=setTimeout(defilmage,vitesse);" qui me pose des difficultés ...
Enfin, j'aurai un 2nde question : est-il possible dans une même page d'y faire tourner un second fondu enchainé ?

Commentaire de cPalabait le 24/05/2009 11:39:58

Bonjour,
Correction : facile de déplacer tout ce qui est entre les balises <script> dans une feuille .js !
Mais j'observe que le fondu n'est plus effectif avec ie (l'enchainement se fait sans fondu), alors qu'il fonctionne bien  sous FF ...
Reste la possibilité ou non de placer un 2nd fondu enchainé dans une même page ...

Commentaire de cPalabait le 25/05/2009 00:58:59

Bonsoir.
Super code qui fonctionne parfaitement en local avec les images et une feuille .js dans des dossiers séparés.
Mais elle ne fonctionne plus une fois uploadée chez free !

Pourquoi cette différence de comportement entre local ou chez free ?

Pour tester, j'y ai uploadé vos fichiers d'exemple (avec le script dans le fichier et les images à la racine), et ça fonctionne bien. Mais mes pages et mon site sont trop complexes pour que je procède ainsi ...

Quelqu'un a-t-il une suggestion de solution ?

Commentaire de cagoulechonchon le 25/05/2009 14:55:48

Bonjour,
En effet j'ai le même probleme.. ca fonctionne parfaitement en local mais ca bug en ligne (moi je suis chez ovh donc pas de probleme de Free)
En revanche j'ai remarqué que ca ne bug qu'au 1er "tour" et ca marche nickel apres. Il faut probablement integrer un pré-chargement des images pour que ca marche des le 1er passage.
.. mais ca je ne sais pas faire..
quelqu'un est il plus doué que moi ?

Commentaire de kazma le 25/05/2009 18:10:03 administrateur CS

j'y pense depuis depuis un moment a mettre un prechargement mais je l'ai pas encore fait j'essaierais de le faire dans les jours a venir

Commentaire de kazma le 25/05/2009 19:41:57 administrateur CS

bon bas finalement j'aurait ete plus rapide que prevus

donc donc donc :
- j'ai rajouter un prechargement j'ai fait des testes et apparement ca marche

- j'ai du en conséquence rajouter un tableau (array) ce qui n'est pas un mal car maintenant on n'est plus oblige de renommer ses images 1 2 3 ...etc il faudra quand meme remplir le tableau du nom des images

- et enfin la variable qui contenait le nombre d'image a été supprimer elle ne servait plus a rien.

++

Commentaire de cPalabait le 25/05/2009 21:31:00

Bonsoir,
Quelle réactivité, KAZMA ! Je me suis empressé de remplacer l'ancien par un nouveau script, mais je ne sais pas comment entrer le lien relatif Images/fondu_ench dans la ligne :

document.getElementById('divimageb').src=tbimage[compteur]+".jpg";

Je l'avais précédemment ajouté ainsi :
document.getElementById('divimageb').src="Images/fondu_ench/"+compteur+".jpg";

Qui peut me renseigner ?

Commentaire de cPalabait le 25/05/2009 23:36:39

Bonsoir,
Ce que j'avais écris fonctionne bien en local ... mais toujours pas sur ma page perso de free : rien avec ff; et juste la trace immobile d'un lien vers une image avec ie ... Je pense que le problème est une affaire de liens relatifs ou absolu, mais sans parvenir à aller plus loin ! A moins que ce soit propre à free !
Merci encore à Kazma.

Commentaire de kazma le 26/05/2009 09:02:05 administrateur CS


document.getElementById('divimageb').src="Images/fondu_ench/"+compteur+".jpg";

normalement c'est bon a voir .src="Images/fondu_ench  mais le I de image en minuscule c'est peut etre la cause


cpalabait
j'ai fait des testes en locale et sur un serveur et sa marchait bien et je pense aussi que c'est du au lien car apparement il ne trouve pas le repertoire des images tu peut toujour essayer de mettre le nom du repertoire en minuscule si bien evidement il y a des majuscules et aussi eviter un nom long

Commentaire de cagoulechonchon le 26/05/2009 10:55:38

Boujour a tous !
Tout d'abord merci Kazma, ca fait vraiment plaisir la rapidité avec laquelle tu reponds !
Bon alors moi de mon coté j'ai fait pas mal de tests avec ton nouveau script et ca fonctionne bien tant qu'on ne place pas les images dans un sous dossier.
Ce qui se passe c'est que les 2 premieres images passent bien et apres elles "sautent" d'une image a l'autre..
Maintenant peut-etre que mon chemin n'est pas bon .. Pour un dossier image intitulé "diaporama" j'ai essayé
- document.getElementById('divimageb').src="diaporama/"+tbimage[compteur]+".jpg";
- document.getElementById('divimageb').src="diaporama/"+compteur+".jpg";
Voila pour le compte rendu mais je ne fais peut etre pas avancer les choses ..

Commentaire de kazma le 26/05/2009 13:12:08 administrateur CS

et une modif de plus

bon j'ai donc rajouter un repertoire celui ci se nome images si on veut lui donner un autre nom il faudra modifier le script

en théorie je dit bien en  théorie il devrait pas y avoir de probleme au niveau du répertoire

conclusion : c'est repartie pour des testes

Commentaire de cPalabait le 26/05/2009 14:09:29

Bonjour,
J'ai réduit le nom de mon répertoire fondench et l'ai remonté pour être à la racine de mon dossier (n'est plus un sous-répertoire de Images).
Mais ça ne fonctionnait toujours pas sur free, alors que ça fonctionne bien en local.
J'ai tout mis à la racine, le .js et mes images au même niveau que mon fichier .html, et toujours rien ...
Je suis en panne de tests à faire ;-)
A plus

Commentaire de cPalabait le 27/05/2009 00:58:09

Bonsoir KAZMA,
J'ai poursuivi mes test et ai observé que le problème vient peut-être du format des photos :
1) un diaporama contenant une de mes images insérée au milieu des tiennes tourne bien chez free, sauf mon image qui n'est pas affichée,
2) l'une de tes images ne s'affiche plus si je la ré-enregistre avec gimp ou xnview en jpg truecolor v1.1, alors même que je l'ai laissée au milieu du diaporama réalisé avec tes images ...

Ma question : quel logiciel as-tu utilisé pour enregistrer tes images, et quel format as-tu choisi ?

Commentaire de kazma le 27/05/2009 09:40:59 administrateur CS

j'utilise aussi xnview et paint.net

Commentaire de cPalabait le 27/05/2009 14:09:34

Merci Kazma,
Pour mes tests, je ne parviens pas à obtenir le même format que vos images, même avec paint.net, xnview 1.96.1, ou gimp 2.26 :
Vous sortez du .jpg Truecolor (v1.2) et je n'obtiens que du .jpg Truecolor (v1.1) !
Acceptez-vous de me dire comment vous procédez, svp ?

Commentaire de kazma le 27/05/2009 15:09:57 administrateur CS

franchement je fait rien de special a part enregistrer avec la config par default
la cause peut etre aussi le nom de tes images si quand tu teste sur windows sa marche lsa peut etre du aux majucule ou encore les espace si il y en a
windows fait abstraction de tous ceci mais souvent les serveur sur internet fonctionnes sur unix et unix est sensible aux majuscules minuscule contrairement a windows et ( coucou ) est different de ( Coucou ) et pour les espaces il peuvent etres remplace pas d'autre carracteres

Commentaire de cicco69 le 27/05/2009 17:11:47

Bonsoir,
j'ai récupéré le code du défilement auto et du marche/arrêt au passage de la sourie.
Cependant, je n'arrive pas à faire fonctionner cet ensemble. il y aurait-il une âme charitable pour m'aider ? :D
voici le code :

<!--DIAPO JAVASCRIPT-->
<script>
function fOver(img)
{
document.getElementById('divimageb').src=img;
clearTimeout(marche);
}
function fDiapo ()
{
var img = document.rien.hid.value
tbimage = img.split("|");
var preImages = new Array;
var opaa = 0;
var opab = 100;
var compteur = 2;
var vitesse = 1200;
function precharge()
{
for (i = 0; i < tbimage.length; i++)
{
preImages[i] = new Image();
preImages[i].src = tbimage[i];
}
setTimeout(defilmage,vitesse);
}
varTest = true;
function defilmage()
{
if(compteur==tbimage.length-1)
{
compteur = -1;
}
if(!varTest)
{
compteur++;
opaa=10;
document.getElementById('divimageb').src=tbimage[compteur];
varTest = true;
}
var imacibleb=document.getElementById('divimagea');
var imaciblea=document.getElementById('divimageb');
opaa+=3;
opab-=4;
if(document.all && !window.opera)
{
imaciblea.style.filter = 'alpha(opacity=' + opaa + ');' ;
imacibleb.style.filter = 'alpha(opacity=' + opab + ');';
}
else
{
imaciblea.style.opacity = opaa/100;
imacibleb.style.opacity = opab/100;
}
if(opaa>=100)
{
opaa=10;
opab=100;
imacibleb.src=imaciblea.src;
marche = setTimeout(defilmage,vitesse);
return varTest = false;
}
marche = setTimeout(defilmage,25);
}
if(navigator.appName.substring(0,3)=="Mic")
{
attachEvent("onload",precharge);
}
else
{
addEventListener("load", precharge, false);
}
}
</script>


//DIAPO
echo '<div id="divConteneur">';
echo '<img id="divimagea" src="'.$image[0].'" STYLE="opacity:100;FILTER:alpha(opacity=100)">';
echo '<img id="divimageb"src="'.$image[1].'" STYLE="opacity:0;FILTER:alpha(opacity=0)">';
echo '</div>';
$tabToString = implode('|', $image);// le tableau est transformé en chaine de caracteres avec comme separateur |
echo '<form name="rien"><input type="hidden" value="'.$tabToString.'" name="hid"/></form>';
echo '<script>fDiapo();</script><div class="thumbs">';
$j=0;
//thumbs
while ($j<$i && $thumbs)
{
echo '<img src="'.$thumbs[$j].'" class="mini" onMouseOver = " fOver(\''.$thumbs[$j].'\')" onMouseMove = "fDiapo ()">';
$j++;
}
echo '</div>';


je tiens à préciser que le défilement ce passe bien tant que je m'approche pas du thumbs. et que au mouvement de la sourie sur l'image le diapo s'arrête bien mais ne repars pas.
Merci par avance.

Commentaire de cPalabait le 27/05/2009 22:59:14

Bonsoir KAZMA,

Mon problème est résolu : mes conversions d'images prenaient comme extension .JPG au lieu de .jpg
Ca crevait les yeux, et je ne le voyais pas !

Merci de ta patience, et encore une fois, bravo pour ton code et ta perspicacité.

Commentaire de cagoulechonchon le 27/05/2009 23:25:28

Kazma U Rock !

Merci pour le script avec le sous dossier, j'avais tout simplement zapé un des chemin pour la source dues images (ba oui c'est ca qd on copie-colle bêtement ! ;-)
Bref ca marche tres bien  (le tps de chargement est un peu long mais je pense que ca doit etre normal)

Merci encore pr ta patience !!

Commentaire de rtchi le 28/05/2009 12:01:28

merci pour le script, il est tres utile et simple. J'ai par contre une question qui va peut etre vous sembler bete (ou simple) mais je debute dans le dev web. j'ai utilisé ton  script pour dérouler 4 photos dans un bloc style
bloc div
texte texte texte
texte texte texte
texte texte texte
     photos (via ton script)
texte texte texte
texte texte texte
texte texte texte
</div>

ca colle nickel mais comme j'ai plusieurs resolutions utilisateur j'ai voulu remplacer le positionnement absolute par float  fixed pour que l'image s'adapte au contexte) Malheureusement cela ne fonctionne plus, une photo s'affiche puis l'autre en dessous et vice versa.

C'est peut etre juste un pb de Css ou de positionnement mais je seche

merci d'avance de votre aide

Commentaire de mrabali le 03/06/2009 20:46:40

Bonjour kazma, et merci pour ce script.

Je suis débutant dans le développement web, j'ai ajouté un peu du code php pour pouvoir automatiser la liste des images sans la modifier à chaque fois qu'on ajoute une image au répertoire.

Voici le code pour ceux qui sont intéressés (toutes remarques ou suggestions seront les bienvenues) :

<?php
$arrImages = glob("images/*.jpg"); //la fonction glob() recherche les images ".jpg" contenues dans le dossier "images" et retourne un tableau contenant ('images/img1.jpg', images/img2.jpg', images/img3.jpg',...)

for ($i=0; $i<count($arrImages); $i++){ //on fait une boucle sur le tableau retourné pour enlever "images/" du début (7) et '.jpg' de la fin (-4)
$listeImages .= "," . substr($arrImages[$i], 7, -4);
}
$listeImages = substr($listeImages, 1); // au final $listeImages contient "img1,img2,img3,..."
?>

<!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>
<title>Fondu</title>
</head>

<body>
<div id="listeImages" style="display:none;"><?php echo $listeImages; ?></div><!-- on stock la liste des images dans cette div qu'on n'affichera pas bien sûr -->

<table><tr><td><!-- j'ai mis les images dans une table pour corriger le problème du positionnement absolu et j'ai enlevé le positionnement absolu à la seconde image-->
<img id='divimagea' src="<?php echo $arrImages[0]; //la première image trouvée par la fonction glob() ?>" style="position:absolute; width:15em; height:15em; opacity:100; FILTER:alpha(opacity=100);">
<img id='divimageb'src="<?php echo $arrImages[1]; //la deuxième image trouvée par la fonction glob() ?>" style="width:15em; height:15em; opacity:0; FILTER:alpha(opacity=0);">
</td></tr></table>

<script type="text/javascript">
<!--
//j'ai mis le code javascript en bas de la page pour pouvoir récupérer la liste des images de la div

var arrImages = document.getElementById('listeImages').innerHTML; //on récupère notre liste des images contenue dans la div
tbimage = arrImages.split(','); //on transforme cette liste en un tableau

//le reste est le même

preImages = new Array;
var opaa = 0;
var opab = 100;
var compteur = 2;
var vitesse = 2000;

function precharge(){
for (i=0; i<tbimage.length; i++){
preImages[i] = new Image();
preImages[i].src = 'images/' + tbimage[i] + '.jpg';
}
setTimeout(defilmage, vitesse);
}

function defilmage(reg){
oxo = reg;
if (compteur == tbimage.length - 1){
compteur = -1;
}
if (oxo == 1){
compteur++;
opaa = 10;
document.getElementById('divimageb').src = 'images/' + tbimage[compteur] + '.jpg';
oxo = 0;
}
var imacibleb = document.getElementById('divimagea');
var imaciblea = document.getElementById('divimageb');
opaa += 3;
opab -= 4;
if (document.all && !window.opera){
imaciblea.style.filter = 'alpha(opacity=' + opaa + ');';
imacibleb.style.filter = 'alpha(opacity=' + opab + ');';
}
else{
imaciblea.style.opacity = opaa / 100;
imacibleb.style.opacity = opab / 100;
}
if (opaa >= 100){
opaa = 10;
opab = 100;
var xcc = imaciblea.src.length - 4;
var cxx = imaciblea.src.lastIndexOf('/') + 1;
var nomimg = imaciblea.src.substring(cxx, xcc);
imacibleb.src = 'images/' + nomimg + '.jpg';
setTimeout('defilmage(1)', vitesse);
return false;
}
setTimeout('defilmage()', 25);
}
if (navigator.appName.substring(0, 3) == 'Mic'){
attachEvent('onload', precharge);
}
else{
addEventListener('load', precharge, false);
}
-->
</script>
</body>
</html>

Commentaire de cagoulechonchon le 17/06/2009 13:07:25

Bonjour à vous !
C'est vrai que ce script est vraiment genial !
Par contre je m'aperçois qu'il semble poser un petit probleme sous ie6 : j'ai un message qui me dit : "An error has occurred in the script on this page". Ce message me précise
- la ligne : <body onLoad="init();">
- l'erreur : "objet expected"
Le même probleme se pose pour ie7

Y a t-il une alternative pour regler ce probleme ?

Commentaire de cagoulechonchon le 23/06/2009 10:44:36

Je n'arrive pas a trouver comment faire pour que le diaporama de défilement automatique ("fondu marche arret .html") démarre automatiquement lorsque la page se charge (sans avoir a cliquer "marche")
J'avoue que je suis vraiment nul en Javascript..

Quelqu'un aurait une idée pour me mettre sur la voix ?

Commentaire de cagoulechonchon le 29/06/2009 14:50:50

Personne n'a une idée ?

Commentaire de Ricquet le 27/10/2009 16:52:57

Bonjour Kazma !
bravo pour ton script que j'ai adopté dans la page d'accueil de mon site www.edialbum.fr
tout fonctionne y compris l'autorun pour répondre à cagoulechonchon,
cependant, j'ai une différence d'affichage entre firefox (impeccable) et i.explorer 6 ou 8 (saccades).
as tu une explication voir une suggestion ?
j'ai lu tout le fil, ton script fait des émules et tu es donc très sollicité...
merci !

Commentaire de kazma le 28/10/2009 13:28:24 administrateur CS

salut

je vient de visite ton site avec ie 6 et 8 pas mal l'adaptation et je n'ai rien remarque tout m'a semble bien fonctionner a tu essayer sur un autre ordi ?

Commentaire de Ricquet le 28/10/2009 20:58:19

effectivement sur un autre ordi, IE est OK !
l'effet de saccade vient donc de mon PC uniquement sur Internet explorer.
Bien vu !
@+

Commentaire de born2kill le 22/11/2009 13:33:29 10/10

Vraiment niquel ce script ! 10/10 sans hésitations.
Je me demande par contre s'il y a possibilité de changer l'effet de transition entre chaque images?

Commentaire de moughlee le 08/12/2009 11:31:45

hello,

super c'est ce que je cherche le diaporama avec fondu et défilement automatique.
Mais j'ai un souci, je ne trouve pas comment redimmensionner la taille des photos qui apparaissent. Comment peut on faire pour quil scanne tous les fichiers d'un dossier pour que des qu'on ajoute une photo ds ce dossier elle soit automatique ment ds le diaporama ?

merci a+

Commentaire de pharen le 08/12/2009 14:29:42

Bravo !! superbe diaporama
comme on dit: simple et de bon gout !!

Commentaire de kdoduciel le 12/12/2009 13:25:18 10/10

Kazma, c'est vraiment la class ;-) c'est simple, propre, efficace et bien d'autres. Merci beaucoup !
Juste une p'tite question? J'ai séparé dans un fichier JS le code,
puis retiré le css inclus dans ton code, pour le mettre dans ma feuille css perso. les parametres suivant :  
opacity:100;
FILTER:alpha(opacity=100);
Ne passe pas la validation W3C! Je les ai purement et simplement supprimés et ça fonctionne toujours,sous IE et FFx.????
Question: Sont-ils indispensables? (event. pour d'autre explorateur?)
Encore un grand merci!

Commentaire de kazma le 12/12/2009 19:19:18 administrateur CS

c'est pour initialise le demmarage mais si sa marche sans laisse comme ca

Commentaire de kdoduciel le 14/12/2009 09:35:59

J'ai compris à quoi ils servent... Il sont juste indispensable ;-) la honte. Mais en xhtml strict 1.0 le CSS passe pas.En HTML 2.0 ça passe avec un avertissement.
BAD_DARK_SPIRIT  regrettait la position absolute voici une solution, elle est en ligne ici:http://www.institutosmose.ch/?fichier=cont_sgm

html:
<div id="animation">
<script type="text/javascript" src="script/diapo.js"></script>
<div id="divconteneur">
<img id='divimagea' src="script/vue/visuel_1.jpg" alt="animation massage SGM" style="opacity:100;FILTER:alpha(opacity=100)"/>
<img id='divimageb' src="script/vue/visuel_2.jpg" alt="animation massage SGM" style="opacity:0;FILTER:alpha(opacity=0)"/>
</div>
CSS:
/* ---- Le div animation contient les trois div du script et j'ai suprimé la position absolute du div conteneur ---*/
#animation{
float:left;
width:11em;
height:10em;  
}

#divconteneur{
/* position:absolute; */
top:350px;
left:235px;
}
#divimagea{
position:absolute;
width:10em;
height:10em;
}
#divimageb{
position:absolute;
width:10em;
height:10em;
}

Commentaire de Mexos le 04/01/2010 21:42:23

Bravo et merci pour ton code.
Par contre je suis débutant webdev et j'ai un petit soucis.
J'essaie de mettre le diaporama dans une page inclue dans mon index.php avec un include(). Les aperçus sont à leur place, mais la grande image sort de la div.
Un screenshot vous parlera plus : http://mexos.free.fr/grrr.jpg
J'espere que vous pourrez m'aider (j'ai regardé les réponses précédentes concernant les problemes de position, mais ca fait un moment que je galère et j'arrive a rien =s)
D'avance merci :).

Commentaire de myckel32 le 19/01/2010 20:48:56

Salut Kazma,

Après avoir lu tous les commentaires, je viens de relever une erreur sur mon scritp, enfaite quand les images (fondu automatique) disparaisse il y a toujours la première qui apparaît brièvement sur la fenêtre tu serais d'ou cela pourrait venir ?

Commentaire de mariaudais le 10/02/2010 11:09:08

bonjour,
merci beaucoup Karma pour ces sources.
J'ai réussi à faire un fondu enchainé automatique et j'ai vu qu'on pouvait créer une table des images par la fonction glob (MRABALI le 30/06). Si j'ai bien compris ça permet d'ajouter des images dans le fichier images sans avoir à toucher au programme. Mais je ne comprends pas trop où il faut placer ces 1eres lignes (<?php
$arrImages = glob("images/*.jpg") ... jusqu'à ?>
Je n'utilise pas le php.
Merci  de votre aide

Commentaire de beney le 28/02/2010 12:46:29 9/10

Bonjour,

J'ai sans soucis réussis à me servir de ce script, cependant je souhaiterai mettre plusieurs diapo en fondu enchainé, et comme je l'ai vu plus haut dans les commentaire il "suffirait" de changer tous les nom de variables. Chose que j'ai fait mais qui ne fonctionne pas, en effet je n'ai qu'une diapo qui fonctionne sur les deux (Sachant que j'ai aussi changé le nom des div etc..). Voici ce que donne le script dans <head> : (ici seul la deuxiéme diapo fonctionne, l'autre image reste fixe)

<script>
tbimage=new Array('LaMereZou-0274','LaMereZou-0286','LaMereZou-0315','LaMereZou-0329','LaMereZou-0473','LaMereZou-0481') //tableau des image mettre le nom de toutes les images
preImages=new Array
var opaa=0;
var opab=100;
var compteur=2
var vitesse=2000

function precharge() {
  for (i = 0; i < tbimage.length; i++) {
    preImages[i] = new Image()
    preImages[i].src = 'images/'+tbimage[i]+'.jpg'
}
setTimeout(defilmage,vitesse);
}

function defilmage(reg){
oxo=reg;
if(compteur==tbimage.length-1){
compteur=-1
}
if(oxo==1){
compteur++
opaa=10;
document.getElementById('divimageb').src="images/"+tbimage[compteur]+".jpg";
oxo=0;
}
var imacibleb=document.getElementById('divimagea');
var imaciblea=document.getElementById('divimageb');

opaa+=3;
opab-=4;
if(document.all && !window.opera){
imaciblea.style.filter = 'alpha(opacity=' + opaa + ');' ;
imacibleb.style.filter = 'alpha(opacity=' + opab + ');';
}
else{
imaciblea.style.opacity = opaa/100;
imacibleb.style.opacity = opab/100;
}
if(opaa>=100){
opaa=10;
opab=100;
var xcc=imaciblea.src.length-4
var cxx=imaciblea.src.lastIndexOf("/")+1
var nomimg=imaciblea.src.substring(cxx,xcc)
imacibleb.src='images/'+nomimg+'.jpg'
setTimeout("defilmage(1)",vitesse);
return false
}
setTimeout("defilmage()",50);
}
if(navigator.appName.substring(0,3)=="Mic"){
attachEvent("onload",precharge);
}
else{
addEventListener("load", precharge, false);
}

tbimage=new Array('LaMereZou-0208','LaMereZou-0214','LaMereZou-0244','LaMereZou-0247','LaMereZou-0449','LaMereZou-0275') //tableau des image mettre le nom de toutes les images
preImages=new Array
var opac=0;
var opad=100;
var comp=2
var vit=2000

function precharge() {
  for (i = 0; i < tbimage.length; i++) {
    preImages[i] = new Image()
    preImages[i].src = 'images/'+tbimage[i]+'.jpg'
}
setTimeout(defilmage,vit);
}

function defilmage(reg){
oxo=reg;
if(comp==tbimage.length-1){
comp=-1
}
if(oxo==1){
comp++
opac=10;
document.getElementById('divimaged').src="images/"+tbimage[comp]+".jpg";
oxo=0;
}
var imacibled=document.getElementById('divimagec');
var imaciblec=document.getElementById('divimaged');

opac+=3;
opad-=4;
if(document.all && !window.opera){
imaciblec.style.filter = 'alpha(opacity=' + opac + ');' ;
imacibled.style.filter = 'alpha(opacity=' + opad + ');';
}
else{
imaciblec.style.opacity = opac/100;
imacibled.style.opacity = opad/100;
}
if(opac>=100){
opac=10;
opad=100;
var xcc=imaciblec.src.length-4
var cxx=imaciblec.src.lastIndexOf("/")+1
var nomimg=imaciblec.src.substring(cxx,xcc)
imacibled.src='images/'+nomimg+'.jpg'
setTimeout("defilmage(1)",vit);
return false
}
setTimeout("defilmage()",50);
}
if(navigator.appName.substring(0,3)=="Mic"){
attachEvent("onload",precharge);
}
else{
addEventListener("load", precharge, false);
}
</script>

Merci d'avance pour l'aide !

Commentaire de kazma le 06/03/2010 21:15:23 administrateur CS

j'ai cree un script base sur celui ci pour mettre plusieurs diapos http://www.javascriptfr.com/codes/DIAPO-MULTIPLES-FONDU_50083.aspx

Commentaire de WhiteStorm le 07/04/2010 18:14:40

Bonjour, le script est excellent, seulement je rencontre un problème particulier: la première transition se passe parfaitement mais les suivantes sont abruptes.
Vous pouvez voir le problème à l'adresse suivante: http://www.éfc.ch

Pourriez-vous me dire si j'ai fait une erreur dans l'application du script?

Commentaire de WhiteStorm le 07/04/2010 23:20:34

Le diapo n'est plus visible sur http://www.éfc.ch , mais il m'a semblé que le problème venait du fait que les images suivantes ne se "dissolvent" pas.

Commentaire de WhiteStorm le 08/04/2010 19:36:29

Bonjour, j'ai réglé le problème qui bizarrement venait du fait que mes images étaient stockées dans un sous-répertoire (images/subfolder/xxx.jpg) et que j'ai mis ce sous-répertoire dans le tableau array('subfolder/xxx.jpg')
En remplaçant dans le code images/ par images/subfolder/ et en l'enlevant du tableau ça a fonctionné.

J'ai un 2ème problème: je souhaite que l'image soit cliquable, hors quand je mets un <a> que ce soit sur le div conteneur ou l'image B, ça modifie l'ordre d'apparition des images (l'image de départ revient entre chaque image), si je le mets uniquement sur l'image A, l'image n'est pas cliquable.

Une idée?

Commentaire de WhiteStorm le 08/04/2010 19:44:42 10/10

De nouveau résolu, avec compteur = 1
(pourquoi était-il à 2? lol)

Excellent script bravo !

Commentaire de finkely le 07/05/2010 15:54:22

Bonjour,
j'aurai une question par rapport à l'utilisation de ce script,
est-il possible de faire deux diaporama différents dans la même page ?
Je voudrais en fait que une colonne affiche certaines photos et une autre colonne fasse la même chose avec d'autres photos.
merci de m'indiquer la marche à suivre
cordialement

Commentaire de finkely le 07/05/2010 16:11:20

heu mea culpa j'avais pas vu le commentaire de Kazma un peu plus haut et merci encore c'est exactement ce dont j'avais besoin
dsl d'avoir fait mon boulet...

Commentaire de frederik83 le 17/06/2010 07:36:58

bonjour

j'ai mis des photos mais elles sont cote a cote et aucun fondu

alors j'ai peut etre fait une mauvaise manip
j'ai mis les url en bas du javascript

merci de m'aider

Commentaire de boer87 le 17/11/2010 03:14:52

Bonjour,
Merci pour ce code excellent.
Je suis débutant, et j'aimerai savoir comment peut on faire pour rendre la transition plus longue.
Cordialemnt.

Commentaire de franklinternaute le 16/05/2011 09:54:25

Bonjour,
je realise un site actuellement en tant que debut. jai utilise le code de fondu pour diaporama.
Je l'ai inserer a ma page mais depuis au chargement des deux premieres images pas de pb mais aux suivantes, un cadre apparait au chargement avec un logo image.
Quel peut etre le probleme?
je peux envoyer le code de ma page si ca peut aider.
merci d'avance et bravo pour le code!!

Commentaire de kazma le 16/05/2011 11:13:16 administrateur CS

les images n'on pas ete trouvé le chemin pour les images doit etre incorecte

Commentaire de franklinternaute le 16/05/2011 11:49:21

RE
Merci pour ta reponse, j'apprecie, cependant, je me suis mal exprime. l'image est chargee mais lors de son chargement apparait tres rapidement un cadre gis en son pourtour et un logo image au centre.

je te joins le code si ca peut t'aider!


<!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=utf-8" />
<title>###</title>
<style type="text/css">
<!--
#container {
height: 650px;
width: 1024px;
}
#header {
float: left;
height: 90px;
width: 300px;
margin-top: 60px;
margin-left: 63px;
}
#contenu {
float: left;
height: 500px;
width: 1024px;
margin-top: 25px;
}
#menusousmenu {
float: left;
height: 400px;
width: 270px;
color: #CCC;
}
#image {
float: right;
height: 450px;
width: 500px;
margin-right: 100px;
margin-top: 3px;
}
body {
background-color: #000;
}
#image2 {
height: 333px;
width: 500px;
}
-->
</style>
<link href="../CSS/MENU.css" rel="stylesheet" type="text/css" />
<link href="../CSS/SOUS MENU.css" rel="stylesheet" type="text/css" />
<link href="../CSS/BLOC5.css" rel="stylesheet" type="text/css" />
</head>
<script>

tbimage=new Array('ROOFTOP_AT_IL_GAMBERO _003','JIMMY_JAMZ _001','PARAGON_003','LAVAZZA_MARQUEE_2009_001','LAVAZZA_2010_001','CATALANO_HOUSE_LIVING_001') //tableau des image mettre le nom de toutes les images
preImages=new Array
var opaa=0;
var opab=25;
var compteur=1
var vitesse=4000

function precharge() {
  for (i = 0; i < tbimage.length; i++) {
    preImages[i] = new Image()
    preImages[i].src = '../IMAGES/HOME/'+tbimage[i]+'.jpg'
}
setTimeout(defilmage,vitesse);
}

function defilmage(reg){
oxo=reg;
if(compteur==tbimage.length-1){
compteur=-1
}
if(oxo==1){
compteur++
opaa=10;
document.getElementById('divimageb').src="../IMAGES/HOME/"+tbimage[compteur]+".jpg";
oxo=0;
}
var imacibleb=document.getElementById('divimagea');
var imaciblea=document.getElementById('divimageb');

opaa+=3;
opab-=4;
if(document.all && !window.opera){
imaciblea.style.filter = 'alpha(opacity=' + opaa + ');' ;
imacibleb.style.filter = 'alpha(opacity=' + opab + ');';
}
else{
imaciblea.style.opacity = opaa/100;
imacibleb.style.opacity = opab/100;
}
if(opaa>=100){
opaa=10;
opab=100;
var xcc=imaciblea.src.length-4
var cxx=imaciblea.src.lastIndexOf("/")+1
var nomimg=imaciblea.src.substring(cxx,xcc)
imacibleb.src='images/'+nomimg+'.jpg'
setTimeout("defilmage(1)",vitesse);
return false
}
setTimeout("defilmage()",25);
}
if(navigator.appName.substring(0,3)=="Mic"){
attachEvent("onload",precharge);
}
else{
addEventListener("load", precharge, false);
}
</script>
</head>
<body>
<div class="container" id="container">
  <div class="header" id="header"><img src="../IMAGES/JEAN-PIERRE-BIASOL_S1.jpg" width="300" height="69" /></div>
  <div class="contenu" id="contenu">
    <div class="image" id="image">
      <div class="image2" id="image2">
      <img id='divimagea' src="../IMAGES/HOME/ROOFTOP_AT_IL_GAMBERO _003.jpg" STYLE="position:absolute;width:500px;height:333px;opacity:100;FILTER:alpha(opacity=100)">
<img id='divimageb'src="../IMAGES/HOME/JIMMY_JAMZ _001.jpg" STYLE="position:absolute;width:500px;height:333px;opacity:0;FILTER:alpha(opacity=0)"></div>
      <div class="navigation" id="navigation"></div>
    <div class="description" id="description"></div></div>
    <div id="menu">
      <ul>
        <li><a href="HOME.html" id="menu">HOME</a></a></li>
        <li><a href="ABOUT.html" id="menu">PROFILE</a></li>
        <li><a href="INTERIOR.html" id="menu">INTERIOR</a></li>
        <li><a href="INTERIOR_RESIDENTIAL.html" id="sousmenu">RESIDENTIAL</a></li>
        <li><a href="INTERIOR_COMMERCIAL.html" id="sousmenu">COMMERCIAL</a></li>
        <li><a href="INTERIOR_HOSPITALITY.html" id="sousmenu">HOSPITALITY</a></li>
        <li><a href="INTERIOR_RETAIL.html" id="sousmenu">RETAIL</a></li>
        <li><a href="INTERIOR_EXHIBITION&amp;INSTALLATION.html" id="sousmenu">EXHIBITION AND INSTALLATION</a></li>
        <li><a href="PRODUCT_LIST.html" id="menu">PRODUCT</a></li>
        <li><a href="PRESS_001.html" id="menu">PRESS</a></li>
        <li><a href="CONTACT.html" id="menu">CONTACT</a></li>
      </ul>
</div>
  </div>
</div>
</div>
</body>
</html>

Commentaire de franklinternaute le 18/05/2011 10:41:23

RE
Je n'ai pu resoudre le probleme du cadre apparaissant lors de mon fondu sur le diaporama pares les deux premieres images. J'avais inclu le code, et je serais pret a mettre le site en ligne si je pouvais resoudre ce probleme

Commentaire de demarc le 13/07/2011 11:47:49 10/10

Exactement ce que je cherchais, simple, facile à paramétrer... superbe travail, un grand merci

Commentaire de samoxus le 14/07/2011 19:05:38

Bonjour! Super ce code! Mais comment personnaliser les dimensions des images ?!

Commentaire de samoxus le 14/07/2011 19:10:08

C'est bon ! Je viens de trouver! Merci super script  !!!! 10/10 !!

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Diaporama image avec fondu enchainé, lien vers page, etdiapo suit scroll de page [ par nonosims ] salut a tous, je viens vous solliciter pour vous expliquer mon problème. Débutant en script, j'essaye de mettre en place, un bandeau vertical à droite ajouter fin sur diaporama [ par jpthali ] Salut à tous, j'ai une petite question concernant l'excellent source [url=http://www.javascriptfr.com/codes/DIAPO-SIMPLE-TOUT-PRET_25617.aspx]de ce d Image flottante qui apparait et disparait en fondu, aléatoirement [ par benmp2p ] Bonjour SVP j'ai besoin d'un peut d'aide Voila je cherche un script qui permet d'afficher une image cliquable flottante (qui reste affiché méme en b Chargement d'une image en fondu [ par pastissimo ] Bonjour,Je bidouille en JS et HTML et apres maintes recherches je n'ai trouvé aucun script permettant d'avoir une image qui apparait en fondu au charg Fondu sur image [ par Guerrilla ] Bonjour à tous,Enfaite je travaille sur une sorte de CMS (Jahia), donc ça se peut qu'il y ait des contraintes, mais je demande quand même.J'ai donc un Bloquer un setTimeout [ par ov3rdoze ] Salut à tousJ'essaye de faire une galerie photo avec un diaporama. Tout fonctionne mais j'ai un problème dans un cas particulier : Si on arrete le dia Problème avec les caractères spéciaux ! [ par Ruffneck2045 ] Bonjour, j'ai cr&#233;er un diaporama &#224; l'aide&nbsp;de php &amp; javascript et j'ai un petit probl&#232;me.En cliquant sur une image du diaporama diaporama javascript avec un lien pour chaque image [ par feldrik ] Bonjour, je bute sur un problème depuis des jours, et espère trouver sur ce forum une âme charitable pour me tirer de ce mauvais pas. Je veux faire un help!Diaporama ou mur d image [ par ameliecuisine ] Bonjour, Voila je voudrais creer un diaporama d'image ou un mur d image avec pour chaque image une legende et un lien vers un site internet . Je voudr diaporama automatique avec liens sur chaque image [ par ju1385 ] Bonjour, j'ai ici un script simple de diaporama d'image que j'ai récupéré et qui marche bien. Cependant, je voudrais y modifier/ajouter 2 choses (je n


Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,733 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales