Switching image with Next/Previous buttons

Question

Is there any way to switch images using next/prev buttons with jQuery? Here's the code:

<div class="prevDiv">
    <a href="#"><img src="images/prev.png" alt="previous" /></a>
</div>
<div class="pic" id="picwebd">
    <img src="images/portfolio/webdesign/webd1.jpg" class="portPic" />
</div>
<div class="nextDiv">
    <a href="#"><img src="images/next.png" alt="previous" /></a>
</div>

I tried modifying this code to my needs: http://jsfiddle.net/x5mCR/16/ but I haven't succeed. I think that incrementing and decrementing number in the image src would be enough, but I can't come up with decent code do this. Google doesn't help neither.

What are you trying to do? PREV and BACK buttons to slide through the images? — Mike Barwick, Nov 26 '13 at 22:20
For the code you posted, you need to know a couple of things. `prev()` is a jquery method to traverse a tree. If you want to go back you can use `prev()`. But that only isnt enough, when you are in the first position, if you press back, you want to go to last. So you can use `$('#fullimage img:last').fadeIn();`. Like [this](http://jsfiddle.net/r7t6G/). Now, with both code you can merge and create the next/previous button you want. — wendelbsilva, Nov 26 '13 at 22:22
Please post your code modification and tell us what goes wrong. — showdev, Nov 26 '13 at 22:31

unclemeat · Answer 1 · 2013-11-26T22:52:32.873

Remove the anchors with class thumbnail and give the corresponding <img> tags the thumbnail class, then use jQuery click methods for the thumbnail class:

$(".thumbnail").click(function() {
    $(".fullimage").src = $(this).attr("src");
});

Make sure you have a single .fullimage in the #fullimage div.

This isn't the same as a next / previous button - but it would fix the JSFiddle that you made.

http://jsfiddle.net/x5mCR/34/

score 1 · Answer 2 · answered Nov 26 '13 at 22:50

In case anyone reading this post want a different approach still using JQuery fadeIn, Im posting below the code for that.

Here you can find the fiddle for it.

Here's the Javascript Part

//At the start will show the first image
$('#fullimage img.fullimage:first-child').fadeIn();
//Keep track of the image currently being visualized
var curr = $('#fullimage img.fullimage:first-child');

$('#next').on('click', function() {
    //Hide Current Image
    curr.hide();
    //Find Next Image
    var next = curr.next();
    //If theres no next image (is the last img), go back to first
    if (next.length == 0) next = $('#fullimage img:first');
    //Fade In
    next.fadeIn();
    //Save in curr the current Image
    curr = next;
    return false;
});

$('#prev').on('click', function() {
    curr.hide();
    var prev = curr.prev();
    if (prev.length == 0) prev = $('#fullimage img:last');
    prev.fadeIn();
    curr = prev;
    return false;
});

Here's the HTML part

<div id="fullimage">
 <img class="fullimage" src="http://i.imgur.com/RHhXG.jpg" />
 <img class="fullimage" src="http://i.imgur.com/p1L2e.jpg" />
 <img class="fullimage" src="http://i.imgur.com/NsrI0.jpg" />
 <img class="fullimage" src="http://i.imgur.com/Ww6EU.jpg" /> 
</div>
<a href="#"><label id="prev">previous</label></a>
<a href="#"><label id="next">next</label></a>

score 1 · Answer 3 · answered Nov 26 '13 at 22:52

Here is dynamic and simple script reducing your html code

http://jsfiddle.net/x5mCR/32/

$("#thumbnail a").on('click', function (eve) {
    eve.preventDefault();
    var link = ($(this).attr("href"));
    var content = '<img src="' + link + '"/>';
    $("#fullimage").hide().html(content).fadeIn('slow');

});

score 0 · Accepted Answer · answered Nov 26 '13 at 22:31

var picNumber = 1;

$(".nextDiv").click(function() {
    picNumber++;
    if (picNumber > 3) picNumber = 1; // Change 3 to how many pictures there are.
    $(".pic img").attr("src", "images/portfolio/webdesign/webd" + picNumber + ".jpg");
});
$(".prevDiv").click(function() {
    picNumber--;
    if (picNumber < 1) picNumber = 3; // Change 3 to how many pictures there are.
    $(".pic img").attr("src", "images/portfolio/webdesign/webd" + picNumber + ".jpg");
});

score 0 · Answer 5 · edited May 23 '17 at 11:56

If I understand correctly, you're trying to use the arrow keys to move back and forth between pictures...so if this is the case, I would recommend taking a look at this post: Binding arrow keys in JS/jQuery

Also, for your convenience, I just took the code from that post and combined it with the function in your fiddle to get this:

$(document).keydown(function (e) {
    if (e.keyCode == 39) {
    $(".fullimage").hide();
    var next = $(this).next();
    if (next.length > 0) {
        next.fadeIn();
    } else {
        $('#fullimage img:first').fadeIn();
    }
    return false;
}

});

In testing it looks like it might need some modification, and also, you would obviously need to create a similar function for when the back button is pressed, but I think if I'm understanding your issue correctly this is a good starting place.

Switching image with Next/Previous buttons

5 Answers5