Question

I’m using a responsive slideshow that was using just numbers as the nav below the images. I need to replace the numbers with text. I currently have the text as the image alt, but I’m having heaps of trouble targeting the text. I know very little JS, which I’m guessing is the issue 🙂

Here’s the pager code:

 //pager
 if (settings.pager) {
      var tabMarkup = [];
      $slide.each(function (i) {
        var n = i + 1;

        var images = $("#slider2 li img");

        tabMarkup +=
          "<li>" +
          "<a href='#' class='" + slideClassPrefix + n + "'>" + images.eq(i).attr("alt") + "</a>" +
          "</li>";
      });
      $pager.append(tabMarkup);

      $tabs = $pager.find("a");

      // Inject pager
      if (options.controls) {
        $(settings.controls).append($pager);
      } else {
        $this.after($pager);
      }

      // Select pager item
      selectTab = function (idx) {
        $tabs
          .closest("li")
          .removeClass(activeClass)
          .eq(idx)
          .addClass(activeClass);
      };
    }

And here are the images:

 <ul class="rslides" id="slider2">
  <li><img src="1.jpg" alt="Alt Sample" /></li>
  <li><img src="2.jpg" alt="Unlock Your Potential" /></li>
  <li><img src="3.jpg" alt="Enable Your Brand" /></li>
  <li><img src="4.jpg" alt="Lean On Our Expertise" /></li>
</ul>

I added “Bit” to the nav so I could find it 🙂 n is pulling the correct number of the image. Obviously I need to take out “Bit” and replace “n” with the image alt. Any suggestions?

---

Update:

I’m using this plugin (wish I could write something like this myself!). I’ve tried adding variable targeting the alt attribute, but they all come back undefined. Maybe I’m putting it in the wrong place?

---

Final Update: I modified the original code to show the changes. Thanks so much!

Answer 1

You have an array but concatenate strings

DEMO

  var tabMarkup = []; // an array
  var images = $("#slider2 li img");
  $slide.each(function (i) { // assuming $slide is a collection
    tabMarkup.push(
      "<li>" +
      "<a href='#' class='" + slideClassPrefix + (i+1) + "'>" + 
      (i+1) +":" +images.eq(i).attr("alt") +"</a>" +
      "</li>");
  });
  $pager.append(tabMarkup.join(""));