How get the original size images (height and width) from your href and put them on your attr. using jquery

Question

hello friends i am trying to get the size (height and width) of an image from an hrf and put these values in its attribute

This is driving me crazy

this is my html:

<figure>
    <a href="image-large-1.jpg">
        <img src="image-small-1.jpg"/>
    </a>
</figure>

<figure>
    <a href="image-large-2.jpg">
        <img src="image-small-2.jpg"/>
    </a>
</figure>

<figure>
    <a href="image-large-3.jpg">
        <img src="image-small-3.jpg"/>
    </a>
</figure>

this is what I want :

<figure>
    <a href="image-large-1.jpg" original-size="1000x800">   //the sizes  are example
        <img src="image-small-1.jpg"/>
    </a>
</figure>

<figure>
    <a href="image-large-2.jpg" original-size="1200x700">   //the sizes  are example
        <img src="image-small-2.jpg"/>
    </a>
</figure>

<figure>
    <a href="image-large-3.jpg" original-size="900x980">  //the sizes  are example
        <img src="image-small-3.jpg"/>
    </a>
</figure>

the "original-size" attribute I want to get it from " a hrf "

I was trying with this code that I found here, I get the original size of the image-large from the href (in the console.log) but I cannot print them in the html

help me please

         $(".containerGallery figure a").each(function() {
                var imgSrc, imgW, imgH;
                function myFunction(image){
                    var img = new Image();
                    img.src = image;
                    img.onload = function() {   
                        return {
                            src:image,
                            width:this.width,
                            height:this.height};
                        }
                    return img;
                }
                var x = myFunction($(this).attr('href'));
                x.addEventListener('load',function(){
                    imgSrc = x.src;
                    imgW = x.width;
                    imgH = x.height;
                });
                $(this).each(function() {
                    x.addEventListener('load',function(){
                        console.log(imgW+'x'+imgH);
                        $(this).attr('original-size', imgW+'x'+imgH);
                    });
                }); 
            });

Any image loads automatically with it's original `Width x Height`so if you really just want to get their Width and Height, you could just use javascript to get them and then add them as attributes to the elements you wish! — Adnane Ar, May 27 '20 at 22:10
`original-size` is an invalid attribute. if you want to store the size to an HTML tag, use `data-original-size`. — terrymorse, May 27 '20 at 22:37
thank for your coments i have been very helpful to me to understand more javascript — jet, May 27 '20 at 23:39

Adnane Ar · Answer 1 · 2020-05-27T22:47:28.550

Here is script that does absolutely what you're looking for!

const getOriginalSize = (target, url) => {

  const image = document.createElement("img");
  image.src = url;
  
  image.onload = function(){
  
    target.setAttribute("original-size", `${image.naturalWidth}x${image.naturalHeight}`);
  
  }
  

  return image;
}

<figure>
    <a href="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/befbcde0-9b36-11e6-95b9-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
        <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/befbcde0-9b36-11e6-95b9-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg"/>
    </a>
</figure>

<figure>
    <a href="https://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg">
        <img src="https://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg"/>
    </a>
</figure>


<script>

  document.addEventListener('DOMContentLoaded', () => {
  
    document.querySelectorAll("figure").forEach( (figure) => {
    
      figure.querySelectorAll("a[href]").forEach( function(targetAhref) {
      
        getOriginalSize(targetAhref, targetAhref.href);
        console.warn("image loaded and size registred!");
      
      } );
    
    } );
  
  } );

</script>

Ah! you are right I did not notice that the `ahref` link is different of `img` src! Not problem im going to fix that real quick! — Adnane Ar, May 27 '20 at 22:40

terrymorse · Accepted Answer · 2020-05-28T13:57:31.920

The JavaScript code in the question is overly complex and redundant.

Here's some simplified code that accomplishes the same thing.

// get all <a> elements inside <figure> elements
const atags = Array.from(document.querySelectorAll('figure a'));

// iterate over every <a> tag
atags.forEach(atag => {

  // create blank image element
  var img = new Image();

  // when the image loads, store its dimensions to the atag's
  // `data-original-size` attribute
  img.addEventListener('load', () => {
    let imgW = img.width,
      imgH = img.height;
    atag.dataset.originalSize = `${imgW}x${imgH}`;
    console.log('atag:', atag);
  });
  
  // load image from atag's href
  img.src = atag.href;

});

<figure>
  <a href="https://i.picsum.photos/id/1077/200/300.jpg">
    <img src="https://via.placeholder.com/40" />
  </a>
</figure>

<figure>
  <a href="https://i.picsum.photos/id/913/200/200.jpg">
    <img src="https://via.placeholder.com/50" />
  </a>
</figure>

<figure>
  <a href="https://i.picsum.photos/id/1058/100/100.jpg">
    <img src="https://via.placeholder.com/60" />
  </a>
</figure>

wouuuu this code worked perfectly, I was about to break my pc, thank you very much you are the GOAT — jet, May 27 '20 at 23:32

How get the original size images (height and width) from your href and put them on your attr. using jquery

2 Answers2