Question

I have a jquery images scroller below that just scrolls horizontally left/right. The loop below could include an infinite number of images.

The problem I have is that while it scrolls left and right fine, once the images end you can just keep scrolling so essentially you’re just scrolling over white space!

How can I set a max scroll so that when the images end it won’t allow it to scroll anymore? Obviously the number of images is dynamic so it can have 1 or 100 images in there.

<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

Here’s a fiddle – http://jsfiddle.net/jCskY/2/

Answer 1

Compare the marginLeft with the width calculated by the sum of content a‘s widths.

If the margin passes the width, it should hide the button. Otherwise, it should show.

Here is a snippet of how it would be implemented.

Also, see this fiddle, for live example!

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();​