/** 
 * ImageSelect jQuery plugin
 * 
 * @author Stefan Zollinger
 * 
 * options:
 *   containerClass: 'image-select-container'
 *   imageClass: 'image-select'
 *   thumbnailWidth: '60'
 *   imageSrc: 'text' or 'value'
 * 
 */

(function($) {
	
	$.fn.imageSelect = function(options){
		var opts = $.extend({}, $.fn.imageSelect.defaults, options);
		
		return this.each(function() {
			var $this = $(this);
			if(this.tagName == 'SELECT'){
				
				$this.wrap('<div class="' + opts.containerClass + '">' );
				var html = '';				
				$this.children('option').each(function(){
					
					if(this.selected == true){
						selectClass = 'selected';
					}else{
						selectClass = '';
					}
					var src;
					if(opts.imageSrc == 'text'){
						src = $(this).text(); 
					}else{
						src = this.value;
					}
					
					if (this.value == '' || this.value == undefined) {
						html += '<a class="' +
											selectClass +
											' ' +
											opts.imageClass +
											'" href="#select_' +
											this.value +
											'"><div style="background-color: #ccc; width: ' +
											opts.thumbnailWidth + 'px; height: ' + opts.thumbnailWidth +
											'px" >'+opts.emptyText+'</div></a>';
					} else {
						html += '<a class="' +
											selectClass +
											' ' +
											opts.imageClass +
											'" href="#select_' +
											this.value +
											'"><img  src="' +
											src +
											'" style="width: ' +
											opts.thumbnailWidth +
											'px" /></a>';
					}
				});
				
				$(this).after(html);
				
				$('a.image-select').click($.fn.imageSelect.selectImage);
				
				$this.css('display', 'none');
			}
			
  		});
	}
	
	$.fn.imageSelect.selectImage = function(e){
		var $selectBox = $(this).prevAll('select:first');
		
		if($selectBox.attr('multiple') == true){
			var $option = $selectBox.children('option[value='+this.href.split('_')[1]+']');
			
			if($option.attr('selected') == true){
				$option.attr('selected', false);
				$(this).removeClass('selected');
			}else{
				$option.attr('selected', true);
				$(this).addClass('selected');
			}
			
		}else{
			$selectBox.val(this.href.split('_')[1]);
			$(this).parent().children('a').removeClass('selected');
			$(this).addClass('selected');
		}
		
		
		
		return false;
	}
	
	$.fn.imageSelect.defaults = {
		containerClass: 'image-select-container',
		imageClass: 'image-select',
		imageSrc: 'text',
		thumbnailWidth: '60',
		emptyText: 'No image',
	};
  
	function debug(msg) {
		if (window.console && window.console.log) 
			window.console.log('imageselect: ' + msg);
	};
  

})(jQuery)

/** 
 * ImageSelect jQuery plugin
 * 
 * @author Stefan Zollinger
 * 
 * options:
 *   containerClass: 'image-select-container'
 *   imageClass: 'image-select'
 *   thumbnailWidth: '60'
 *   imageSrc: 'text' or 'value'
 * 
 */

(function($) {
	
	$.fn.imageSelect = function(options){
		var opts = $.extend({}, $.fn.imageSelect.defaults, options);
		
		return this.each(function() {
			var $this = $(this);
			if(this.tagName == 'SELECT'){
				
				$this.wrap('<div class="' + opts.containerClass + '">' );
				var html = '';				
				$this.children('option').each(function(){
					
					if($this.val() == this.value){
						selectClass = 'selected';
					}else{
						selectClass = '';
					}
					var src;
					if(opts.imageSrc == 'text'){
						src = $(this).text(); 
					}else{
						src = this.value;
					}
					
					if (this.value == '' || this.value == undefined) {
						html += '<a class="' +
											selectClass +
											' ' +
											opts.imageClass +
											'" href="#select_' +
											this.value +
											'"><div style="background-color: #ccc; width: ' +
											opts.thumbnailWidth + 'px; height: ' + opts.thumbnailWidth +
											'px" /></a>';
					} else {
						html += '<a class="' +
											selectClass +
											' ' +
											opts.imageClass +
											'" href="#select_' +
											this.value +
											'"><img  src="' +
											src +
											'" style="width: ' +
											opts.thumbnailWidth +
											'px" /></a>';
					}
				});
				
				$(this).after(html);
				
				$('a.image-select').click($.fn.imageSelect.selectImage);
				
				$this.css('display', 'none');
			}
			
  		});
	}
	
	$.fn.imageSelect.selectImage = function(e){
		$(this).prevAll('select:first').val(this.href.split('_')[1]);
		$(this).parent().children('a').removeClass('selected');
		$(this).addClass('selected');
		return false;
	}
	
	$.fn.imageSelect.defaults = {
		containerClass: 'image-select-container',
		imageClass: 'image-select',
		imageSrc: 'text',
		thumbnailWidth: '60'
	};
  
	function debug(msg) {
		if (window.console && window.console.log) 
			window.console.log('imageselect: ' + msg);
	};
  

})(jQuery)

jquery.imageselect

Converts a standard select box to a clickable image thumbnail list.
<code>
&lt;select&gt;
&lt;option&gt;/images/test1.jpg&lt;/option&gt;
&lt;option&gt;/images/test2.jpg&lt;/option&gt;
&lt;/select&gt;

&lt;script&gt;
$('#image').imageSelect();

&lt;/script&gt;

</code>

** Updated 2009-02-25: Now supports multi-select boxes

jQuery imageSelect Plugin

javascript, forms, jquery

jQuery