Как узнать, нет ли больше картинок для отключения кнопки (nxt / prv) - PullRequest
Новая
       13

Как узнать, нет ли больше картинок для отключения кнопки (nxt / prv)

1 голос
/ 01 июня 2011

У меня есть этот код

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

когда я нажимаю, например, кнопку prv 15 раз, div каждый раз перемещается на 328 пикселей! мой вопрос: как узнать последнее положение о том, что галерея должна перестать двигаться?

спасибо

Ответы [ 2 ]

1 голос
/ 01 июня 2011

Мне не нравится использовать таблицы для этого ... Div делает ваш код намного более гибким и позволяет элегантное решение: is (': last-child') на активном div

Но так каквы делаете это с таблицей, я могу придумать два способа сделать это

Один использует счетчик, а затем проверяет его по количеству столбцов таблицы.Если для каждого шага отображается более одного столбца, то это будет общее количество столбцов / видимых столбцов: 

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

Другое решение состоит в подсчете, сколько раз# Контент переехал.Вы можете получить его, используя $("#content").css('right');.Поскольку вы знаете, что всегда перемещаете свой div с шагом 328px, вы можете разделить его на 328, чтобы узнать, сколько раз на него нажимали

0 голосов
/ 01 июня 2011

Не знаю, вам как-то нужен счетчик.

Один из способов - посчитать тд подряд? 

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