Using scrollTo to move along the x axis

Question

Right, last question for a while!

I am creating a horizontal portfolio site and am looking for some help using the scrollTo plugin in creating a next/previous style navigation for the user to flick through the images.

My HTML is:

        <div id="contentRight">

        <ul id="direction">

            <li id="next"><a id="forward">Next</a></li>
            <li id="prev"><a id="back">Previous</a></li>

        </ul>

        <table id="work">

            <tr>

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

            </tr>

        </table> 

    </div>

And my current failing jQuery is:

    $('#forward').click(function() {
    $('table#work tr').stop().scrollTo( '+=636', 800, {axis:'x'} );
});
$('#back').click(function() {
        $('table#work tr').stop().scrollTo( '-=636', 800, {axis:'x'} );
    });

Unfortunately the table tr does not move when #forward or #back is clicked.

Anyone any ideas why?

For extra info - the table is used as this appears to be best practice on dynamic horizontal sites that are without a fixed width.

Answer 1

It appears that I made the mistake of trying to scroll the table when scrolling the window was what I actually needed to do! The working jQuery is as follows:

    $('#forward').click(function() {
    $.scrollTo('+=560px', 800, { axis:'x' });
});
$('#back').click(function() {
    $.scrollTo('-=560px', 800, { axis:'x' });
});

Answer 2

Hello Dan, don't give up !! try this and let me is this want you want http://avinash.tk/dan/

Just modified the code in your previous post , Have a Look http://stackoverflow.com/questions/3240221/scrollto-and-horizontal-tables/3240695#3240695