Simplifying a messy jQuery function

JS newb here. I’m incorporating the code below into a backstretch slider, with the aim of including small text arrays with each rotation of a carousel. It’s all working as planned, only it’s not very clean code at all. I’m just wondering if someone knows how to go about neatening this up? Thanks a lot!

        jQuery(document).ready(function ($) {

 var items = [{
   img: "/i/photos/Gallery/home/010.jpg",
   name: "Name 1",
   title: "Title 1",
   desc: "Description 1.",
   caption: "Read More",
   link: "#"
  },
  {
   img: "/i/photos/Gallery/home/020.jpg",
   name2: "Name 1",
   title2: "Title 1",
   desc2: "Description 1.",
   caption2: "Read More",
   link2: "#"
  },
  {
   img: "/i/photos/Gallery/home/030.jpg",
   name3: "Name 1",
   title3: "Title 1",
   desc3: "Description 1.",
   caption3: "Read More",
   link3: "#"
  }
 ];

 var options = {
  fade: 800,
  duration: 7000
 };

 var images = $.map(items, function (i) {
  return i.img;
 });

 var slideshow = $("#slider").backstretch(images, options);

 $(window).on("backstretch.show", function (e, instance) {

  var theName = items[instance.index].name;
  var theTitle = items[instance.index].title;
  var theDesc = items[instance.index].desc;
  var theCaption = items[instance.index].caption;
  var theLink = items[instance.index].link;

  var theName2 = items[instance.index].name2;
  var theTitle2 = items[instance.index].title2;
  var theDesc2 = items[instance.index].desc2;
  var theCaption2 = items[instance.index].caption2;
  var theLink2 = items[instance.index].link2;

  var theName3 = items[instance.index].name3;
  var theTitle3 = items[instance.index].title3;
  var theDesc3 = items[instance.index].desc3;
  var theCaption3 = items[instance.index].caption3;
  var theLink3 = items[instance.index].link3;

  if (theLink) {
   $(".backstretch-caption").html(
     '<h1 class="bs-name">' + theName + '</h1>' +
     '<h2 class="bs-title">' + theTitle + '</h2>' +
     '<p class="bs-desc">' + theDesc + '</p>' +
     '<a class="bs-link" href="' + theLink + '">' + theCaption + '</a>')
    .show();
  }
  if (theLink2) {
   $(".backstretch-caption").html(
    '<h1 class="bs-name">' + theName2 + '</h1>' +
    '<h2 class="bs-title">' + theTitle2 + '</h2>' +
    '<p class="bs-desc">' + theDesc2 + '</p>' +
    '<a class="bs-link" href="' + theLink2 + '">' + theCaption2 + '</a>')
   .show();
  }
  if (theLink3) {
   $(".backstretch-caption").html(
    '<h1 class="bs-name">' + theName3 + '</h1>' +
    '<h2 class="bs-title">' + theTitle3 + '</h2>' +
    '<p class="bs-desc">' + theDesc3 + '</p>' +
    '<a class="bs-link" href="' + theLink3 + '">' + theCaption3 + '</a>')
   .show();
  }
 });
});

>Solution :

The most important change to make here is to remove the incremental property names in the objects in your array; use the same property name in each object. Then your code dealing with that array can be simplified as the property names are static.

You can also make the syntax a little less verbose by storing a reference to items[instance.index] in a variable to reuse, and also by using template literals to build your HTML. The latter could be made even more simple by including the HTML in the page on load, and hiding/updating/showing the relevant text labels as necessary – I’ll leave that as an exercise for the OP to implement if desired though.

var items = [
  { img: "/i/photos/Gallery/home/010.jpg", name: "Name 1", title: "Title 1", desc: "Description 1.", caption: "Read More", link: "#" }, 
  { img: "/i/photos/Gallery/home/020.jpg", name: "Name 1", title: "Title 1", desc: "Description 1.", caption: "Read More", link: "#" }, 
  { img: "/i/photos/Gallery/home/030.jpg", name: "Name 1", title: "Title 1", desc: "Description 1.", caption: "Read More", link: "#" }
];

jQuery($ => {
 var images = items.map(item => item.img);
 var slideshow = $("#slider").backstretch(images, { 
   fade: 800,
   duration: 7000
 });

 $(window).on("backstretch.show", function (e, instance) {
  let item = items[instance.index];
  if (item.link) {
   $(".backstretch-caption").html(`
     <h1 class="bs-name">${item.name}</h1>
     <h2 class="bs-title">${item.title}</h2>
     <p class="bs-desc">${item.desc}</p>
     <a class="bs-link" href="${item.link}">${item.caption}</a>`)
    .show();
  }
 });
});

Finally, be wary of using the Backstretch library. It hasn’t had a meaningful update since 2017 and seems very outdated. In fact, it’s now possible to do what that library does using CSS, such as using vw/vh units for fonts and various other techniques for background imagery.

Leave a Reply