title: How can I add a caption to the images in this existing Jquery image gallery?
body: <p>I want to add a list of image titles (text) that would appear and disapear depending on the image in front of the gallery.
  the is from this code pen <a href="https://codepen.io/atomikdesign/pen/KpoJGw?page=1&amp;" rel="nofollow noreferrer">code pen</a> </p>
  
  <p>I've tried to create a list of strings containing the titles , but the result was that titles are displayed all at once.</p>
  
  <p>this is the part of code I've tried to add the list in .. please check the wholle code at code pen</p>
  
  <pre><code>    card.addClass("photo").css({
              "top": i * -6 + "px",
              "left": (i * 4.5) + "px",
              "width": 100-i*5 + "%",
              "background": bgColor
          }).appendTo(gallery);
  
          var imgContainer = $("&lt;div&gt;").addClass("imgContainer").appendTo(card);
          var img = $("&lt;img&gt;").attr("src", photos[i]).appendTo(imgContainer);
          var membre = $("&lt;div&gt;").addClass("membre").appendTo(card);
          var nom = $("&lt;div&gt;").addClass("nom").appendTo(membre);
          var statut = $("&lt;div&gt;").addClass("statut").appendTo(membre);
      }
  
      $(".photo").on("click", function() {
          var i=0;
          if ($(this).index() == $(".photo").length - 1 &amp;&amp; animation == false)
              $(".nom").text(names[i]);
              i++;
              swipePhoto(this);
      });
  </code></pre>