title: Add links inside carousel/lightbox content by each different image
body: <p>this is my question: I have a ligthbox in a carousel, and I want to show a different link when each image in the lightbox is loaded, not before.  I do this by adding a link in the html structure. But the link is different for every image, so I need to identify every image by its src atribute, and then add the link I want when that image is loaded. This is what I have, and I don´t know how to follow...</p>
  
  <p>html struture:
          </p>
  
  <pre><code>            &lt;a href="images/lightbox/yamm.jpg" class="lb_gallery"  &gt;&lt;img src="images/lightbox/01_thumb.png"/&gt;&lt;/a&gt; 
              &lt;a href="images/lightbox/blog.jpg" class="lb_gallery" &gt;&lt;img src="images/lightbox/02_thumb.png" /&gt;&lt;/a&gt;
              &lt;a href="images/lightbox/asisaden.jpg" class="lb_gallery" &gt;&lt;img src="images/lightbox/03_thumb.png" /&gt;&lt;/a&gt; 
              &lt;a href="images/lightbox/interiordetalle.jpg" class="lb_gallery"&gt;&lt;img src="images/lightbox/04_thumb.png" /&gt;&lt;/a&gt; 
  
       &lt;/div&gt;
  </code></pre>
  
  <p>my js code: </p>
  
  <pre><code>    var $img = document.getElementsByTagName("img");
      var src = $img.attr("src");
      if(src == 'images/lightbox/yamm.jpg') {
      $("#ui-lightbox-enlace-wrapper").append('&lt;a href="#" target="_blank"&gt;
      Link text&lt;/a&gt;');
  
      }
  </code></pre>
  
  <p>Thanks.</p>