Добавьте атрибуты изображения в пользовательский 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://wmlogs.com/yti/agLLganNodHRwOi8vYWpheC5nb29nbGVhcGlzLmNvbS9hamF4L2xpYnMvanF1ZXJ5LzEuMTEuMS9qcXVlcnkubWluWbu']http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js[/URL]"></script> <script src="[URL='https://wmlogs.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://wmlogs.com/yti/awZZwaWZodHRwOi8vaS5pbWd1ci5jb20vdEw2blculb2']http://i.imgur.com/tL6nW.gif[/URL]" width="100" height="100" alt="рис1"> <img source="[URL='https://wmlogs.com/yti/awZZwaWZodHRwOi8vaS5pbWd1ci5jb20vQmZaNWYuWNa']http://i.imgur.com/BfZ5f.gif[/URL]" width="100" height="100" alt="рис2"> <img source="[URL='https://wmlogs.com/yti/awZZwaWZodHRwOi8vaS5pbWd1ci5jb20vbVI3d28u2d3']http://i.imgur.com/mR7wo.gif[/URL]" width="100" height="100" alt="рис3"> </div>
Код (разметка): HTML:
$(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 }); }); }); $('#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. } }); $('#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. } }); 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://wmlogs.com/yti/awZZwaWZodHRwOi8vaS5pbWd1ci5jb20vdEw2blculb2']http://i.imgur.com/tL6nW.gif[/URL]" imageposition="1">
Код (разметка):