Question

I’m working on an image gallery at the moment and its doing something very weird that I don’t quite understand. When I click on the button that is my intended “next image” or “prev image” button, the button just disappears rather than showing the next/prev image.

I’ve uploaded it here, give it a go

The buttons function looks like this:

var nextbutton= $('.next');
var prevbutton= $('.prev');

nextbutton.click(function(){
    $(this).parent(images).hide(0).next().show(0);
    return false;
});

prevbutton.click(function(){
    $(this).parent(images).hide(0).prev().show(0);
    return false;
});

Which was working fine but then i decided to add another function, one that lets you click the image you’re currently viewing which would then have the same function as the “next image” button, taking you to the next image. Simple, I thought, just duplicate the “next image” function I’ve used for the button, but with a different selector:

var imagebutton= $('#imagecontainer img:not(:last)');

imagebutton.click(function(){
    $(this).parent(images).hide(0).next().show(0);
    return false;
});

And it does what is supposed to, you click the image and the next image shows. But, now the next/prev buttons just disappears when clicked, and they do not take you to the next/prev image. Very strange!

Am I overlooking something obvious here? I’m pretty new to JQuery so any help is much appreciated!

Answer 1

While I’m not sure what is the reason for disappearing next button, try this code for binding:

$(".next, #imagecontainer img:not(:last)").on("click", function(e){
    $(this).closest("div").hide().next().show();
    e.preventDefault();
});

$(".prev").on("click", function(e){
    $(this).closest("div").hide().prev().show();
    e.preventDefault();
});

Playing in console with your page says it could work.