Image Select Plugin

Submitted by:Andery Smith

Date added:24 December, 2012

Category:jQuery

jQuery plugin code to image selection

Tags: image select

Code Snippet:

/** 
* 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)
 
 

Comments