Javascript Next/Prev Script

Question

Hey guys this is my script

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script>
$(document).ready(function(){
    var i = 2;
    $("#n_next").click(function(){
        var srcbefore='img/zeitvergleich/'+i+'/before.jpg';
        var srcAfter="img/zeitvergleich/"+i+"/after.jpg";
        $("#changer1").attr("src",srcbefore);
        $("#changer2").attr("src",srcAfter);
        console.log(srcbefore+"::"+srcAfter);
        i++;
    });

     $("#n_prev").click(function(){
        var srcbefore='img/zeitvergleich/'+i+'/before.jpg';
        var srcAfter="img/zeitvergleich/"+i+"/after.jpg";
        $("#changer1").attr("src",srcbefore);
        $("#changer2").attr("src",srcAfter);
        console.log(srcbefore+"::"+srcAfter);
        i--;
    });
});
</script>

<div><img id="changer1" alt="before" src="img/zeitvergleich/1/before.jpg" width="540" height="360" /> <img id="changer2" alt="after" src="img/zeitvergleich/1/after.jpg" width="540" height="360" /></div>
<img src="img/prev.png" id="n_prev"/> <img src="img/next.png" id="n_next"/>

This is not my script. Someone helped me to make it work at least for the "next" button. But the problem is I cant figure out how I get it worked with "prev" button too.

Now when I press next it works fine. But when I press prev he first make i++ (So goes to the next 2 pictures) and then he goes 1 picture back.

Hope you know what I did wrong and you can help me :) And sorry for my bad englisch.

"Hey guys this is my script"/"This is not my script" - um..? — David Thomas
– David Thomas, Commented Sep 29, 2014 at 11:42
@AnoopJoshi I was just making one but problem is solved, thanks anyway — user3430374
– user3430374, Commented Sep 29, 2014 at 11:44
@DavidThomas I mean it is my script. I just didnt made him by myself. Someone helped me — user3430374
– user3430374, Commented Sep 29, 2014 at 11:46

kasoban · Accepted Answer · 2014-09-29 11:45:43Z

1

Your problem is the i index tracking. Try incrementing/decrementing in the beginning! QUick and dirty fix:

<script>
$(document).ready(function(){
    var i = 1;
    $("#n_next").click(function(){
        i++;
        var srcbefore='img/zeitvergleich/'+i+'/before.jpg';
        var srcAfter="img/zeitvergleich/"+i+"/after.jpg";
        $("#changer1").attr("src",srcbefore);
        $("#changer2").attr("src",srcAfter);
        console.log(srcbefore+"::"+srcAfter);
    });

     $("#n_prev").click(function(){
        i--;
        var srcbefore='img/zeitvergleich/'+i+'/before.jpg';
        var srcAfter="img/zeitvergleich/"+i+"/after.jpg";
        $("#changer1").attr("src",srcbefore);
        $("#changer2").attr("src",srcAfter);
        console.log(srcbefore+"::"+srcAfter);
    });
});
</script>

Update: for a little cleaner structure try something like this:

<script>
$(document).ready(function(){
    var i = 1;
    var showImageSet = function (index) {
        var srcbefore='img/zeitvergleich/'+index+'/before.jpg';
        var srcAfter="img/zeitvergleich/"+index+"/after.jpg";
        $("#changer1").attr("src",srcbefore);
        $("#changer2").attr("src",srcAfter);
        console.log(srcbefore+"::"+srcAfter);
    };

    $("#n_next").click(function(){
        i++;
        showImageSet(i);
    });

     $("#n_prev").click(function(){
        i--;
        showImageSet(i);
    });
});
</script>

edited Sep 29, 2014 at 11:45

answered Sep 29, 2014 at 11:40

kasoban

2,17717 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3430374 Over a year ago

This is perfekt! Thanks a lot :) Do you know if there is a way I can show the var "i"? So I can put it under the pictures to see wich number it is.

kasoban Over a year ago

Sure you could use it in other places, but you need to decide where and in which form. For starters, try adding this to the showImageSet function block: $("#changer1").attr("alt","Nr. "+index+" before"); $("#changer2").attr("alt","Nr. "+index+" after"); and then hover the mouse over the picture.

user3430374 Over a year ago

You are a good man :D Thank you very much. This is all I needed

kasoban Over a year ago

You're welcome. If this solved your problem then don't forget to mark it as accepted answer ;)

Collectives™ on Stack Overflow

Javascript Next/Prev Script

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related