Dodaj pole wyboru wybierz, aby włączyć obraz wymiany js

Question

Mam javascript, który zmienia obraz scr po kliknięciu obrazu i będzie cykl. Miał również łącza stronicowania z nawigacją za pomocą klawiszy strzałek. Co chcę zrobić, to dodać pole listy wyboru, które pozwala mi przeskoczyć do dowolnego obrazu, który chcę. Jak mogę to zrobić? Chcę tylko select lista rozwijana bez przedstawienia przycisk

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

bym zacząć od pustej listy rozwijanej, że auto-zapełnia się ze źródłami obrazu z listy jako wartości opcji, następnie wybierz zdarzenie changed, aby wyświetlić obraz, który zostanie załadowany w oparciu o wybraną opcję. Oto co wymyśliłem, że następująca konfigurację:

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

Jeśli chcesz, aby Prex/Następna przycisków również zmienić listę rozwijaną, ustaw wartość rozwijanym za równą imageURL jesteś zachodzącego w swoich imprez, na przykład $('#select-jump-to').val(variableContainingnextImage)

Oto Twój kod, który zawiera również rozwijane i przyciski zmieniające również menu rozwijane.

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