I am making a simple jQuery code that changes the content of a static HTML page when a button (previous/next aka left/right) are pressed. The page is static, so the content that must be cycled (images setted as background, descriptions and a link) are saved in an array. Images must be shown two at a time, so the arrays must use two different counters (one for the images that goes every 2, and one for the links and descriptions that goes every element.)
var images = []; //array of images
var descriptions = []; //array of strings
var links = []; //array of urls
var i = 0;
var j = 0;
$(document).ready(function() {
$(".view-before").css("background-image", 'url('+images[i]+')');
$(".view-after").css("background-image", 'url('+images[i+1]+')');
$(".gallery-title-h1").html(descriptions[j]);
$("#link").attr("href", links[j]);
animateTo(80);
});
$("#gallery_button_left").click(function() {
if(i>0) {
j=j-1;
animateTo(80);
$(".view-before").css("background-image", 'url('+images[i-2]+')');
$(".view-after").css("background-image", 'url('+images[i-1]+')');
$(".gallery-title-h1").html(descriptions[j]);
$("#link").attr("href", links[j]);
i=i-2;
}
});
$("#gallery_button_right").click(function() {
if(i<images.length-2) {
i=i+2;
j=j+1;
animateTo(80);
$(".view-before").css("background-image", 'url('+images[i]+')');
$(".view-after").css("background-image", 'url('+images[i+1]+')');
$(".gallery-title-h1").html(descriptions[j]);
$("#link").attr("href", links[j]);
}
});
What I'd like to know is if performances could be improved or if it can be done in a "smarter" way than just cycling array elements.