Question

it works if I do this:

$(document).ready(function() {
    $('.button1').click(function() {
        var get_id = $(this).attr('id');
        $('.outter').fadeIn(750);
        $('#div_'+get_id).show();

    });
    $('.exit_button').click(function() {
        $('.outter').fadeOut();
        $('.inner_content').hide();
    });

    $('.next').click(function() {   
        var current1 = $('.inner_content:visible');                     
                current1.hide();
        current1.next('.inner_content').show();  

    });

    $('.previous').click(function() {
        var current2 = $('.inner_content:visible');
        current2.hide();
        current2.prev('.inner_content').show(); 

    });


});

But I want the previous and next buttons to disable when they come to the last or first in their class so I do this:

$(document).ready(function() {
    $('.button1').click(function() {
        var get_id = $(this).attr('id');
        $('.outter').fadeIn(750);
        $('#div_'+get_id).show();

    });
    $('.exit_button').click(function() {
        $('.outter').fadeOut();
        $('.inner_content').hide();
    });

    $('.next').click(function() {   
        var current1 = $('.inner_content:visible');
        var get_id2 = current1.attr('id');
        if(('#'+get_id2+'.inner_content').is(':last'))
        {
        }
        else
        {   
        current1.hide();
        current1.next('.inner_content').show();  
        }
    });

    $('.previous').click(function() {
        var current2 = $('.inner_content:visible');
        var get_id3 = current2.attr('id');      
        if(('#'+get_id3+'.inner_content').is(':first'))
        {
        }
        else
        {
        current2.hide();
        current2.prev('.inner_content').show(); 
        }
    });


});

But I can’t get that to work at all.

My HTML:

<img src="thumbs/1.jpg" class="button1" id="pic_01" />
<img src="thumbs/2.jpg" class="button1" id="pic_02" />
<img src="thumbs/3.jpg" class="button1" id="pic_03" />
<img src="thumbs/4.jpg" class="button1" id="pic_04" />

<div class="outter">
    <img src="http://go.iomega.com/static/img/x_button_close.png" class="exit_button" />
        <div class="inner">

          <div class="inner_content"  id="div_pic_01">
            <img src="thumbs/1.jpg" />
          </div>
          <div class="inner_content"  id="div_pic_02">
            <img src="thumbs/2.jpg" />
          </div>
          <div class="inner_content"  id="div_pic_03">
            <img src="thumbs/3.jpg" />
          </div>
          <div class="inner_content"  id="div_pic_04">
            <img src="thumbs/4.jpg" />
          </div>  

        </div>   
    <button class="previous">Prev</button><button class="next">Next</button>
</div>

And my CSS:

.outter{
    display:none; 
    width:620px; 
    height:380px; 
    top:20%; 
    left:17.5%; 
    position:absolute;
    z-index:4; 
}
.inner{
    width:600px; 
    height:330px; 
    background-color:white; 
    border:1px solid #000; 
    -moz-box-shadow:0px 0px 10px #111; 
    -webkit-box-shadow:0px 0px 10px #111; 
    box-shadow:0px 0px 10px #111; 
    margin-top:15px;
    z-index:3;
}
.exit_button{ 
    float:right;
    z-index:5;
}
.inner_content{
    display:none; 
}

I hope this makes sense. So like when you’re scrolling through with the previous and next buttons and the last picture comes up, you can’t go any more forward, you can only go backwards or vise versa.

here’s a quick example I put together in this fiddle http://jsfiddle.net/DadYW/7/ hope it makes some kind of sense, I’m very new to JQuery, this is one of my first few projects I’m trying on my own.
Thanks a bunch
-Mike

Answer 1

I would disabled the button (or hide it as you wish) after the navigation to the next or previous, not when clicking:

$('.next').click(function() {    

    var current1 = $('.inner_content:visible'),
        $next = current1.next('.inner_content');

    // hide current / show next
    current1.hide();
    $next.show();

    // if next is last, disable the button
    if ($next.is(':last-child')) {
        $(this).prop('disabled', true);
    }

    // enable the previous button
    $('.previous').prop('disabled', false);
});

$('.previous').click(function() {

    var current2 = $('.inner_content:visible'),
        $prev = current2.prev('.inner_content');

    // hide current / show previous
    current2.hide();
    $prev.show();

    // if previous is first, disable the button
    if ($prev.is(':first-child')) {
        $(this).prop('disabled', true);
    }

    // enable the next button
    $('.next').prop('disabled', false);
});

DEMO