How to append anchor tag with jquery having a permalink in it?

Question

I have a gallery of images and when one of them reach the 700px height it will be cut off and append a label like this: Click to see image

I'm using this code:

<script type="text/javascript">
                jQuery(document).ready(function($){
                    $(".div-img").each(function() {
                      var maxHeight = 699;
                      var imgHeight = $(this).height();
                      if ( imgHeight > maxHeight) {
                      $(this).append('<a href="<?php the_permalink();?>" data-evt="EntryLongPost" class="view-full-content view-content external-link fa-external-link-square">View Full Content<span class="crop"></span></a>').find(".cropping-a").css({'max-height':'500px', 'overflow':'hidden', 'display': 'block'});  
                      }
                      });
                  });
              </script>

And the code is working because is adding the anchor tag correctly every time but the href attribute is taking the same link for all the images that meet the criteria, I've read that is because the php code executes on the server side so it only runs once and that's why it only grabs the link of the first image. I already tried with a function, hidding the anchor tag and then making it visible from the js block of code but is not working, tried putting the code in functions.php file but not working either.

Answer 1

You could just grab the image's source using jQuery like so:

<script type="text/javascript">
    jQuery(document).ready(function($){
        $(".div-img").each(function() {
            var maxHeight = 699;
            var imgHeight = $(this).height();
            var href = $(this).attr('src');
            if ( imgHeight > maxHeight) {
                $(this).append('<a href="' + href + '" data-evt="EntryLongPost" class="view-full-content view-content external-link fa-external-link-square">View Full Content<span class="crop"></span></a>').find(".cropping-a").css({'max-height':'500px', 'overflow':'hidden', 'display': 'block'});  
            }
        });
    });
</script>