Applying scrollTo to automatically generated links

Question

Edit

Turns out I had too many apostrophes when you called scrollto. Work code 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 creating a portfolio for an artist who wants the work to be 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 image on the right.

I want to use the scrollTo plugin so that the user can click on any image and view it. 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 jQuery, but this is not so ideal for a CMS-enabled site that will be constantly updated.

- , ?

:

        <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(), id , .

!

Answer 1

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