抓取href并将其放在src上

I have a div that brings a bunch of thumbnails with href links to the full image. So instead of opening this image away from the site, I need to bring this image dynamically in a second div.

Here's what I have 'til now:

• The HTML

  <article id="thumbnails">
  
      <a href="large-image-1.jpg">
      <img class="image-99" alt="97" src="thumbnail-1.jpg">
      </a>
  
      <a href="large-image-2.jpg">
      <img class="image-98" alt="96" src="thumbnail-2.jpg">
      </a>
  
      <a href="large-image-3.jpg">
      <img class="image-97" alt="95" src="thumbnail-3.jpg">
      </a>
  
  </article>
  

  <div id="large-image">
      <img id="xxl" src="" title="">
  </div>
  

• the jQuery

  $(document).ready(function() {
  
    $('#thumbnails').on('click','a', function(event) {
  
      var toLoad = $(event.target).append('<img src="' + 'attr('src').jpg />"');
      $('#large-image').fadeOut('fast',loadContent);
  
      function loadContent () {
          $('#large-image').load(toLoad,'',showNewContent);
      }
  
      function showNewContent () {
          $('#large-image').fadeIn('normal');
      }
  
      return false;
    });
  

I also did a codepen of it to illustrate it better.

One thing I'm considering as an alternative is to record the clicked image href and replace the src of the other div with the attr() thing. But I got lost in how to do that.

$('#thumbnails').on('click','a', function(event) {
    var toLoad = $(this).append('<img src="' + this.href + '.jpg" />');

    //Rest of code
});

EDIT: The above code will get the href attribute of the clicked link and adds it to the src of the image.

You can also try to get the link's href and change the target-image's src.

var largeImage = $('#large-image img');

$('#thumbnails a').click(function(e){
  e.preventDefault();

  var imageUrl = $(this).attr('href'); 

  largeImage.attr('src', imageUrl);
});

Example on JS Bin