3
\$\begingroup\$

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.

\$\endgroup\$
1
\$\begingroup\$

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>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.