search

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
907 stars 216 forks source link

Custom picking icon #119

Closed TommyZG closed 6 years ago

TommyZG commented 6 years ago

Hi,

Is there a possibility to use an icon for selection over image, like in Android's multiple select from Gallery? For instance, in bottom right corner, an empty circle when nothing is selected and circle filled with a check sign when the image is selected.

TommyZG commented 6 years ago

Well, if anyone needs this, here's how I did it.

In image-picker.js, find the line where image from data-src attribute is appended:

//Line 298 in version 0.3.1
thumbnail.append(image);

Add your code inline to it (I have used an image of a checkmark)

thumbnail.append(image).append(jQuery('<img src="img/checkmark.png" class="custom-checkmark">'));

Now you have it in your DOM. We have to use some CSS to position it correctly and hide it when option is not selected:

.custom-checkmark {
  opacity: 0;
  position: absolute;
  height: 22px;
  width: 22px;
  margin-left: -24px;
  margin-top: 47px;
}

.thumbnail.selected .custom-checkmark {
  opacity: 1;
}

You have to leave the .thumbnail.selected class named exactly like this, you can change your custom class name as you wish. Play around with width, height and margin options. These values got me the checkmark in bottom right corner, about 15px from edges.