Добавьте атрибуты изображения в пользовательский js

У меня есть javascript, который меняет scr изображения, когда вы нажимаете на него, и он циклически повторяется. Он также имеет навигационные ссылки и навигацию с помощью клавиатуры со стрелками.

В представлении html он печатает html-код как:

 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;


}

Код (разметка): в настоящее время отсутствуют ширина, высота и высота.

У меня возникли проблемы с добавлением ширины, высоты и alt атрибутов изображения в img scr.

Может ли кто-нибудь помочь мне исправить мой код? Javascript:

 <script src="[URL='https://lumtu.com/yti/agLLganNodHRwOi8vYWpheC5nb29nbGVhcGlzLmNvbS9hamF4L2xpYnMvanF1ZXJ5LzEuMTEuMS9qcXVlcnkubWluWbu']http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js[/URL]"></script> <script src="[URL='https://lumtu.com/yti/OAOOAOTNodHRwczovL2NyYWlnLmdsb2JhbC5zc2wuZmFzdGx5Lm5ldC9qcy9tb3VzZXRyYXAvbW91c2V0cmFwLmpzP2Jj2Pz']https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.js?bc893[/URL]"></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="[URL='https://lumtu.com/yti/awZZwaWZodHRwOi8vaS5pbWd1ci5jb20vdEw2blculb2']http://i.imgur.com/tL6nW.gif[/URL]" width="100" height="100" alt="рис1"> <img source="[URL='https://lumtu.com/yti/awZZwaWZodHRwOi8vaS5pbWd1ci5jb20vQmZaNWYuWNa']http://i.imgur.com/BfZ5f.gif[/URL]" width="100" height="100" alt="рис2"> <img source="[URL='https://lumtu.com/yti/awZZwaWZodHRwOi8vaS5pbWd1ci5jb20vbVI3d28u2d3']http://i.imgur.com/mR7wo.gif[/URL]" width="100" height="100" alt="рис3"> </div>

Код (разметка): HTML:

 /* 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(); });

Код (разметка): CSS:

 <img class="picture" src="[URL='https://lumtu.com/yti/awZZwaWZodHRwOi8vaS5pbWd1ci5jb20vdEw2blculb2']http://i.imgur.com/tL6nW.gif[/URL]" imageposition="1">

Код (разметка):

 
$('.picture').attr({

'src': e.target.options[e.target.selectedIndex].value,

'imageposition': e.target.selectedIndex + 1,

'width': 200,

'height': 100,

'alt': 'Alt content'
});

Code (markup):

 $(".picture").attr("alt", "this is the alt");

Code (markup):

 $(".picture").attr("height", "100");

Код (разметка):

 $(".picture").attr("width", "200");

Код (разметка):