Adding image attributes to custom js |
Adding image attributes to custom js |
Ruriko |
Aug 28 2016, 08:16 AM
Post
#1
|
Group: Members Posts: 9 Joined: 22-August 12 Member No.: 17,649 |
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 |
Aug 28 2016, 11:16 AM
Post
#2
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
Look for code like this:
CODE $('.picture').attr({ And change it to this: 'src': leadOff, 'imageposition': '1' }); CODE $('.picture').attr({ Do this for all code sections (there are more than 1). Change the height, width and alt values to whatever you want.'src': leadOff, 'imageposition': '1', 'height': '300px', 'width': '300px', 'alt': 'Some ALT text' }); |
Lo-Fi Version | Time is now: 26th April 2024 - 04:00 AM |