jQuery imageSelect Plugin


/ Published in: jQuery
Save to your folder(s)

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


Copy this code and paste it in your HTML
  1. /**
  2.  * ImageSelect jQuery plugin
  3.  *
  4.  * @author Stefan Zollinger
  5.  *
  6.  * options:
  7.  * containerClass: 'image-select-container'
  8.  * imageClass: 'image-select'
  9.  * thumbnailWidth: '60'
  10.  * imageSrc: 'text' or 'value'
  11.  *
  12.  */
  13.  
  14. (function($) {
  15.  
  16. $.fn.imageSelect = function(options){
  17. var opts = $.extend({}, $.fn.imageSelect.defaults, options);
  18.  
  19. return this.each(function() {
  20. var $this = $(this);
  21. if(this.tagName == 'SELECT'){
  22.  
  23. $this.wrap('<div class="' + opts.containerClass + '">' );
  24. var html = '';
  25. $this.children('option').each(function(){
  26.  
  27. if(this.selected == true){
  28. selectClass = 'selected';
  29. }else{
  30. selectClass = '';
  31. }
  32. var src;
  33. if(opts.imageSrc == 'text'){
  34. src = $(this).text();
  35. }else{
  36. src = this.value;
  37. }
  38.  
  39. if (this.value == '' || this.value == undefined) {
  40. html += '<a class="' +
  41. selectClass +
  42. ' ' +
  43. opts.imageClass +
  44. '" href="#select_' +
  45. this.value +
  46. '"><div style="background-color: #ccc; width: ' +
  47. opts.thumbnailWidth + 'px; height: ' + opts.thumbnailWidth +
  48. 'px" >'+opts.emptyText+'</div></a>';
  49. } else {
  50. html += '<a class="' +
  51. selectClass +
  52. ' ' +
  53. opts.imageClass +
  54. '" href="#select_' +
  55. this.value +
  56. '"><img src="' +
  57. src +
  58. '" style="width: ' +
  59. opts.thumbnailWidth +
  60. 'px" /></a>';
  61. }
  62. });
  63.  
  64. $(this).after(html);
  65.  
  66. $('a.image-select').click($.fn.imageSelect.selectImage);
  67.  
  68. $this.css('display', 'none');
  69. }
  70.  
  71. });
  72. }
  73.  
  74. $.fn.imageSelect.selectImage = function(e){
  75. var $selectBox = $(this).prevAll('select:first');
  76.  
  77. if($selectBox.attr('multiple') == true){
  78. var $option = $selectBox.children('option[value='+this.href.split('_')[1]+']');
  79.  
  80. if($option.attr('selected') == true){
  81. $option.attr('selected', false);
  82. $(this).removeClass('selected');
  83. }else{
  84. $option.attr('selected', true);
  85. $(this).addClass('selected');
  86. }
  87.  
  88. }else{
  89. $selectBox.val(this.href.split('_')[1]);
  90. $(this).parent().children('a').removeClass('selected');
  91. $(this).addClass('selected');
  92. }
  93.  
  94.  
  95.  
  96. return false;
  97. }
  98.  
  99. $.fn.imageSelect.defaults = {
  100. containerClass: 'image-select-container',
  101. imageClass: 'image-select',
  102. imageSrc: 'text',
  103. thumbnailWidth: '60',
  104. emptyText: 'No image',
  105. };
  106.  
  107. function debug(msg) {
  108. if (window.console && window.console.log)
  109. window.console.log('imageselect: ' + msg);
  110. };
  111.  
  112.  
  113. })(jQuery)

URL: jquery.imageselect

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.