jquery select image

Question

我正在尋找允許用戶選擇預先上傳的圖像到用戶生成的網頁。

我有一個可用圖像的列表，所以我可以很容易地做到這一點與選擇控制，但是，我真的想讓用戶選擇從縮略圖彈出，而不是文本，然後有用生成的文件名填充文本表單元素。我希望最終的結果將像日曆彈出日期選擇器一樣。

我敢肯定有一個簡單的方法來使用jquery /其他javascript來做到這一點。有沒有人知道預先構建的小部件/這方面的例子，或者人們可以指出我從哪裏開始的正確方向？我敢新的JavaScript，但願意學習投資一些時間......

---

澄清：網格或縮略圖列表是我理想之後是，更主要的是給用戶的圖片的視覺表示，而不是它的文件名...

Answer 1

function fillBox(myImg){ 
    imageSource = myImg.src; 
    imgName = // do some stuff to get only the filename, minus the dirs 
    document.getElementById("yourTextBox").value = imgName; 
} 

和你產生你的縮略圖，將其添加到img標籤：

onclick="javascript:fillBox(this);" 

我沒有測試過任何這一點，但它應該讓你大部分的方式存在。

Answer 2

我對jQuery custom select印象深刻。不過，在填充字段時似乎有點遲緩。

Answer 3

我能找到這個jQuery插件稱爲"Select Box Factory 2.0"

打開「其他功能：圖像」手風琴，我覺得這是多還是少，你想要什麼。

或者，你可以這樣做：

<select id='images'> 
    <option value='tiger.jpg'>Tiger</option> 
    <option value='owl.jpg'>Owl</option> 
    <option value='bear.jpg'>Bear</option> 
</select> 
<div id='preview'></div> 

然後jQuery代碼是這樣的：

$('#images').change(function() { 
    var image = $(this).val(); 
    var img = $('<img/>').attr('src', image); 
    $('#preview').html(img); 
}); 

好運。