I'm working on a javascript function that opens a jquery modal window and makes an ajax call to populate the modal. I've included 'left' and 'right' div ids- clicking one changes the content of the modal window (scrolling through a photo slideshow).
Everything works great, except one thing: If I open the modal and then close it, opening it a 2nd time causes these 'left/right' buttons to count each click as two (click 'right' once, but move two images over). If I close the window and reopen it again, the counting again increases by 1 (3 changes for 1 click).
The only workaround that fixes this is to reload the page when the modal window is closed- but does anyone know of a better solution? Basically, I want to 'reset' the modal window, but don't want to destroy it- I'd like to be able to open/close the modal multiple times and have these right/left buttons work.
The part of the function that I've used to create these buttons is below- thanks for any suggestions/ideas.
function getNextImage(direction) {
if(direction == 1) {
if(imageNumber == 1) {
imageNumber = lastImage;
} else {
--imageNumber;
}
}
if(direction == 2) {
if(imageNumber == lastImage) {
imageNumber = 1;
} else {
++imageNumber;
}
}
if(direction == 0) {
imageNumber = 1;
}
$.ajax({
type: "GET",
url: "phpIncludes/next_fetch.php",
cache: false,
data: {img : imageNumber, cap : imageNumber, width : dWidth, height : dHeight, a : album},
success: function(htmlpic) {
$("#left"+album).html(htmlpic);
}
});
}
$("#moveLeft"+album).click(function() {
getNextImage(1);
console.log("Image Number is: " + imageNumber);
});
$("#moveRight"+album).click(function() {
getNextImage(2)
console.log("Image Number is: " + imageNumber);
});