rvera / image-picker

Image Picker is a simple jQuery plugin that transforms a select element into a more user friendly graphical interface.
http://rvera.github.com/image-picker
Other
906 stars 216 forks source link

Add ability to customize thumbnail DIV #23

Closed mrazjava closed 10 years ago

mrazjava commented 10 years ago

I was in need of styling thumbnail div after option translation (had new images in my library and wanted to style the resulting thumbnail with a "new" overlay tag). Ended up enhancing library code:

  var thumbclasses = "";
  if(!(this.option.attr('class')===undefined)) {
      thumbclasses = " " + this.option.attr('class');
  }

Above goes at the very beginning of: ImagePickerOption.prototype.create_node = function() { Then, including thumbclasses when building the div: thumbnail = jQuery("<div class='thumbnail" + thumbclasses + "'>"); Complete enhanced function:

ImagePickerOption.prototype.create_node = function() {
  var thumbclasses = "";
  if(!(this.option.attr('class')===undefined)) {
      thumbclasses = " " + this.option.attr('class');
  }
  var image, thumbnail;
  this.node = jQuery("<li/>");
  image = jQuery("<img class='image_picker_image'/>");
  image.attr("src", this.option.data("img-src"));
  thumbnail = jQuery("<div class='thumbnail" + thumbclasses + "'>");
  thumbnail.click({
    option: this
  }, function(event) {
    return event.data.option.clicked();
  });
  thumbnail.append(image);
  if (this.opts.show_label) {
    thumbnail.append(jQuery("<p/>").html(this.label()));
  }
  this.node.append(thumbnail);
  return this.node;
};

return ImagePickerOption;

})

With this, I can now define options like this: <optgroup label="Beer">
<option data-img-src='../images/promos/beer/beer-128.png' value='beer/beer'>Generic</option>
<option class='new' data-img-src='../images/promos/beer/beer_miller-128.png' value='beer/beer_miller'>Miller Lite</option>
</optgroup>
And the library will render div thumbs with option class, so a div can be styled: <div class="thumbnail"><img class="image_picker_image" src="../images/promos/beer/beer-128.png"><p>Generic</p></div>
<div class="thumbnail new selected"><img class="image_picker_image" src="../images/promos/beer/beer_miller-128.png"><p>Miller Lite</p></div>
Figured I'd share since it maybe useful to others. Feel free to merge.

rvera commented 10 years ago

That's a good idea, this is not a pull request so I can't really "merge it".