JQuery выберите изображение

Question

Я хочу, чтобы пользователи могли выбирать предварительно загруженное изображение для созданной пользователем веб-страницы.

У меня есть список доступных изображений, поэтому я мог бы легко сделать это с помощью элемента управления select, однако я бы действительно хотел, чтобы пользователи могли выбирать из всплывающих миниатюр, а не текста, а затем заполните текстовый элемент формы полученным именем файла. Я надеюсь, что конечный результат будет похож на селектор даты всплывающего календаря.

Я уверен, что есть простой способ сделать это, используя Jquery / другой javascript. Кто-нибудь знает заранее созданный виджет / пример этого, или люди могут указать мне в правильном направлении, с чего начать? Я довольно новичок в Javascript, но готов потратить некоторое время на изучение ...

---

Уточнение: в идеале мне нужна сетка или список миниатюр, но главное - дать пользователю визуальное представление картинки, а не ее имени ...

Answer 1

Мне удалось найти этот плагин 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);
});

Удачи.

Answer 2

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 3

Я был довольно впечатлен jQuery custom select . Однако при заполнении полей это выглядит немного вяло.