Onclick takas görüntüsüne bir açılır kapanır kutusu ekle js

Question

Görüntüyü tıklattığınızda görüntüyü değiştiren bir javascript'im var ve bu işlem döngüden geçiyor. Ayrıca, ok tuşlu navigasyon ile sayfalama bağlantıları vardı. Ne yapmak istediğim, istediğim herhangi bir resme atlamamı sağlayan bir açılan liste kutusu eklemektir. Bunu nasıl yapabilirim? Ben sadece, opsiyon değerleri olarak listenizden görüntü kaynaklarıyla kendisini otomatik doldurur boş açılır ile başlamak istiyorum bir olmadan seçme açılır liste düğmesine

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

göndermek istiyorum daha sonra açılan seçeneğin changed olay sürücüsüne sahip olduğu görüntü, seçilen seçeneğe göre yükler. İşte bu senin kurulum aşağıdaki I geldi ne:

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

Eğer Prex/Sonraki düğmeleri de, açılan değiştirmek için, örneğin etkinliklerinizdeki içinde kuruyorsun ImageUrl eşit dropdown değerini ayarlamak isterseniz $('#select-jump-to').val(variableContainingnextImage)

Burada hem açılır hem de düğmelerin yanı sıra açılır menüyü de değiştiren kodunuz.

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