jQuery cycle content of static HTML page 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&gt;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&lt;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.
I would try to avoid using separate arrays for values that are interrelated.
Instead create an object with the elements of each content like:

{
    images: [
        "http://www.example.com/img100.jpg",
        "http://www.example.com/img101.jpg"],
    description: "some text 1",
    link: "http://www.somewhere.com/"
}


And create an array of these objects. So you only have to handle one array and one index. 

var content = [ // Array of objects
{
    images: [
        "http://www.example.com/img100.jpg",
        "http://www.example.com/img101.jpg"],
    description: "some text 1",
    link: "http://www.somewhere.com/a"
}, {
    images: ["http://www.example.com/img200.jpg",
        "http://www.example.com/img201.jpg"],
    description: "some text 2",
    link: "http://www.somewhere.com/b"
}, {
    images: ["http://www.example.com/img555.jpg",
        "http://www.example.com/img556.jpg"],
    description: "some text 3",
    link: "http://www.somewhere.com/c"
}, {
    images: ["http://www.example.com/imgA.jpg",
        "http://www.example.com/imgX.jpg"],
    description: "some text 4",
    link: "http://www.somewhere.com/d"
} ];


I would also add a "show" function to avoid repeating the same code in each case. Thus, the code that handles the content can be simplified as:

var currentIndex = 0;

$(document).ready(function () {
    /* Content initialization */
    show(content[currentIndex]);

    /* Register click handlers */
    $("#gallery_button_left").click(function () {
        if (currentIndex &gt; 0) {
            show(content[--currentIndex]);
        }
    });

    $("#gallery_button_right").click(function () {
        if (currentIndex &lt; content.length - 1) {
            show(content[++currentIndex]);
        }
    });

});

/* Update content function */
function show(data) {
    animateTo(80);
    $(".view-before").css("background-image", 'url(' + data.images[0] + ')');
    $(".view-after").css("background-image", 'url(' + data.images[1] + ')');
    $(".gallery-title-h1").html(data.description);
    $("#link").attr("href", data.link);
}


Demo: 

var content = [ // Array of objects
{
    images: [
        "http://www.example.com/img100.jpg",
        "http://www.example.com/img101.jpg"],
    description: "some text 1",
    link: "http://www.somewhere.com/a"
}, {
    images: ["http://www.example.com/img200.jpg",
        "http://www.example.com/img201.jpg"],
    description: "some text 2",
    link: "http://www.somewhere.com/b"
}, {
    images: ["http://www.example.com/img555.jpg",
        "http://www.example.com/img556.jpg"],
    description: "some text 3",
    link: "http://www.somewhere.com/c"
}, {
    images: ["http://www.example.com/imgA.jpg",
        "http://www.example.com/imgX.jpg"],
    description: "some text 4",
    link: "http://www.somewhere.com/d"
}, ];

var currentIndex = 0;

$(document).ready(function () {
    /* Content initialization */
    show(content[currentIndex]);

    /* Register click handlers */
    $("#gallery_button_left").click(function () {
        if (currentIndex &gt; 0) {
            show(content[--currentIndex]);
        }
    });

    $("#gallery_button_right").click(function () {
        if (currentIndex &lt; content.length - 1) {
            show(content[++currentIndex]);
        }
    });

});

/* Update content function */
function show(data) {
 //animateTo(80);
    $(".view-before").css("background-image", 'url(' + data.images[0] + ')');
    $(".view-after").css("background-image", 'url(' + data.images[1] + ')');
    $(".gallery-title-h1").html(data.description);
    $("#link").attr("href", data.link);
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;span id="gallery_button_left"&gt;LEFT&lt;/span&gt;

&lt;span id="gallery_button_right"&gt;RIGHT&lt;/span&gt;

&lt;div&gt;
    &lt;h1 class="gallery-title-h1"&gt;&lt;/h1&gt;
    &lt;div class="view-before"&gt;&lt;/div&gt;
    &lt;div class="view-after"&gt;&lt;/div&gt;
    &lt;a id="link" href="#"&gt;link&lt;/a&gt;
&lt;/div&gt;