I now have a plugin pack that includes a new, improved version of the ImageSelect plugin – please head over to egg.liam-galvin.co.uk to download it. Don’t use the old version!
ImageSelect is a jQuery plugin that allows the user to select an image by means of a nice looking dropdown.
Click here to see the demo.
You must have a <select> containing one or more <option>s. Each option must contain the URL to the image you want to display, as the option text. The option value can be whatever you like.
<select name="logo"> <option value="1">/images/whatever.jpg</option> <option value="2">/images/something.png</option> <option value="3">/images/misc.gif</option> </select>
<link href="/imageselect/imageselect.css" media="screen" rel="stylesheet" type="text/css" />
And finally, you just need to call .ImageSelect on the jQuery wrapped select element:
See below for more detailed integrations.
You must call ImageSelect on a jQuery wrapped <select> element:
You can pass in options as an object:
Or specify the method you want:
- method – The method to call. If omitted, the ‘init’ method will be called by default
- options – This is an object containing various options (see below).
- init – Initialises the plugin using the selected element(s).
- open – Shows the dropdown portion of the element (or hides via animation if already shown, works more like toggle() really).
- close – Hides the dropdown portion of the element (no animation).
- remove – Removes the control and reverts to the original select input.
- update – Updates the displayed image selection. You must supply the url in an object, e.g.
- width – The width of the select. Default is 200.
- height – The height of the select (with the dropdown hidden). Default is 75.
- dropdownWidth – The width of the dropdown list part of the select. Default is 350.
- dropdownHeight – The height of the dropdown list part of the select (overflow will scroll). Default is 250.
- z – The z-index to use for the dropdown. Default is 99999.
- backgroundColor – The background colour of the control. Default is ‘#ffffff’.
- borderColor – Border colour of the control (including dropdown). Default is ‘#cccccc’.
- lock – Which dimension to lock, width or height. Default is ‘height’.
Coming in the next version…