Applying scrollTo to auto generated links

Question

Edit!

Turns out I had just got too many apostrophes going on when calling the scrollto. The working code is below:

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

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

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

});

Thanks for the help!

I am making a portfolio site for an artist who wants there work displayed in a horizontal style (hence the table in the code below). The idea is to display thumbnails of each image (ol #thumbnails) and the images to the right.

I want to use the scrollTo plugin to allow the user to click on any image and have it scroll into view. I am looking for some help in creating the right jquery for this.

Essentially I can make it work if I hard code each link in the jQuery but this is less than ideal for a CMS powered site whicg will be constantly updated.

Can anyone help with some code that will apply to each of the thumbnail links?

I have the following code:

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

My current jQuery is:

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

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

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

});

I tried to apply the scrollTo using .each() function pulling id's as variables but cannot get anything to work.

Any help would be greatly appreciated!

Answer 1

Edit: Refactored to call your click binding only once and use 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
    }


});

Working example on jsFiddle - http://jsfiddle.net/UB4wC/2/