CODEWITHSUNDEEP
jqueryhtml
Java West
Java West

Reputation: 77

How can I detect the last picture and disable the next button in jquery

I am trying to develop a popup which contains pictures in it but now the problem is when I click on the next button and the pictures finish , then I see the alt text which I dont want to see I whant the code to detect the last picture and disables the next button. and also on the prev buttton I want it to be like that . I have tried in the codes below but no luck :

//Here is the html part 
<div id="popup_boxAvian1"> 
<div class="divsAvian">
<div class ="mainimage1"><img src="images/avian/pdf1.jpg" alt="alt" /></div>
<div class ="mainimage2"><img src="images/avian/pdf2.jpg" alt="alt" /></div>
<div class ="mainimage3"><img src="images/avian/pdf3.jpg" alt="alt" /></div>
<div class ="mainimage4"><img src="images/avian/pdf4.jpg" alt="alt" /></div>
<div class ="mainimage5"><img src="images/avaian/pdf5.jpg" alt="alt" /></div>
</div>
<a id="prevAvian1">prev</a>
<a id="nextAvian1">next</a>
 <a id="popupBoxCloseAvian1">Close</a>   
</div>
</div>


//This is Jquery codes

$(document).ready(function(){


/*I am trying to disable the next button on the last picture */
if($(".divsAvian div:last")){
$("#nextAvian1").hide();
}
/*I am trying to dis able the next button on the last picture ends */

    $(".divsAvian div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#nextAvian1").click(function(){
        if ($(".divsAvian div:visible").next().length != 0)
            $(".divsAvian div:visible").next().show().prev().hide();

        else {
            $(".divsAvian div:visible").hide();
            $(".divsAvian div:first").show();
        }

        return false;
    });

    $("#prevAvian1").click(function(){
        if ($(".divsAvian div:visible").prev().length != 0)
            $(".divsAvian div:visible").prev().show().next().hide();
        else {
            $(".divsAvian div:visible").hide();
            $(".divsAvian div:last").show();
        }
        return false;
    });
});

Upvotes: 0

Views: 125

Answers (1)

Jai
Jai

Reputation: 74738

I think you can try to check if the target element is visible:

/*I am trying to disable the next button on the last picture */
if($(".divsAvian div:last").is(':visible')){
    $("#nextAvian1").hide();
}else if($(".divsAvian div:first").is(':visible')){
    $("#prevAvian1").hide();
}

{See the demo here}

Upvotes: 1

Related Questions