title: How to get the javascript to execute to update the images?
body: <p>I am trying to resize the images using JavaScript. This example is based on a working jsfiddle, but the page does not seem to work. I presume the script in in the wrong place, but I could not find the correct one. How to put it right?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
          &lt;script src="//code.jquery.com/jquery-1.12.0.min.js"&gt;&lt;/script&gt;
          &lt;script type='text/javascript'&gt;
              function loadImage() {
                  $(this).attr('height', $(this).parent().parent().parent().attr('imgheight'));
              }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div imgheight="300px" class="images"&gt;
              &lt;div&gt;
                  &lt;a&gt; &lt;img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg " onload="loadImage()"/&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;a&gt; &lt;img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg " onload="loadImage()"/&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>Still does not work:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
          &lt;script src="//code.jquery.com/jquery-1.12.0.min.js"&gt;&lt;/script&gt;
  &lt;script type='text/javascript'&gt;
  
      $(function() {
          $('.images div a img').on('load', function() {
              $(this).attr('height', $(this).closest('.images').data('imgheight'));
          });
      });
  
  &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div imgheight="300px" class="images"&gt;
              &lt;div&gt;
                  &lt;a&gt; &lt;img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg " /&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;a&gt; &lt;img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg " /&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>SOLUTION</strong></p>
  
  <p>Needed to include jquery correctly; once I had, it works fine.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(function() {
          $('.images div a img').on('load', function() {
              alert($(this).closest('.images').attr('imgheight'));
              $(this).attr('height', $(this).closest('.images').attr('imgheight'));
          });
      });
      &lt;/script&gt;
  &lt;body&gt;
      &lt;body&gt;
          &lt;div imgheight="300px" class="images"&gt;
              &lt;div&gt;
                  &lt;a&gt; &lt;img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg " /&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;a&gt; &lt;img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg "/&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>