11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

J'ai découvert il y a peu la librairie "jquery.js" et j'ai déjà visiter ce post sur le forum : http://forum.alsacreations.com/topic.php?fid=5&tid=29825&s=jcarousel

Celui m'a apporté une grande partie des renseignements nécessaires à la création de mon diaporama, mais j'aurais voulu intégrer en plus un effet de "fondu enchaîné" ( http://fr.wikipedia.org/wiki/Fondu_encha%C3%AEn%C3%A9 pour ceux qui comprennent pas le terme Smiley langue ) entre deux images.

Mais le problème c'est que je suis vraiment trop débutant en Javascript pour le réaliser par moi-même , c'est pourquoi je sollicite votre aide.

Je ne vous demande pas de m'apporter une solution clé en main, mais juste de me donner les éléments qui me permettrons d'obtenir l'effet souhaité.

Merci par avance de vos réponses,

deLux
Modifié par delux (19 Apr 2008 - 10:49)
J'ai trouvé un script permettant de faire disparaitre les images ect... mais comment insérer un fondu dans ce script ?

// JavaScript Document
function DivStatus( numero )
		{
			var divID = numero;
			if ( document.getElementById && document.getElementById( divID ) ) // Pour les navigateurs récents
				{
					Pdiv = document.getElementById( divID );
					PcH = true;
		 		}
			else if ( document.all && document.all[ divID ] ) // Pour les veilles versions
				{
					Pdiv = document.all[ divID ];
					PcH = true;
				}
			else if ( document.layers && document.layers[ divID ] ) // Pour les très veilles versions
				{
					Pdiv = document.layers[ divID ];
					PcH = true;
				}
			else
				{
					
					PcH = false;
				}
			if ( PcH )
				{
					Pdiv.className = ( Pdiv.className == 'cachediv' ) ? '' : 'cachediv';
				}
		}
		
function affCache(idpr)
{
	var pr = document.getElementById(idpr);
 	
			var NumDiv = 0;
			if ( document.getElementById ) // Pour les navigateurs récents
				{
					while ( document.getElementById(NumDiv) )
						{
							SetDiv = document.getElementById(NumDiv );
							if ( SetDiv && SetDiv.className != 'cachediv' )
								{
									DivStatus(NumDiv);
								}
							NumDiv++;
						}
				}
			else if ( document.all ) // Pour les veilles versions
				{
					while ( document.all[NumDiv] )
						{
							SetDiv = document.all[NumDiv];
							if ( SetDiv && SetDiv.className != 'cachediv' )
								{
									DivStatus(NumDiv);
								}
							NumDiv++;
						}
				}
			else if ( document.layers ) // Pour les très veilles versions
				{
					while ( document.layers[NumDiv] )
						{
							SetDiv = document.layers[NumDiv ];
							if ( SetDiv && SetDiv.className != 'cachediv' )
								{
									DivStatus(NumDiv);
								}
							NumDiv++;
						}
				}
	
		DivStatus(idpr);
}
Bonjour delux,

Je ne suis pas sûr de bien comprendre ce que tu veux faire Smiley confused
Sagit-il d'avoir un effet (fade ou autre) entre deux images de ton diaporama ou à l'agrandissement d'une miniature (dans le style lightbox) ?
Pour l'agrandissement "lightbox' style", j'ai trouvé ce lien

Une petite page en ligne que nous puissions voir à quoi ressemble ton diaporama ? Smiley cligne

Bonne continuation et n'hésites pas à préciser davantage ce que tu souhaites obtenir (pour ceusse qui,comme moi, ont du mal à se réveiller... Smiley lol )

Cdt,
Sylvain
Merci de ta réponse Sylvain,

En faite le script que j'ai donné dans mon post précédent me permet de faire un agrandissement dans la page, ce qui me va amplement. Par contre ce que je cherche à faire, pour améliorer un peu la galerie photos, se serait d'avoir un effet de fade, comme tu dis, entre deux images.

J'éditerais mon post quand j'aurai mis en ligne un page de la galerie photo Smiley smile

Delux
Voila le lien tant attendu : http://delux75.free.fr/Galerie/index.html

Par contre, j'ai un problème sous IE (qui à dit "normal" Smiley murf ), j'ai mis un petit effet sur opacité des miniatures en haut, celle-ci change quand le lien est survolé mais ça ne marche que sous FF...

deLux

EDIT : J'ai réglé le problème d'opacité sur les miniatures Smiley cligne
Modifié par delux (20 Apr 2008 - 16:10)
Hello delux,

Oui effectivement je te confirme que cela fonctionne sous IE6 Smiley jap

Par contre...
Une petite erreur css :

ul, ol {
    margin-left[#red]:[/#]0; un petit oubli
}

Plus embettant, il manque la déclaration d'encodage sur ta page :
http://forum.alsacreations.com/faq/faq-78-Comment-bien-declarer-l039encodage-des-caracteres-d039un-document-.html
http://forum.alsacreations.com/faq/faq-36-Charset-Iso-8859-1-iso-8859-15-utf-8-lequel-choisir-.html

Encore plus embettant ( Smiley lol ) le nom d'un identifiant (id) ne peut commencé que par une lettre...sinon, c'est mal Smiley eek
<div id="0" align="center">... 

Et ses petits frères sont invalides Smiley decu
En Français dans le texte : http://www.yoyodesign.org/doc/w3c/css2/syndata.html#value-def-identifier

Peut-être également un petit problème de poids pour tes images ( +free, ça fait beaucoup... Smiley lol )

Sinon, good job Smiley cligne

@+
Sylvain
Merci beaucoup pour ton soucis du détail Smiley smile je corrige tout ça !

Pour les images j'ai pris les premières qui venaient sous flickr, et Free c'est juste le ftp qui accueil ma démo donc ça devrait aller sur un ftp pro.
Modifié par delux (21 Apr 2008 - 13:46)
J'ai pas réussi à intégrer le fade dans mon diaporama... mais les pluggings m'ont l'air plutôt pas mal Smiley smile