Установите максимальную горизонтальную прокрутку div

У меня есть скроллер изображений jquery ниже, который просто прокручивает горизонтально влево/вправо. Цикл ниже может включать в себя бесконечное количество изображений.

Проблема заключается в том, что при прокрутке влево и вправо, как только изображения заканчиваются, вы можете просто прокручивать, так что вы просто прокручиваете пробел!

Как установить максимальную прокрутку, чтобы при завершении изображений она больше не позволяла ей прокручиваться? Очевидно, что количество изображений является динамическим, поэтому оно может содержать 1 или 100 изображений.

<div id="imgThumbs" class="scroller" style="position:relative;height:75px;width: 306px; overflow: hidden; white-space: nowrap;">
    <a href="#" id="left-button" style="left:14px;top:25px;position:absolute;">
        <img src="left-button.png" width="20" height="20" />
    </a>  
    <a href="#" id="right-button" style="right:14px;top:25px;position:absolute;">
        <img src="right-button.png" width="20" height="20" />                               
    </a>
    <div id="contentScroller">                         
    <?php $counter = 1; while(the_repeater_field('images')): ?>                     
        <a class="fancybox" rel="group" href="<?php echo the_sub_field('high_resolution_image'); ?>" style="text-decoration:none!IMPORTANT;color:white!IMPORTANT;" class="showImg">
            <img class="image-<?php echo $counter; ?>" src="<?php echo the_sub_field('image'); ?>" width="90" height="68" alt="<?php echo the_title(); ?> <?php echo $counter; ?>" />
        </a>
     <?php $counter++; endwhile; ?>
     </div>
</div>
<script>
    jQuery(document).ready(function ($) {
        $('#right-button').click(function() {
            $('#contentScroller').animate({
                marginLeft: "-=306px"
            }, "fast");
        });
        $('#left-button').click(function() {
            $('#contentScroller').animate({
                marginLeft: "+=306px"
            }, "fast");
        });                     
    });
</script>

UPDATE

Здесь скрипка - http://jsfiddle.net/jCskY/2/

Ответ 1

Сравните marginLeft с шириной, вычисленной по сумме содержимого a width.

Если граница проходит ширину, она должна скрыть кнопку. В противном случае он должен показать.

Вот фрагмент того, как он будет реализован.

Также см. эту скрипту, для живого примера!

var updateRightLeftButtons = function() {
    if (306 > (parseInt($('#contentScroller').css('marginLeft')) * -1)) {
        $('#left-button').hide();
    } else {
        $('#left-button').show();
    }
    if ((($('#contentScroller a').width() * $('#contentScroller a').length) - 306) < (parseInt($('#contentScroller').css('marginLeft')) * -1)) {
        $('#right-button').hide();
    } else {
        $('#right-button').show();
    }
};
$('#right-button').click(function() {
    updateRightLeftButtons();
    if ($(this).is(':visible'))
    $('#contentScroller').animate({
        marginLeft: "-=306px"
    }, "fast", updateRightLeftButtons);
});
$('#left-button').click(function() {
    updateRightLeftButtons();
    if ($(this).is(':visible'))
    $('#contentScroller').animate({
        marginLeft: "+=306px"
    }, "fast", updateRightLeftButtons);
});
updateRightLeftButtons();

Ответ 2

<?php
$dirname = '_/img/album';
$pattern = "/(\.jpg$)/i"; // valid image extensions
if (is_dir($dirname)) {
    if ($handle = opendir($dirname)) {
        $count = 0;
        while (false !== ($file = readdir($handle))) {
            // if this file is a valid image
            if (preg_match($pattern, $file)) {
                $count++;
            }
        }
        closedir($handle);
    }
}
?>

тогда возьмите счетчик, умноженный на 20, и установите значение в ширину контейнера div