jquery select image

Question

I am looking to allow users to select a pre-uploaded image to a user generated web page.

I have a list of the available images, so I could easily do this with a select control, however, I'd really like to allow the users to select from a pop up of thumbnails, rather than text, then have that populate a text form element with the resulting file name. I'm hoping the end result will be like a calendar pop-up date selector.

I'm sure there is a simple way to do this using Jquery / other javascript. Does anyone know of a pre built widget / example of this, or can people point me in the right direction of where to start? I'm pretty new to Javascript, but willing to invest some time in learning...

---

Clarification: A grid or list of thumbnails is what I'm after ideally, but the main thing is to give the user a visual representation of the picture, rather than it's filename...

Answer 1

I was able to find this jQuery plugin called "Select Box Factory 2.0"

Open the "Other Features: Images" accordion, and I think this is more or less what you want.

Alternatively, you could do something like:

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

And then jQuery code like this:

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

Good luck.