jQuery cycle content of static HTML page

Question

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.

Answer 1

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 > 0) {
            show(content[--currentIndex]);
        }
    });

    $("#gallery_button_right").click(function () {
        if (currentIndex < 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 > 0) {
            show(content[--currentIndex]);
        }
    });

    $("#gallery_button_right").click(function () {
        if (currentIndex < 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);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<span id="gallery_button_left">LEFT</span>

<span id="gallery_button_right">RIGHT</span>

<div>
    <h1 class="gallery-title-h1"></h1>
    <div class="view-before"></div>
    <div class="view-after"></div>
    <a id="link" href="#">link</a>
</div>