How to know if there is no more pics to disable (nxt/prv) button

I have this code

css:

div#container{
overflow: hidden;
width: 331px;
}

div#content {
position:relative;
}

jquery:

$("#left").click(function(){
$("#content").animate({"right": "+=328px"}, "slow");
});

$("#right").click(function(){
$("#content").animate({"right": "-=328px"}, "slow");
});

HTML:

<button id="left"><<</button>
<button id="right">>></button>开发者_如何学JAVA
<div id="container">
<div id="content">
<table border="0">
<tr>
<td><img src="images/img1.gif"></td>
<td><img src="images/img2.gif"></td>
<td><img src="images/img3.gif"></td>
<td><img src="images/img4.gif"></td>
</tr>
<tr>
<td>Description1</td>
<td>Description2</td>
<td>Description3</td>
<td>Description4</td>
</tr>
</table>

when i click for example prv button 15 times the div move 328px every time! my question is how to know the last postion that the gallery should stop moving?

thank you

I don't like using tables for that... Divs make your code much more fluid, and would allow an elegant solution: is(':last-child') on active div

But since you're doing it with table, I can think of two ways of doing this

One is using a counter, then checking it against number of columns of table. If displaying more than one column per step, then it will be total number of columns / visible columns:

$(function(){
    var position = 1;

    $("#left").click(function(){
    var size =  $("#content table").find('tr').first().find('td').size();

        if(position < (size / 2) ) {
            $("#content").animate({"right": "+=198px"}, "slow");
            position ++;
        }
    });

    $("#right").click(function(){
        if(  position > 1) {
            $("#content").animate({"right": "-=198px"}, "slow");
             position --;
        }
    });
});

Fiddle: http://jsfiddle.net/9sYWK/5/

The other solution consists in calculating how many times #content has moved. You can get it by using $("#content").css('right');. Since you know you always move your div in 328px steps, you can divide it by 328 to get how many times it was clicked

I don't know, you need a counter somehow.

One way would be to count the td's in a row?

//Add a class to your td's
<td class="img_gallery"><img src="images/img1.gif"></td>
<td class="img_gallery"><img src="images/img2.gif"></td>
<td class="img_gallery"><img src="images/img3.gif"></td>
<td class="img_gallery"><img src="images/img4.gif"></td>

// in your js ...
$td_count = $(".img_gallery").size();

// Now you have many different ways of dealing with this,
// you can have a counter, or allow to move 5 * 328, whatever you want.