jquery - Trying to add missing img attributes to custom javascript -

i have javascript changes image scr when click on , cycle through. has navigation links , arrow keyboard navigation.

i'm having trouble of adding image attributes width, height , alt img scr. when view final result shows: <img class="picture" src="http://i.imgur.com/tl6nw.gif" imageposition="1">

it's missing width,height , alt. in html content have included width,height , alt javascript doesn't seem adding attributes final result. can me fix code?

/* set first image in frame #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 #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 dropdown well.    } else {      $('.picture').attr({        'src': nextup,        'imageposition': plusone      });      select.val(nextup);//update dropdown well.    }  });    /* load previous image #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 dropdown well.    } else {      $('.picture').attr({        'src': nextup,        'imageposition': minusone      });      select.val(nextup); //update dropdown 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 images changing src 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>

for have insert attribute values <img> tag you're pulling <img source> tags <img> tag you're swapping in. example, on init, want change code this:

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

note you're selecting image tag instead of source outright. initialize attributes through attr function reading attributes tag. you'll have make similar adjustments click events prev/next buttons, change select value assignment @ image object's source attribute, e.g. select.val(nextup.attr('source'))

for dropdown, want copy attributes custom data- attributes each attribute want copy on (i.e. data-width, data-height, data-alt) can access later:

  $.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>'     )   }); 

in change event, read option tag's attributes , set them in image:

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

updated code below:

/* set first image in frame #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 #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 dropdown 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 dropdown well.    }  });    /* load previous image #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 dropdown 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 dropdown 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 images changing src 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>