Wie kann ich ein Graustufen-Skript auf dynamisch geladene Bilder anwenden?

Question

Ich bin relativ neu in der Programmierung und ich versuche, eine Galerie zusammenzustellen. Für das Nav, hatte ich gehofft, etwas Hilfe zu bekommen, einen Graustufeneffekt auf dynamisch geladene Daumen anzuwenden.

Ich kann es zum Laufen bringen, wenn es nicht dynamisch geladen wird (v1); alle Daumen erscheinen grau und verblassen auf Farbe beim Rollover), aber nicht mit dem dynamischen Bild Daumen (v2) ...

Ich würde jede Hilfe begrüßen.

Dank

v1: (nicht dynamische Daumen)

Die html: (wie beabsichtigt) alle Daumen sind Graustufen- und verblassen zu Farbe auf schweben

..... 
<div class="sub_nav_wrapper"> 
    <ul class="sub_nav thumbs"> 
     <articlep> 
      <li class="module variable"> 
       <img alt="" src="projects/thumbs/print/01.jpg"> 
       <span class="tn_viewbttn tn_dbttn">view</span> 
      </li> 
     </articlep> 
    </ul> 
</div> 
..... 

var mainDD = function(el){ 
var t = this; 
t.$el = $(el); 
t.tdcs = []; 

t.lis = t. $ El.find ('articlep') Kinder ('li');
t.lis.each (function() {
t.tdcs.push (neuer mainDDComponent (this));
});

v2: dynamisch

Hier ist der HTML-Code für die dynamischen Daumen:

<div class="sub_nav_wrapper"> 
    <ul class="sub_nav thumbs"> 
     <section id="projectsp"> 
      <div class="content"> 
      /*        
      //*dynamically loaded content - thumbs 

      //---- 
      //articlep = ' <articlep>' 
      //+ ' <li class="module variable">' 
      //+ ' <img src="projects/thumbs/print/'+picturep+'" alt=""/>' 
      //+ ' <span class="tn_viewbttn tn_dbttn">view</span>' 
      //+ ' </li>' 
      //+ ' </articlep>'; 
      //---- 
      */ 
      </div> 
     </section> 
    </ul> 
</div> 

Alle Daumen als Farbe zeigen und nur einzeln einschalten Maus über in Graustufen.

$('#projectsp').on('mouseover','articlep>li', function(){ 
    t.tdcs.push(new mainDDComponent(this)); 
}); 

Answer 1

Im Anschluss an brillout.com's answer, und auch Roman Nurik's answer und entspannen ein wenig die die "kein SVG Anforderung, können Sie Bilder in Firefox desaturate nur eine einzige SVG-Datei und einige CSS.

<?xml version="1.0" encoding="UTF-8"?> 
<svg version="1.1" 
    baseProfile="full" 
    xmlns="http://www.w3.org/2000/svg"> 
    <filter id="desaturate"> 
     <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 
              0.3333 0.3333 0.3333 0 0 
              0.3333 0.3333 0.3333 0 0 
              0  0  0  1 0"/> 
    </filter> 
</svg> 

mehr für this Frage