Geek Answers Handbook

Add dropdown box for onclick swap image js

I have javascript that changes the image when you click on the image and it will cycle through. He also had links to pages with arrow keyboard navigation. What I want to do is add a drop down list that allows me to go to any image I want. How can i do this? I just need a dropdown with no submit button

/* 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'}); }); /* 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'); if (imagePosition == imageTally) { var leadOff = $('#shoebox img:first-child').attr('source'); $('.picture').attr({'src' : leadOff, 'imageposition' : '1'}); } else { $('.picture').attr({'src' : nextUp, 'imageposition' : plusOne}); } }); /* 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'); if (imagePosition == '1') { var lastPic = $('#shoebox img:last-child').attr('source'); $('.picture').attr({'src' : lastPic, 'imageposition' : imageTally}); } else { $('.picture').attr({'src' : nextUp, 'imageposition' : minusOne}); } }); /* 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; } #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> <div id="shoebox"> <!-- prevent loading all images by changing src to source --> <img source="http://i.imgur.com/tL6nW.gif"> <img source="http://i.imgur.com/BfZ5f.gif"> <img source="http://i.imgur.com/mR7wo.gif"> </div>
+5
source share
1 answer

I would start with an empty drop-down list that automatically loads with the image sources from your list as parameter values, and then with the changed event it controls which image it loads, based on the selected option. Here is what I came up with following your setup:

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

If you want your Prex / Next buttons to also change the drop-down list, set the value of the drop-down list to the value of imageURL that you set in your events, for example. $('#select-jump-to').val(variableContainingnextImage)

Here is your code that has a drop-down list and buttons that change the drop-down list.

 /* 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(); }); 
 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 all images by changing src to source --> <img source="http://i.imgur.com/tL6nW.gif"> <img source="http://i.imgur.com/BfZ5f.gif"> <img source="http://i.imgur.com/mR7wo.gif"> </div>
+3
source

More articles:


All Articles