Create download link based on img src Jquery

Question

I have several different galleries of images that have image captions. I'm attempting to append a download link of the corresponding image to the end of each of the gallery captions. The download link needs to be based on the img src for each image.

I can get it to append the download link to the caption. However, it's also appending a download icon for each image contained in the gallery on every image caption. Instead of one download link per image.

HTML

<div>
    <figure class="gallery-item">
        <!-- BoGalleryImg -->
        <div class="gallery-icon landscape">
            <a href="http://creative.dev.j2noc.com/thehub/wp-content/uploads/2017/10/crkis-2515.jpg" data-rel="lightbox-gallery-1">
                <img width="300" height="250" src="http://creative.dev.j2noc.com/thehub/wp-content/uploads/2017/10/crkis-2515.jpg" class="attachment-full size-full" alt="" aria-describedby="gallery-1-823">
            </a>
        </div>
        <!-- EoGalleryImg -->
        <!-- BoCaption -->
    <figcaption class="wp-caption-text gallery-caption" id="gallery-1-823">
        <a target="_blank" href="https://jira.j2noc.com/jira/browse/CRKIS-2515">
            CRKIS-2515
        </a>
    </figcaption>
    <!-- EoCaption -->
    </figure>

    <br />

    <figure class="gallery-item">
        <!-- BoGalleryImg -->
        <div class="gallery-icon landscape">
            <a href="http://creative.dev.j2noc.com/thehub/wp-content/uploads/2017/10/crkis-2379b.jpg" data-rel="lightbox-gallery-1"><img width="300" height="250" src="http://creative.dev.j2noc.com/thehub/wp-content/uploads/2017/10/crkis-2379b.jpg" class="attachment-full size-full" alt="" aria-describedby="gallery-1-817"></a>
        </div>
        <!-- EoGalleryImg -->
        <!-- BoCaption -->
        <figcaption class="wp-caption-text gallery-caption" id="gallery-1-817">
            <a target="_blank" href="https://jira.j2noc.com/jira/browse/CRKIS-2379B">
                CRKIS-2379B
            </a>
        </figcaption>
    <!-- EoCaption -->
    </figure>
</div>

jQuery

$(document).ready(function() {
    $('.attachment-full').each(function(index, element){
        // create variable from img src
        var imgSrc = $(element).attr('src');
        console.log(imgSrc);  

        //Append Download Link to Caption
        $('.gallery-caption').append('<a href="'+imgSrc+'"  download><span class="glyphicon glyphicon-download-alt icon-download"></span></a>'); 
    }); 
});

I have been trying to figure this out for a couple days now and I'm so close I'm just not sure how to get it to append only one download icon for the corresponding image. Thank you in advance for any help that can be provided.

My CODEPEN DEMO

I cannot tell exactly what you want. Have you tried changing "$('.gallery-caption').append(..." to "$(this).append(..." in the last line of your Jquery? — Cybernetic
I tried what @Cybernetic suggested but it didn't have the effect I was hoping for. If you look at my CodePen link it illustrates what is happening currently. Notice that there are two download icons per image caption when there should only be one. — JRED
It works with a proper image url (yours doesn't work). Put this link in both your image sources (encrypted-tbn0.gstatic.com/…) and you'll get the expected behavior. — Cybernetic

Cybernetic Cybernetic · Accepted Answer · 2018-01-17T18:23:18

Your html is a bit hairy to parse. Here is some jQuery that reproduces your output with the desired icon count:

images = ['http://srsounds.com/j3/images/easyblog_articles/2943/han_solo.jpg', 'https://lumiere-a.akamaihd.net/v1/images/chewie-db_2c0efea2.jpeg?region=0%2C154%2C1592%2C796'];
labels = ['CRKIS-2515', 'CRKIS-2379B']

images.forEach(function(value, index) {
    $('body').append("<img src=" + value + " width=350><br>" + labels[index] + " <i class='fa fa-download' aria-hidden='true'></i><br><br>");
    $('body').css('color', 'steelblue'); 
})

If you want to use these icons bring in awesome fonts:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

There may be other requirements in terms of your gallery layout, but hopefully this will help you get started on a cleaner approach.

If you're having issues adding link attributes to your icons, or achieving additional layouts let me know.

******** EDIT ********

If you want/need to stick with your original approach, then change your jQuery to this:

  $(document).ready(function() {
  download_ids_hold = [];
  imgSrc_hold = []; 
  $('.attachment-full').each(function(index, element){ 
      // create variable from img src
      var imgSrc = $(element).attr('src');
      imgSrc_hold.push(imgSrc)
      console.log(imgSrc); 

      //Append Download Link to Caption
      $('.gallery-caption').each(function(ind_2, elem_2) { 
      add_id = 'a_' + Math.floor((Math.random() * 100000) + 1);
      download_ids_hold.push(add_id)
      if(index == 0) { 
        $(this).append('<a id=' + add_id + ' download><i class="fa fa-download" aria-hidden="true"></i></span></a>'); 
      }
      })
   });
   for(id=0;id<download_ids_hold.length;id++) { $('#' + download_ids_hold[id]).attr('href', imgSrc_hold[id]) }
});

We track the image sources and download ids, and use them appropriately at the end.

Create download link based on img src Jquery

1 Answers