選択したドロップダウンボックスをonclickスワップイメージに追加するjs

Question

画像をクリックすると画像scrを変更するjavascriptがあり、それが繰り返し表示されます。また、矢印のキーボードナビゲーションとのページネーションリンクもありました。私がしたいのは、ドロップダウンリストボックスを追加して、私が望むイメージにジャンプできるようにすることです。これどうやってするの？私はちょうど私がオプション値としてあなたのリストからイメージソースで自身を自動的に移入され、空のドロップダウンから始めたい

/* set first image in frame from #shoebox on document.ready */ 
 
$(function() { 
 
    var leadOff = $('#shoebox img:first-child').attr('source'); 
 
\t $('.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; 
 
\t 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; 
 
\t 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>

Answer 1

送信ボタンなしの選択ドロップダウンリストをしたいです、ドロップダウンのchangedイベントで、選択したオプションに基づいてどのイメージをロードするかを指定します。ここで私はその思い付いたのは、あなたのセットアップを次の：

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

あなたもドロップダウンを変更するには、PREX /次のボタンを使用する場合は、あなたがあなたのイベントに設定しているimageURLに等しくドロップダウンの値を設定し、例えば$('#select-jump-to').val(variableContainingnextImage)

コードは、ドロップダウンとボタンの両方でドロップダウンを変更しているコードです。

/* 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>