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

Solution 1

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

and as you're generating your thumbnails, add this to the img tag:

onclick="javascript:fillBox(this);"

I haven't tested any of this, but it should get you most of the way there.

Solution 2

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.

Solution 3

I was rather impressed with jQuery custom select. It seemed to be a bit sluggish when populating the fields, though.

Comments

[Rob Y]

Thanks for this. I ended up using it in combination with Paulo's answer, helped me out a treat.