sIFR c’est la classe.
LightBox, c’est la classe.
Des post contenant une video YouTube, c’est encore la classe.

Seulement voila, quand les vidéos sIFR, YouTube et LightBox sont sur la même page (ça fait “chargé” vous me direz), c’est plus la classe du tout du tout : les vidéos et sIFR - des objets Flash - sont affichés au dessus de votre jolie LightBox … dommage.

Ma solution, qui n’est peut être pas la meilleure :

1ère étape

Faire 2 petites fonctions JavaScript comme celles ci

• pour sIFR :
  Code (javascript)

  1.  
  2.             var sIFR_switch = function( activate ) {
  3.                 if (typeof sIFR == "function"){
  4.                         sIFR.rollback();
  5.                         if (activate) {
  6.                               // Si activate = true, on remet les sIFR
  7.                              sIFR.replaceElement( vos_replaceElement_a_vous );
  8.                         }
  9.             };
  10.          
• pour les autres élément :
  Code (javascript)

  1.  
  2.                var toggle_objects = function(show, elements) {
  3.                         if (elements) {
  4.                               for (i = 0; i < elements.lenght; i++) { elements[i].style.display = show ? ” : ‘none’ ; }
  5.                         }
  6.                };
  7.            

2ème étape

Il faut assigner ces fonctions aux liens de type LightBox / ThickBox / etc.
Bon, ce coup ci je met directement le code pour Behaviour / Prototype parce que bon c’est long le code générique.

Code (javascript)
1.  
2.         // Mes liens lightbox sont des <a> avec un attibut ‘ rel ‘ contenant ‘ lightbox ‘, donc ….
3.         ‘a’ : function(el) {
4.                if (el.hasAttribute(‘rel’) && el.getAttribute(‘rel’).match(‘lightbox’)){
5.                         Event.observe(el, ‘click’, function(e) {
6.                                           sIFR_switch(false);
7.                                           // Ici, mettre un tableau des objets à cacher ; pour moi,
8.                                           // ce sont tous éléments possédant la classe ‘ isFlash ‘
9.                                           var objets_a_cacher = document.getElementsByClassName(‘isFlash’)
10.                                           toggle_objects(); 
11.                         }, false);
12.                 }
13.           }
14.  

Behaviour est une librairie JavaScript écrite par Ben Nolan permettant d’assigner des fonctions sur des éléments DOM.

”
Et alors ?
Il suffit de faire une recherche DOM, avec getElementByID ou avec Prototype,
puis d’appliquer les attributs que l’on veut.
“

L’avantage est de pouvoir sélectionner ces éléments avec des sélecteurs CSS, dans un Objet JavaScript de type Hash.
Par exemple :

var mon_style = {

‘#contenu a.class1′ : function(element) {

el.onmouseover = function(e) {

this.style.width = ‘100px;’;

}

}

}

Permet de donner, à tous les liens de classe “class1″ contenus dans l’élément d’id “#contenu”, une largeur de 100px.

Evidemment, on aurait pu faire la même chose en CSS, par exemple

#contenu button.class1 { width: 50px; }
#contenu button.class1:hover { width: 100px; }

Mais lorsque l’on travaille avec des effets (Script.aculo.us, MooFX, etc. ) cela devient réellement utile.
Exemple, avec un effet script.aculo.us :

var mon_style = {

‘#contenu a.class1′ : function(element) {

el.onmouseover = function(e) {

new Effect.Pulsate(Event.element(e));

}

}

}

On peut ainsi jongler avec différents objets de style, que l’on applique avec

Behaviour.apply(mon_style);

Sources, Demos et tutos sur le site de Ben Nolan : http://bennolan.com/behaviour/

Bon JavaScript !