Использование scrollTo для автогенераций

Question

Редактировать!

Оказывается, у меня было слишком много апострофов, когда вы звоните в scrollto. Рабочий код приведен ниже:

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

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

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

}); 

Спасибо за помощь!

Я создаю сайт портфолио для художника, который хочет, чтобы работа отображалась в горизонтальном стиле (отсюда таблица в коде ниже). Идея состоит в том, чтобы отображать миниатюры каждого изображения (ol #thumbnails) и изображения справа.

Я хочу использовать плагин scrollTo, чтобы пользователь мог щелкнуть любое изображение и просмотреть его. Я ищу некоторую помощь в создании правильного jquery для этого.

По существу, я могу заставить его работать, если я жестко кодирую каждую ссылку в jQuery, но это не так идеально подходит для сайта CMS, который будет постоянно обновляться.

Может ли кто-нибудь помочь с кодом, который будет применяться к каждой из миниатюр?

У меня есть следующий код:

 <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> 

Мой текущий JQuery является:

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

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

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

}); 

Я пытался применить scrollTo используя .each функцию() тяговое идентификаторы как переменные, но не может получить ничего Работа.

Любая помощь была бы принята с благодарностью!

Answer 1

Edit: рефакторинга для вызова click связывания только один раз и использовать 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 
    } 


}); 

Рабочий пример на jsFiddle - http://jsfiddle.net/UB4wC/2/