Lightbox apparaissant de façon graduelle

En partant du tutoriel précédent ou les images sont chargées dynamiquement par Ajax, et avec l'ajout d'une fonction JavaScript de fondu, nous faisons apparaître progressivement la boite lumineuse.

Le code pour l'effet de fondu

Aucun changement dans les descripteurs CSS n'est utile, mais le code JavaScript d'affichage de la boite est complété de deux fonctions.

La fonction gradient:

function gradient(id, level)
{
  var box = document.getElementById(id);
  box.style.opacity = level;
  box.style.MozOpacity = level;
  box.style.KhtmlOpacity = level;
  box.style.filter = "alpha(opacity=" + level * 100 + ")";
  box.style.display="block";
  return;
}

Cette fonction change l'opacité d'un élément DOM, en l'occurence le <div> qui contient la lightbox, et nous prenons en compte les différents navigateurs pour plus de compatibilité.

Le niveau 0 assigné à la variable level, rend l'élément transparent, en le faisant varier jusqu'à 1 qui est l'opacité totale, on crée l'effet de fondu.

La fonction fade in:

function fadein(id) 
{
  var level = 0;
  while(level <= 1)
  {
    setTimeout( "gradient('" + id + "'," + level + ")", (level* 1000) + 10);
    level += 0.01;
  }
}

Elle crée l'effet de fondu en appelant la fonction gradient précédente avec des valeurs augmentant progressivement.

Le fonction setTimeout ajout un délai entre deux affichages.
Le niveau de transparence décroit de 0.01 à chaque appel, on l'utilise aussi pour calculer le délai qui ainsi tend à s'accroître.

Nous avons ajouté un paramètre à la fonction openbox:

openbox('images/acores.jpg', 1);

La valeur 1 active l'effet de fondu. La valeur 0 ou l'absence de ce paramètre affiche directement la boite.

La démonstration

Tous ces fichiers sont inclus dans l'archive.

Télécharger



Forum

faire un fadeout sur un div

30-06-2008 16:30:42

bryce

Bonjour, J'ai trouvé sur votre site le tutoriel suivant d'effet de fondu avec une lightbox. Il m'a été très utile pour faire un effet de fadein sur un div. Je cherche maintenant à faire l'effet inverse, c'est à dire un fadeout. J'ai modifié le code comme suit :
// Fonction pour faire un effet de fadeout à un calque

function fadeout(id) 
{
	var level = 1;
	while(level > 0)
	{
		setTimeout( "gradient('" + id + "'," + level + ")", (level* 1000) + 10);
		level -= 0.01;
	}
}
donc effectivement rien de spectaculaire... Cependant, ce qui l'est plus, c'est que le résultat obtenu est le même que le fadein et je ne comprend vraiment pas pourquoi et comment. Pourtant si je l'exécute pas à pas à l'aide de Firebug, le résultat obtenu est bien le bon... Voici l'adresse pour les tests : [url]http://www.mdprod.ch/fr/[/url] Il suffit de cliquer sur les '<<' pour un fadein et sur '>>' pour le fameux fadeout qui ne marche pas... Merci de votre aide!
30-06-2008 16:36:08

bryce

lol hé ben ça aura été rapide! je viens de trouver! :-P c'est en fait le temps que je mettais dans mon Timeout qui faisait défaut. J'ai modifié la fonction comme suit :
// Fonction pour faire un effet de fadeout à un calque

function fadeout(id) 
{
	var level = 1;
	var temps = 0;
	while(level > 0)
	{
		setTimeout( "gradient('" + id + "'," + level + ")", (temps* 1000) + 10);
		level -= 0.01;
		temps += 0.01;
	}
}
et mon problème s'est résolu de lui-même! J'espère que mon petit problème pourra rendre service à quelqu'un d'autre ;-)
© 2008-2014 Xul.fr