rvera / image-picker Goto Github PK

Doesn't work with jQuery 1.4.2; does with jQuery 2.1.0.min; documentation update?

I tried to use select multiple.
But I cannot deselect first element after I selected that once.
It only happen in mobile Chrome browser.
Android OS 4.1.2 and 4.3 (Nexus 7)
Chrome Browser 28.0.1500.94

Here is the movie that I comfirmed the situation.
https://www.youtube.com/watch?v=y0r_DYz8iAk

I am debugging and thinking what's happening and how to solve.

And maybe something is happening at image-picker.js , line 160
if (_ref = imagepicker_option.value(), __indexOf.call(this.selected_values(), _ref) >= 0)

But I cannot have solution yet... sorry...

I don't know if it is a bug, or is just me that don't know how to do it.
I have a form with different fields and also an Image-picker select with 5 images (with multiple selection).
When there are some validation error, the message error is displayed, and the values of the other fields are filled with the pre-existing input.
In Laravel4 i can do this easily with value={{ Input::old('InputName') }}
but it does not work with the ImagePicker selection.

Or better, Input::old('') contains all the input from all the fields and also an array with ([0] => 'single room', [1] => 'double rooms'), that it is exactly my selection in the Image-picker select, but i don't know how to pre-select the images, according to this.

Do you understand?
If you have some questions feel free to ask!
Thank you for the attention!

My question is how to change the size (width, height in px) in Image-Picker or if in this version there is no such option then I will offer to add option with which you can change the images size - width and height. :)

To save screen space, could the plugin have an option to only show the images when the dropdown is clicked on (I guess also suppressing the dropdown's native elements being displayed as well)? Maybe even also hooking into optional jQuery Animate animations for display/hide once selected?

While using multiple select and hiding the original select the user should be able to select a range of images using shift key like it does in original select.

This was easy enough to fix, i just added in a different value for option menu, but still it would be nice if we could just leave the value="" empty and still have the plugin show only one item selected. This probably has to do with how the plugin defines its index.

Hi

Firstly thank you for your plug in, its very useful. I am trying to use it to create select option images and it works well but I wondered if you can tell me what I can do to toggle show/hide the images as there are a lot of them and a few options.

Here is the page http://www.pinkequine.com/bespoke/imagechanger.html I apologize for any bad jquery but I only learned it yesterday.

I hope you can help.

Thanks for making this great tool available!
The following would be useful (I'd also need them now):

1. The order the events are received is: changed, clicked, selected. This means that before the first event, the state of the selection changes, i.e. you cannot know what was the previous state (unless you store the states of all your image-picker objects). If "clicked" came before "changed", then you could use the previous state of the selection, which is sometimes useful (e.g. to restore it if the event is cancelled).
2. You may need to know if e.g. CTRL is pressed during the click, to be able to modify the meaning. The event (and thus event.ctrlKey, etc.) is available as window.event on Chrome and Internet Explorer, but not on e.g. Firefox. If the event object was passed to the event function, that would make it usable that way universally under all browsers.
3. Making available the context menu (or right click) event could be useful as well.

Thanks!

Is it possible to paginate the results? - Say that the select box has 1000 items in it, how would I paginate the thumbnails to only show a subset (50, for instance) at a time?

Hello together,

for testing issues, it would be great, if you integrate the sources of the demo-page into this project.

Bye,
Andreas

the plugin initiates but nothing is displayed

When calling .imagepicker on a select box that is bound to knockout the first time everything works fine. When that select list is changed and the call is made again (as is recommended) the underlying select list seems to never receive the updates on when an item is selected. the thumbnail does highlight correctly though.

Is there a way to totally destroy the first instance and recreate it? the destroy method seems to leave some stuff behind.

Knockout is mentioned because it is more apparent with knockout. The scenario is items get added to the list from other dom events and would be added or removed from the master select list. The user would then get the option to pick from this master list. Things work great on the first time around but stop once anything is changed on the select list

Is there any options available for 'SelectAll' , 'UnSelect All', 'Zoom In/Out' options on the Groups Images

Reset button only resets underlying select, but not the image picker. Images stay picked after resetting. Any suggestion?

Could we create a sort of albums using <optgroup> so that photos from different albums could be "grouped"?

Hi,

And thanks for a nice plugin :) I noticed that a disabled select doesn't show the selected value (due to .val() returning null if the select is disabled, see: http://bugs.jquery.com/ticket/13097).

I could get this to work by replacing this line in ImagePickerOption.prototype.is_selected():

var select_value;
select_value = this.picker.select.val();

with:

var select_value, selected_index;
selected_index = this.picker.select.prop('selectedIndex');
select_value = this.picker.picker_options[selected_index].value();

Also it would be nice to get an additional class to the wrapper if select is disabled. What do you think?

Juha

I know this is a big one, but it would be nice if picker supported accordeon style ajax support. Basically option groups would be all collapsed by default (at initialization any option group can be expanded). Option group content only loads on expansion via ajax. Obviously option group has to be clickable (click when collapsed results in expansion and ajax load, click when expanded results in collapsing).

Great plugin! I'm wondering - is there a way to make the thumbnails responsive so they play nicely on mobile devices? Thanks!

David.

Firstly thanks for an amazing plugin, It's helped me out a lot.

I've noticed the performance of toggling the images slows down a lot with pickers that are very large, like 150 or so images. The lag between the mouse click and the highlight appearing is 1-1.5 seconds.

I wouldn't know where to start to optimise this but I was wondering if you had noticed the same thing with larger pickers?
thanks

Update - I created a fiddle with simplified code at: http://jsfiddle.net/vSv6k/6/

I am using this lovely plugin to show thumbs of image objects. To speed up the process and show the user a complete list immediately, I am initially generating the imagepicker for all objects with a place holder image and only then replace the thumb one by one. The problem is that after updating the data-img-src by jquery and re-init of imagepicker the select option does contain the correct data-img-src but the list item still contains the placeholder (except for the first object which displays with the correct image instead of the placeholder). Any ideas how to solve this?

This is what I am doing:

First generate initial imagepicker with placeholders:

          $.each(photos_list, function(key, photo ) {
            // add entry to imagepicker with placeholder thumb
              $('#imagepicker').append(
                $("<option>" , {
                  text: photo.name,
                  value: photo.object,
                  'data-img-src' : 'http://placehold.it/100x100&text=Loading+Image'
                })
              );

Then in async.queue replace thumbs one by one:

          // replace placeholder thumb by real thumb
          $('#imagepicker option[value="'+photo.data.object+'"]').attr('data-img-src','data:image/jpeg;base64,'+response);
          // update imagepicker every 10 images
          if (thumbcount%10==0) {
            $("#imagepicker").imagepicker({
              hide_select: true,
              show_label: true
            });
          }

Of course I also call re-init of imagepicker at the drain event of the queue so it will display also the last images.

If I do the same but instead start with an empty list and add select options one by one with the final thumb it works fine.

I'm trying to figure out how to get the actual image that was clicked (not the option) within the clicked callback. I can see how to get the clicked option, but not the actual image, which I need because I want to run some code on each image as it is clicked... Thanks!

Can someone clarify in the examples section of the usage of the changed value?

I would like to be able to click on one of the selected images and have that trigger an ajax request.

i want to use the selected option immediately in my javascript and tried to listen for a change event with jquery, but it image-picker doesn't throw one :(

i added this at line 185 and it works fine (perhaps it should be also added to line 183):

picker.select.change();

Hi there, I'll start to use your amazing library on a project I'm working on but need some help with this: http://stackoverflow.com/questions/21009287/allow-only-to-pick-some-images, can you take a look please and tell me if this is possible?

If two option are same values,
for example:

<option value="1">a</option>
<option value="1">aa</option>
<option value="2">b</option>

Select the first item or second item, the other same value item will also be selected.

Also, could you add a feature that allows this plugin to show text or html content inside the options? Like this.
http://store.apple.com/us/buy-iphone/iphone5s

Because some time the option is no image, only the text or html.

Can you please give an example of using Masonry with Image-picker ?
I tried putting the select in <div id="container"> but it doesn't seem to work.
original question: http://stackoverflow.com/questions/22338582/use-fixed-image-size-in-jquery-image-picker-tool?noredirect=1#comment33990988_22338582

Hi,
Im sure its possible but I cant find it. How can I select en Item with js?
And btw how can i add an item?

Thanks a lot!!
Felix

$("#spaceToolsSelect").imagepicker({
hide_select: true,
show_label: true,
initialized:function(){

                var selectToolType = $("#selectToolType option:selected").val();
                $.getJSON(basePath+'/tool/getToolsByType.action?selectToolType='+selectToolType,function(jsonData){
                       $.each(jsonData, function (i, tool) {
                            // alert(tool.filePath);
                            //<option data-img-label="Awww" data-img-src="http://placekitten.com/220/200" value="1">Cute Kitten 1</option>
                            var toolName = tool.name;
                            var toolId = tool.id;
                            var toolPath = basePath+"/media/" + tool.filePath;
                            $("#spaceToolsSelect").append('<option data-img-label="'+toolName+'" data-img-src="'+toolPath+'" value="'+toolId+'">'+toolName+"</option>");
                             $(".controls thumbnails image_picker_selector").append('<li><div class="thumbnail"><img class="image_picker_image" src="'+toolPath+'"><p>"'+toolName+'"</p></div></li>');

                            });
                });

          }
    });

Hi !

First of all great plugin.

How can i show the pics when i'm using the plugin? Like the demo.

Thanks

Hello,

For starters, great plugin.
I have a situation where I'm using bootstrap and your plugin to show a bunch of photos. I have the ability to upload a new photo to that album that is refreshed via ajax.

The problem I have is intermittent (doesn't always happen), but sometimes the pictures are misplaced in the grid (i have a 4xN grid of photos) meaning sometimes a new row will add the first picture in slot no. 2.

As you can see in the image, the second row starts off by 1 picture. Row 3 is ok as well.
I've checked my css classes and nothing unusual is there. The list is

I've set a selected option
option value="xpto" selected
on the original html select element.

But the generated div with the images ignores that selection.

Am I doing something wrong? or this plugin doesn't do this?

Thanks

How can I get the selected image?

Hi
if i Initialize image-picker by calling $("select").imagepicker() the first image is always selected.

It would be very cool, if image-picker could keep the selection (third image in this example):

<select class="image-picker show-html">
  <option data-img-src="img/01.png" value="1">  Page 1  </option>
  <option data-img-src="img/02.png" value="2">  Page 2  </option>
  <option data-img-src="img/03.png" value="3" selected>  Page 3  </option>
</select>

How can I achieve this?

In your image-picker.js file, this line here:

this.picker = $("<ul class='thumbnails image_picker_selector'></div>");

seems to break IE7 and IE8.

Changed to:

this.picker = $("<ul class='thumbnails image_picker_selector'></ul>");

and seems to fix the issue.

When I try to use the plugin to create an image picker while jQuery is in noConflict mode so it can play nice with other frameworks, the plugin dies with an "TypeError: $ is not a function" error. When noConflict mode is not turned on (allowing jQuery can take over the "$" namespace), the plugin works fine.

I cannot get this to work but I am missing show-html.js - where can I get this ? Is this likely to be the problem ? - the images will not display

Hi,
what would be the easiest way to use font-awesome icons instead of real images? Is it possible with the current state of the plugin?

I want to give links to images in image picker (). I want to show fullsize versions of images when user click on thumbnails. How can I do this ?

In Google, Firefox, Opera, all is working fine.
In Explorer after i select an image, is not possible to deselect it.
You can see it, opening this page on Explorer:
http://rvera.github.io/image-picker/
It is possible to deselect only the first group, with the title INCLUDE BLANKS,
all the other groups is not possible to deselect.
Can you tell me please why in the first group the deselect is working?
There should be some code there that enable deselect in Explorer.
(i thought was enough to add a blank field but still is not working)
Thanks!

rails-assets for example need a version specified (and/or tag) in order to build bower components.

I am using image-picker to display a grid of images. I would also like to allow the user to re-order the images by dragging and dropping them to swap image position. Has anyone attempted to do this with image-picker? If so, what is the best approach? Not sure if I should re-order the select options or the images and then re-sync with select? Thanks!

Hi there,

Great plugin. However, I have two tags on my page and I'm trying to use sync_picker_with_select() to update the plugin when the selected option of the 2nd select box is changed by something else on the page. Unfortunately it does not seem to work when I use the following as per the documentation:

$("#selectbox2").data('picker').sync_picker_with_select();

If I delete the other select box from the page ("#selectbox1") then it works as expected.

Any ideas ?

Thanks
Tim

how can i changed options

http://stackoverflow.com/questions/17164627/imagepicker-jquery-callback-clicked

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.

(tl;dr) My js is weak... How should I trigger image-picker to update the selected value from external js?

I have a form which is populated with values from an existing model. If the user feels they have screwed up the form, a button allows them to reset original model values. The image picker js is not triggered, so even though the form value for a select is reset, image-picker is not aware of the select value update, and the form select presentation is incorrect. TIA

Hi Rodrigo,

first of all many thanks for the great plugin.
I have some doubt. I understood the documentation in the way that setting hide_select to true must hide only the original select control, leaving the picker visible. When I try to set hide_select to true (or just omit it in the imagepicker call, because it is by default set to true), actually both disappear: the select control and the picker. I assume it is not by design, or?
I tested with jquery 1.11 and Chrome.

It would be great if you could add this project to cdnjs so it could be loaded from a CDN without having to include the source in my project.