Posted By

ping_ch on 02/24/09


Tagged

javascript select forms jquery


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

jamesming
umang_nine
byjg


jQuery imageSelect Plugin


 / Published in: jQuery
 

URL: jquery.imageselect

Converts a standard select box to a clickable image thumbnail list. <select> <option>/images/test1.jpg</option> <option>/images/test2.jpg</option> </select>

<script> $('#image').imageSelect();

</script>

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

  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)

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: byjg on August 16, 2009

Hi,

I did some changes in script adding 'notFoundImage', how I send to you?

Here a real example of this code:

$(function() { $('#image').imageSelect({ thumbnailWidth: '200', notFoundImage: 'notfound.png' }); });

.image-select {background-color: none; padding: 1px; margin: 1px}
.selected {background-color: red};

...

botao_boleto.png 
botao_credito.png 
botao_debito.png 
botao_transfbanco.png 
aaaa.png 
teste.png

You need to login to post a comment.