Disabling the 'Next' or 'Previous' button?

Question

I have an image gallery which works great. When the last slide is reached the image gallery just shuffles back to the first image.

Now, what I want to know is how can I disable the next or previous image when the last/first image has been reached? My code is...

Slider Script

function Slider(container, nav) {

    this.container = container;
    this.nav = nav.show();

    this.imgs = this.container.find('img');
    this.imgWidth = this.imgs[0].width;
    this.imgsLen = this.imgs.length;

    this.current = 0; 

}

Slider.prototype.transition = function ( coords ) {
    this.container.animate({
        'margin-left': coords || -( this.current * this.imgWidth ) 
    });
};

Slider.prototype.setCurrent = function( dir ) {
    var pos = this.current;
    pos += ( ~~( dir === 'next' ) || -1); 
    this.current = ( pos < 0  ) ? this.imgsLen  - 1 : pos % this.imgsLen; 
    return pos;
}; 

HTML

<div class="slider">
    <ul>
        <li>
            <img src="http://..../spacer.gif" height="400" />
        </li>
        <li>
            <img src="http://..../spacer.gif" height="400" />
        </li>
    </ul>
</div>

<div id="slider-nav">
    <button class="previous" data-dir="prev">Previous</button>
    <button data-dir="next">Next</button>
</div>​

Slider Initiation

<script>
    var container = $('div.slider').css('overflow', 'hidden').children('ul');

    var slider = new Slider( container, $('#slider-nav') );

        slider.nav.find('button').on('click', function() {
        slider.setCurrent( $(this).data('dir') );
        slider.transition();
    });
</script>

I understand this is probably an arse-about-face way of going about building a slider, but I've not been working with jQuery for long.

I've tried doing something along the lines of..

if (this.current = this.imgsLen - 1) {
    $(':button:contains("previous")').attr('disabled', 'disabled');
}

But to no avail. I've googled this too, and still haven't come up with anything which has worked.

In case you need one to play about with, heres a jsFiddle of it (ignore the fact that the image doesnt slide automatically, this is because of the li having a border!)

Answer 1

Here is a quick fix. I didn't look to much into the code so I am not sure if it the best way to go about things, but it looked like it worked for me.

http://jsfiddle.net/Qqk3U/7/

Changes detailed below.

Slider.prototype.setCurrent = function( dir ) {
    //remove the disabled attribute from both buttons
    this.nav.find('button[data-dir="next"]').removeAttr("disabled");
    this.nav.find('button[data-dir="prev"]').removeAttr("disabled");
    var pos = this.current;
    pos += ( ~~( dir === 'next' ) || -1); 
    this.current = ( pos < 0  ) ? this.imgsLen  - 1 : pos % this.imgsLen; 
    //if new pos is equal to the amount of images add the disabled attribute to next
    if(pos==this.imgsLen-1) this.nav.find('button[data-dir="next"]').attr("disabled", "disabled");
    //if new pos is equal to 0 add disabled attr to prev
    if(pos==0) this.nav.find('button[data-dir="prev"]').attr("disabled", "disabled");
    return pos;
}; 

then

<button disabled="disabled" class="previous" data-dir="prev">Previous</button>

disable the previous button by default, since you are on the first image and don't wanna go backwards.

Answer 2

Ok, so you've got a few things going on. In this code, there are two problems

if (this.current = this.imgsLen - 1) {
    $(':button:contains("previous")').attr('disabled', 'disabled');
}

First, assignment. this.current = this.imgsLen - 1 . Notice the single = ? You're setting this.current whenever the code runs.

Second, :button is shorthand for $("button, input[type='button']") . It'll work but since you know you only have <botton> you might just as well use $('button') since it will be faster.

Finally, the code previously submitted, but here's another option. Change up your nav to have previous and next classes:

<div id="slider-nav">
    <button class="previous" data-dir="prev">Previous</button>
    <button class="next" data-dir="next">Next</button>
</div>​

Then add this to your transition function:

if (this.current == this.imgsLen - 1) {
    console.log('disable next')
    $('button.next').addClass('disabled').attr('disabled', true)
    $('button.previous').removeClass('disabled').attr('disabled', false)
}
else if(this.current == 0) {
    console.log('disable previous')
    $('button.next').removeClass('disabled').attr('disabled', false)
    $('button.previous').addClass('disabled').attr('disabled', true)
}
else {
    console.log('enable all')
    $('button.next').removeClass('disabled').attr('disabled', false)
    $('button.previous').removeClass('disabled').attr('disabled', false)
}

Here's a working version:

http://jsfiddle.net/Qqk3U/15/

Hope that helps.