Application de scrollTo aux liens générés automatiquement

Question

Editer!

Il s'avère que je venais de recevoir trop d'apostrophes lors de l'appel du scrollto. Le code de travail est ci-dessous:

$('.miniImage').click(function() { 

var $th = $(this); 
    var id = $th.attr('id'); 

    $.scrollTo("#" + id + "Image", 1000, {offset: {top:96, left:-636} }); 

}); 

Merci pour l'aide!

Je crée un site de portfolio pour un artiste qui veut que son travail soit affiché horizontalement (d'où le tableau dans le code ci-dessous). L'idée est d'afficher les vignettes de chaque image (ol #thumbnails) et les images à droite.

Je veux utiliser le plugin scrollTo pour permettre à l'utilisateur de cliquer sur n'importe quelle image et de la faire défiler dans la vue. Je suis à la recherche d'aide pour créer la bonne jquery pour cela. Essentiellement, je peux le faire fonctionner si je code dur chaque lien dans le jQuery, mais ce n'est pas idéal pour un site alimenté par CMS qui sera constamment mis à jour.

Quelqu'un peut-il aider avec du code qui s'appliquera à chacun des liens vignettes?

Je le code suivant:

 <div id="content"> 

    <ol id="thumbnails"> 

     <li class="mini"><a class="miniImage" id="horseOne"><img src="media/images/mini.jpg" alt="" /></a></li> 
     <li class="mini"><a class="miniImage" id="horseTwo"><img src="media/images/mini.jpg" alt="" /></a></li> 
     <li class="mini"><a class="miniImage" id="horseThree"><img src="media/images/mini.jpg" alt="" /></a></li> 
     <li class="mini"><a class="miniImage" id="horseFour"><img src="media/images/mini.jpg" alt="" /></a></li> 
     <li class="mini"><a class="miniImage" id="horseFive"><img src="media/images/mini.jpg" alt="" /></a></li> 
     <li class="mini"><a class="miniImage" id="horseSix"><img src="media/images/mini.jpg" alt="" /></a></li> 
     <li class="mini"><a class="miniImage" id="horseSeven"><img src="media/images/mini.jpg" alt="" /></a></li> 
     <li class="mini"><a class="miniImage" id="horseEight"><img src="media/images/mini.jpg" alt="" /></a></li> 

    </ol> 

    <div id="contentRight"> 

     <table id="work"> 

      <tr> 

       <td id="horseOneImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td> 
       <td id="horseTwoImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td> 
       <td id="horseThreeImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td> 
       <td id="horseFourImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td> 
       <td id="horseFiveImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td> 
       <td id="horseSixImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td> 
       <td id="horseSevenImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td> 
       <td id="horseEightImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td> 

      </tr> 

     </table> 

    </div> 

</div> 

Mon actuelle jQuery est:

$('.miniImage').click(function() { 

    var $th = $(this); 
    var id = $th.attr('id'); 

    $.scrollTo('"#" + id + "Image"', 1000, {offset: {top:96, left:-636} }); 

}); 

J'ai essayé d'appliquer le scrollTo en utilisant .each() fonction de traction id en tant que variables mais ne peut pas obtenir quoi que ce soit à travail.

Toute aide serait grandement appréciée!

Answer 1

Edit: refactorisé appeler votre click lier une seule fois et utiliser event delegation -

$('#thumbnails').bind('click', function(e){ 

    var target = e.target, // e.target grabs the node that triggered the event.  
     $target = $(target); // wraps the node in a jQuery object 
    var id = target.id; 

    if (target.nodeName === 'A') { 
     $.scrollTo('#'+ id + 'Image', 1000, {offset: {top:96, left:-636} }); 
     console.log($('#' + id + 'Image')) // for debugging in firebug 
    } 


}); 

Exemple de travail sur jsFiddle - http://jsfiddle.net/UB4wC/2/