How to make custom img tag valid for w3c validator? [duplicate]

  css, html, javascript

I have a javascript that changes the image scr when you click on it and it will cycle through. It also has navigation links and arrow keyboard navigation. The problem is it’s not validated for w3c. It says

Error: Attribute source not allowed on element img at this point.

I can’t use img scr since that will break the script. Can anyone help me modify the script to make it W3C vaild?

/* set first image in frame from #shoebox on document.ready */
$(function() {
  var leadOff = $('#shoebox img:first-child');

  $('.picture').attr({
    'src': leadOff.attr('source'),
    'imageposition': '1',
    'width': leadOff.attr('width'),
    'height': leadOff.attr('height'),
    'alt': leadOff.attr('alt')
  });

  var select = $('#select-jump-to');
  $.each($('#shoebox img'), function(idx, img) {
    select.append('<option value="' + 
    img.getAttribute('source') + 
      '" data-width="' +  img.getAttribute('width') + 
      '" data-height="' + img.getAttribute('height') + 
      '" data-alt="' + img.getAttribute('alt') + 
      '">Image ' + (idx + 1) + '</option>'
    )
  });

  select.on('change', function(e) {
    var option = e.target.options[e.target.selectedIndex];
    $('.picture').attr({
      'src': option.value,
      'imageposition': e.target.selectedIndex + 1,
      'width': option.getAttribute('data-width'),
      'height': option.getAttribute('data-height'),
      'alt': option.getAttribute('data-alt')
    });
  });

});
/* load next image from #shoebox (click on image and/or next button) */
$('#pictureframe, #buttonright').click(function() {
  var imageTally = $('#shoebox img').length;
  var imagePosition = $('.picture').attr('imageposition');
  var plusOne = parseInt(imagePosition) + 1;
  var nextUp = $('#shoebox img:nth-child(' + plusOne + ')');
  var select = $('#select-jump-to');
  if (imagePosition == imageTally) {
    var leadOff = $('#shoebox img:first-child');
    $('.picture').attr({
      'src': leadOff.attr('source'),
      'imageposition': '1',
      'width': leadOff.attr('width'),
      'height': leadOff.attr('height'),
      'alt': leadOff.attr('alt')
    });
    select.val(leadOff.attr('source')); //update the dropdown as well.
  } else {
    $('.picture').attr({
      'src': nextUp.attr('source'),
      'imageposition': plusOne,
      'width': nextUp.attr('width'),
      'height': nextUp.attr('height'),
      'alt': nextUp.attr('alt')
    });
    select.val(nextUp.attr('source')); //update the dropdown as well.
  }
});

/* load previous image from #shoebox (click on prev button) */
$('#buttonleft').click(function() {
  var imageTally = $('#shoebox img').length;
  var imagePosition = $('.picture').attr('imageposition');
  var minusOne = parseInt(imagePosition) - 1;
  var nextUp = $('#shoebox img:nth-child(' + minusOne + ')');
  var select = $('#select-jump-to');
  if (imagePosition == '1') {
    var lastPic = $('#shoebox img:last-child');
    $('.picture').attr({
      'src': lastPic.attr('source'),
      'imageposition': imageTally,
      'width': lastPic.attr('width'),
      'height': lastPic.attr('height'),
      'alt': lastPic.attr('alt')
    });
    select.val(lastPic.attr('source')); //update the dropdown as well.
  } else {
    $('.picture').attr({
      'src': nextUp.attr('source'),
      'imageposition': minusOne,
      'width': nextUp.attr('width'),
      'height': nextUp.attr('height'),
      'alt': nextUp.attr('alt')
    });
    select.val(nextUp.attr('source')); //update the dropdown as well.
  }
});

/* Add arrow keyboard navigation */
function GoToLocation(url) {
  window.location = url;
}
Mousetrap.bind("right", function() {
  document.getElementById('buttonright').click();
});

function GoToLocation(url) {
  window.location = url;
}
Mousetrap.bind("left", function() {
  document.getElementById('buttonleft').click();
});
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}
#wall {
  display: flex;
  flex-direction: column;
  padding: 6px;
  background-color: hsla(0, 0%, 20%, 1);
}
#pictureframe {
  display: flex;
  padding: 6px;
  background-color: hsla(0, 0%, 40%, 1);
}
#pictureframe img {
  display: flex;
  width: 100px;
  height: 100px;
}
#buttonswrapper {
  display: flex;
  flex-grow: 1;
}
#jumpto {
  display: flex;
  justify-content: center;
  align-items: center;
}
#buttonleft,
#buttonright {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  padding: 6px;
  color: hsla(40, 20%, 70%, 1);
  font-variant: small-caps;
  font-weight: bold;
  font-family: Verdana, sans-serif;
  background-color: hsla(0, 0%, 40%, 1);
  cursor: pointer;
}
#buttonleft:hover,
#buttonright:hover {
  background-color: hsla(50, 50%, 40%, 1);
}
#shoebox {
  display: none;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.js?bc893"></script>
<div id="wall">
  <div id="pictureframe">
    <img class="picture" src="">
  </div>
  <div id="buttonswrapper">
    <div id="buttonleft">prev</div>
    <div id="buttonright">next</div>
  </div>
  <div id="jumpto">
    <select id="select-jump-to"></select>
  </div>
</div>
<div id="shoebox">
  <!-- prevent loading all images by changing src to source -->
  <img source="http://i.imgur.com/tL6nW.gif" width="100" height="100" alt="pic1">
  <img source="http://i.imgur.com/BfZ5f.gif" width="100" height="100" alt="pic2">
  <img source="http://i.imgur.com/mR7wo.gif" width="100" height="100" alt="pic3">
</div>

Source: Ask Javascript Questions

LEAVE A COMMENT