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.

Answer 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>