Adding image attributes to custom js Options

[Ruriko]

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.

In html view it's printing the html code as:

CODE

<img class="picture" src="http://i.imgur.com/tL6nW.gif" imageposition="1">

It's currently missing the width, height and alt. I'm having trouble of adding image attributes width, height and alt to the img scr. Can anyone help me fix my code?

java script:

CODE

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

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

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

  select.on('change', function(e) {
    $('.picture').attr({
      'src': e.target.options[e.target.selectedIndex].value,
      'imageposition': e.target.selectedIndex + 1
    });
  });

});
/* 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 + ')').attr('source');
  var select = $('#select-jump-to');
  if (imagePosition == imageTally) {
    var leadOff = $('#shoebox img:first-child').attr('source');
    $('.picture').attr({
      'src': leadOff,
      'imageposition': '1'
    });
    select.val(leadOff); //update the dropdown as well.
  } else {
    $('.picture').attr({
      'src': nextUp,
      'imageposition': plusOne
    });
    select.val(nextUp);//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 + ')').attr('source');
  var select = $('#select-jump-to');
  if (imagePosition == '1') {
    var lastPic = $('#shoebox img:last-child').attr('source');
    $('.picture').attr({
      'src': lastPic,
      'imageposition': imageTally
    });
    select.val(lastPic); //update the dropdown as well.
  } else {
    $('.picture').attr({
      'src': nextUp,
      'imageposition': minusOne
    });
    select.val(nextUp); //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();
});

HTML:

CODE

<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>

CSS:

CODE

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;
}

[CharlesEF]

Look for code like this:

CODE

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

And change it to this:

CODE

    $('.picture').attr({
      'src': leadOff,
      'imageposition': '1',
      'height': '300px',
      'width': '300px',
      'alt': 'Some ALT text'
    });

Do this for all code sections (there are more than 1). Change the height, width and alt values to whatever you want.