ImageSelect jQuery plugin

ImageSelect jQuery plugin that allows the user to select an image by means of a nice looking dropdown.

Installation

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>

Then you just need to include the javascript, stylesheet and images, and modify the css to make sure the image path(s) are correct for you.

<script src="/imageselect/imageselect.js" type="text/javascript"></script>
<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:
$('select[name=logo]').ImageSelect();
See below for more detailed integrations.

Usage

You must call ImageSelect on a jQuery wrapped <select> element:
$('select[name=logo]').ImageSelect();
You can pass in options as an object:
$('select[name=logo]').ImageSelect({width:100});
Or specify the method you want:
$('select[name=logo]').ImageSelect('remove');
Or both:
$('select[name=logo]').ImageSelect('init',{width:100,height:50});

Arguments

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

Methods

• 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. $('select[name=logo]').update({url:'/images/logo.jpg'}).

Options

• 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'.
• download : Current version (1.1.0)
• demo : here
• nice ImageSelect jQuery plugin