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

Lightbox et effet de fondu. Archive contenant le script et la démo.