DIAPO EN FONDU ENCHAINE
cs_jjdagadir
Messages postés
127
Date d'inscription
lundi 7 avril 2003
Statut
Membre
Dernière intervention
6 mars 2009
-
26 sept. 2008 à 12:26
samoxus Messages postés 2 Date d'inscription samedi 12 septembre 2009 Statut Membre Dernière intervention 14 juillet 2011 - 14 juil. 2011 à 19:10
samoxus Messages postés 2 Date d'inscription samedi 12 septembre 2009 Statut Membre Dernière intervention 14 juillet 2011 - 14 juil. 2011 à 19:10
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/48063-diapo-en-fondu-enchaine
https://codes-sources.commentcamarche.net/source/48063-diapo-en-fondu-enchaine
14 juil. 2011 à 19:10
14 juil. 2011 à 19:05
13 juil. 2011 à 11:47
18 mai 2011 à 10:41
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
16 mai 2011 à 11:49
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>
<li>[HOME.html HOME]</li>
<li>[ABOUT.html PROFILE]</li>
<li>[INTERIOR.html INTERIOR]</li>
<li>[INTERIOR_RESIDENTIAL.html RESIDENTIAL]</li>
<li>[INTERIOR_COMMERCIAL.html COMMERCIAL]</li>
<li>[INTERIOR_HOSPITALITY.html HOSPITALITY]</li>
<li>[INTERIOR_RETAIL.html RETAIL]</li>
<li>[INTERIOR_EXHIBITION&INSTALLATION.html EXHIBITION AND INSTALLATION]</li>
<li>[PRODUCT_LIST.html PRODUCT]</li>
<li>[PRESS_001.html PRESS]</li>
<li>[CONTACT.html CONTACT]</li>
</html>
16 mai 2011 à 11:13
16 mai 2011 à 09:54
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!!
17 nov. 2010 à 03:14
Merci pour ce code excellent.
Je suis débutant, et j'aimerai savoir comment peut on faire pour rendre la transition plus longue.
Cordialemnt.
17 juin 2010 à 07:36
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
7 mai 2010 à 16:11
dsl d'avoir fait mon boulet...
7 mai 2010 à 15:54
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
8 avril 2010 à 19:44
(pourquoi était-il à 2? lol)
Excellent script bravo !
8 avril 2010 à 19:36
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 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?
7 avril 2010 à 23:20
7 avril 2010 à 18:14
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?
6 mars 2010 à 21:15
28 févr. 2010 à 12:46
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 !
10 févr. 2010 à 11:09
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
19 janv. 2010 à 20:48
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 ?
4 janv. 2010 à 21:42
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 :).
14 déc. 2009 à 09:35
BAD_DARK_SPIRIT regrettait la position absolute voici une solution, elle est en ligne ici:http://www.institutosmose.ch/?fichier=cont_sgm
html:
<script type="text/javascript" src="script/diapo.js"></script>
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;
}
12 déc. 2009 à 19:19
12 déc. 2009 à 13:25
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!
8 déc. 2009 à 14:29
comme on dit: simple et de bon gout !!
8 déc. 2009 à 11:31
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+
22 nov. 2009 à 13:33
Je me demande par contre s'il y a possibilité de changer l'effet de transition entre chaque images?
28 oct. 2009 à 20:58
l'effet de saccade vient donc de mon PC uniquement sur Internet explorer.
Bien vu !
@+
28 oct. 2009 à 13:28
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 ?
27 oct. 2009 à 16:52
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 !
29 juin 2009 à 14:50
23 juin 2009 à 10:44
J'avoue que je suis vraiment nul en Javascript..
Quelqu'un aurait une idée pour me mettre sur la voix ?
17 juin 2009 à 13:07
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 :
- l'erreur : "objet expected"
Le même probleme se pose pour ie7
Y a t-il une alternative pour regler ce probleme ?
3 juin 2009 à 20:46
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>
<?php echo $listeImages; ?>
<!-- on stock la liste des images dans cette div qu'on n'affichera pas bien sûr -->
<!-- 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-->
" style="position:absolute; width:15em; height:15em; opacity:100; FILTER:alpha(opacity=100);">
" style="width:15em; height:15em; opacity:0; FILTER:alpha(opacity=0);">
<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>
</html>
28 mai 2009 à 12:01
bloc div
texte texte texte
texte texte texte
texte texte texte
photos (via ton script)
texte texte texte
texte texte texte
texte texte texte
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
27 mai 2009 à 23:25
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 !!
27 mai 2009 à 22:59
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é.
27 mai 2009 à 17:11
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 '
';
echo '';
echo '';
echo '
';
$tabToString = implode('|', $image);// le tableau est transformé en chaine de caracteres avec comme separateur |
echo '<form name="rien"></form>';
echo '<script>fDiapo();</script>
';
$j=0;
//thumbs
while ($j<$i && $thumbs)
{
echo '';
$j++;
}
echo '
';
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.
27 mai 2009 à 15:09
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
27 mai 2009 à 14:09
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 ?
27 mai 2009 à 09:40
27 mai 2009 à 00:58
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 ?
26 mai 2009 à 14:09
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
26 mai 2009 à 13:12
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
26 mai 2009 à 10:55
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 ..
26 mai 2009 à 09:02
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
25 mai 2009 à 23:36
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.
25 mai 2009 à 21:31
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 ?
25 mai 2009 à 19:41
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.
++
25 mai 2009 à 18:10
25 mai 2009 à 14:55
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 ?
25 mai 2009 à 00:58
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 ?
24 mai 2009 à 11:39
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 ...
24 mai 2009 à 01:30
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é ?
23 mai 2009 à 17:49
23 mai 2009 à 16:23
22 mai 2009 à 18:37
document.getElementById('divimageb').src=compteur+".jpg";
ca donne
document.getElementById('divimageb').src="image/"+compteur+".jpg";
22 mai 2009 à 16:51
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 :
Peut etre faut il faire une autre modification ailleurs mais je ne trouve pas où ..
Pouvez-vous me donner un conseil ?
4 mars 2009 à 12:05
Super, merci !!
Ça fait exactement ce que je veux, maintenant !
Merci beaucoup !
Cordialement.
Kawapoulpe.
4 mars 2009 à 10:38
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);
3 mars 2009 à 22:42
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.
3 mars 2009 à 19:54
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+
3 mars 2009 à 19:45
-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
3 mars 2009 à 16:03
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.
20 janv. 2009 à 12:12
merci Kazma t'es un chef !!!
20 janv. 2009 à 11:56
20 janv. 2009 à 09:41
voilà qui est fait
19 janv. 2009 à 18:20
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 ?
26 déc. 2008 à 01:59
Merci d'avance.
Charles
24 nov. 2008 à 15:47
13 nov. 2008 à 18:58
Moi j'ai une autre question.
Comment faire pour centrer l'image qui s'affiche au centre de la page horizontalement ?
Merci à toi
13 nov. 2008 à 10:57
Moi j'ai une autre question.
Comment faire pour centrer l'image qui s'affiche au centre de la page horizontalement ?
Merci à toi
10 oct. 2008 à 18:10
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')"/>
10 oct. 2008 à 13:27
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>
</html>
27 sept. 2008 à 19:27
function defilmage(selimage){
if(oxo==1){
opaa=30;
document.getElementById('divimageb').src=selimage+".jpg";
oxo=0
++
27 sept. 2008 à 18:11
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
27 sept. 2008 à 13:21
27 sept. 2008 à 11:44
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
26 sept. 2008 à 12:26
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