Применение scrollTo к автоматически сгенерированным ссылкам - PullRequest
Новая
       2

Применение scrollTo к автоматически сгенерированным ссылкам

3 голосов
/ 13 июля 2010

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

Оказывается, я только что получил слишком много апострофов при вызове 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 (), извлекающую идентификаторы как переменные, но не мог заставить что-либо работать.

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

1 Ответ

1 голос
/ 13 июля 2010

Редактировать: Рефакторинг для вызова вашей click привязки только один раз и использования делегирования события - 

$('#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/

...