strangehouse

strangehouse supports this item

Supported

59 comments found.

I have another question, I am reading data from an array on page load, the data in the array correspond to the value in the multi select option. I read the data on page load. This works correctly except that the images / overlay does not reflect it as selected until I do a page refresh.

Is there a way to either load the page with the selected items or reinitialise the plugin so that it reflects what was already selected on page load?

This is needed as the array is built up of items in the users shopping cart and I need this to reflect on page load.

Here is an example : jQuery(window).load(function() { var values="180,181"; jQuery.each(values.split(","), function(i,e){ jQuery("#sh-colours-select [value='" + e + "']").prop("selected", true); });

If I disable your plugin then the multi select box that is rendered displays items as selected correctly.

If I call jQuery(“select”).shImageSelect(); on page load or document ready it creates a second instance and both display selected items.

Thanks for your help

thanks but that’s an authors only link so it does not display anything but an author registration page

There is no “reinit” method for now. You need to remove plugin elements from DOM. And than initialization. $(‘select’).data(‘sh-image-select’).wrapper.remove(); $(‘select’).shImageSelect();

thank you,

$(‘select’).data(‘sh-image-select’).wrapper.remove(); or $(‘select’).data(‘sh-colours-select’).wrapper.remove(); is not removing anything though visually.

$(‘select’).shImageSelect(); – creates a second instance of all the select options on the page

Still have some problems,

I build the page and dynamically select the multi select options:

an Ajax call is made this takes around 3 to 5 seconds for the ajax call and operations to complete, they are then parsed to a variable

*note: using static variable in example below – jQuery(document).ready(function() { var values="180,181"; jQuery.each(values.split(","), function(i,e){ jQuery("#sh-colours-select [value='" + e + "']").prop("selected", true); });

This works fine but does not show as selected when the plugin is initialised, if the plugin is not included the select options are all selected.

How do I get your plugin to show these as selected?

Thank you

Please assist, this is urgent problem. thank you

Sorry this link still does nothing

You need reinit plugin after made changes to DOM.
There is no “reinit” method for now. You need to remove plugin elements from DOM. And than initialization. $(‘select’).data(‘sh-image-select’).wrapper.remove(); $(‘select’).shImageSelect();
http://jsfiddle.net/smart1k/cu9ujdsg/

thanks that makes sense :) – I have got this inside a Joomla 3 element, which is why it was not being removed :)

The reinit method you give does not seem to work for the drop down version. I tried: $(’#’ + scope.selectInfo.imageSelectorId).data(‘sh-image-select-dropdown’).container.remove(); instead of wrapper.remove() but nothing seems to happen. Is there a way to dynamically add or remove images with shImageSelectDropdown()?

I see your previous post about this now. I did try .container.remove() but it does not seem to work quite right.

I am trying to get type radio to work. I use type: ‘radio’ option but the select is still injecting the multiple attribute.

$('#' + scope.selectInfo.imageSelectorId).shImageSelect({ type: 'radio', axis: 'x', imageLimit: { y: 1 }, showText: false });

I am able to use maxSelected:1. However, that requires I unclick the previously checked image. It would be better if I could just click a new image and the old image would become unchecked.

I am trying to get type radio to work. I use type: ‘radio’ option but the select is still injecting the multiple attribute.
Try $(’’).shImageSelect().removeAttr(‘multiple’)
It would be better if I could just click a new image and the old image would become unchecked.
Radio mode is used for such cases.
I am facing one more problem. Below is my Code is working fine. $('#selectImage').shImageSelect({ mode: 'radio', axis: 'x', additionalClass: 'green-select', imageLimit: { y: 1, x: 4 } });

But i have more than 20 images and displaying only 4 in x. So it’s become scroll. When first time control load, i select last index and save. It’s work perfect but when i open same page in edit and last index (image) become selected too. but your plugin display image from 1st index only.

How can i visible selected index part, which is pre-selected?

Hello. Please show me a live example (e.g. http://jsfiddle.net/) what you are trying to do.

Hi, I have bought your plugin jQuery Image Select. With imageLimit options I can set the maximum number of visible images for rows and columns. How can I do to set imageLimit options for row and not globally for all row, so for example I need to set : in first row show 2 images in second row show 3 images in third row show 1 images …. Thanks in advance Max

Hi, I have bought your plugin jQuery Image Select. With imageLimit options I can set the maximum number of visible images for rows and columns. How can I do to set imageLimit options for row and not globally for all row, so for example I need to set : in first row show 2 images in second row show 3 images in third row show 1 images …. Thanks in advance Max

Well, it works!! Quick question, how can I do so that when page load, no image is checked (now first image are always flagged)

Try to add multiple=”multiple” attrubute to select element <select multiple=”multiple”>.

Thank you :-)

Hi, is there a way to have the dropdown automatically scroll down to the initially selected image? To the top or the middle of the dropdown? Thanks.

Hi. Try this implementation.

Thanks for the help but this isn’t quite what I was after. I’ve edited your example a bit to give a better idea of what I’m trying to achieve. http://jsfiddle.net/hvkhna9t/6/ When you open the dropdown the currently selected item is scrolled to. The problem with what I have so far is that I’m moving everything rather than manipulating the scrollbar in the dropdown.

Hi, thanks for this script. I would link to know how to reveal different forms when radio is checked. I have 2 images as radio button and i would like to open two different forms. If i select image 1 form number 1 is loaded If i select image 2 form number 2 is loaded

many thanks

solved, thanks. It was easy.

Hello! I’m buy you plugin, it is great. Now I need to unselect all selected items when I press option with value=1 . That I do with this code var pluginObject = $(’#advCategoryID’).data(‘sh-image-select’); $(’#advCategoryID option’).each(function (){ var selectedImageClassName = $(this).attr(‘class’); selectedImagesObject = pluginObject.container.find(’.’ + selectedImageClassName); pluginObject.unselect(selectedImagesObject); }) Then on chrome and safari I can select items and unselect it all.

But on IE11 and FireFox after I unselect all values and than select one of it I have value null. Maybe somebody can help me with this issue ? I’s very important for me.

Hello. Please provide fiddle. Your code is based on this code?

Hello! There I try to put code like a have on my site and it works on all browsers http://jsfiddle.net/gezYb/12/ :( Maybe I can send you access to site private and you look at this issue, becose I don’t understand what to do, but I need to finish project.

I fix problem. The problem was in file jquery.sh-image-select.all.js, line 253 element.children(’.’ + image.attr(‘class’)).attr(‘selected’, ‘selected’) should be element.children(’.’ + image.attr(‘class’)).prop(‘selected’, true)

Anyway thanks for you response.

Hi. Thanks for this great Script.

I use radio mode with 1 image per row, how can i make this more responsive? I want to use your script in a responsive template, but i can’t get it complete responsive. It would be nice if you have some hints for me ;)

regards simon

Do you need to trigger some function after image has been selected? You can use callbacks or native “change” event.
Example 19: callbacks (from guides)
$('#myid').shImageSelectDropdown({
    callbacks: {
        onOpen: function (){
            alert('opened!');
        },
        onClose: function (){
            alert('Closed!');
        },
        onSelect: function (){
            alert('Selected!');
        }
    }
});
Example 16: Select element “onChange” event handling (from guides)
$('#myid').shImageSelectDropdown({
    callbacks: {
        onOpen: function (){
            alert('opened!');
        },
        onClose: function (){
            alert('Closed!');
        },
        onSelect: function (){
            alert('Selected!');
        }
    }
});

No.. I need it in the other way.. When another select input changed his value, the content of the image selector has to change to an other set of images.

But i read the other comments here later, that i have to remove the dom element and initialize this plugin new.

thanks for helping

regards simon

Yep.
$('#myselectid').bind('change', function (){
  $(this).data('sh-image-select-dropdown').container.remove(); // remove
  $(this).shImageSelectDropdown(); //reinit
})
.shImageSelectDropdown(); //init

There is a way to use this in contact form 7 wordpress?

Hello. Never tried to integrate it.
Compatibility required:
1) Wordpress plugin should support custom <select> elements.
2) You should have ability to enqueue imageSelect js and css.

Does the plugin support data uris?

Hello. Sorry for the delay. No it doesn’t.

Is there a public readme available? I want to know for sure if I will be able to integrate this in my project. I want to use it so a client can select one image of a dynamically growing list of thumbnails hosted on my server and on external servers and have the selected image uploaded to an anonymous imgur account with the imgur api.

So basically will I be able to execute a .js after someone picked an image?

Hello.
Suppose it can be done.
Please send your email to support@shthemes.com and i will send you full documentation.

arcron

arcron Purchased

Hello, is it possible to build an Autopopulate from a simple select via Ajax and Remote file ? Example json ?

arcron

arcron Purchased

yes but what is wrong with them ? i changed the code lines in the script and build a showPGF2 and ShowPGF3 wo fills out region2 and region3 … but it dosnt fill them :(

arcron

arcron Purchased

i found the issue, the script wasnt initialized at start so it comes up to problems.

Oh nice. Happy for you.

oker

oker Purchased

Hi !

i would like to know if it possible to change the way image is selected , when i click into a image , the image is selected and a green check icon appears over it , but if i want to change my selection i have to click over the selected image before select the the one . The fact that someone have to click over the image to deselect it is not confortable to me .

Can this selection mode changed ? Maybe with a little bit o css?

Regards

oker

oker Purchased

Hi! Please check your documentation , the example 11 is wrong

$(’#example11’).shImageSelect({ type: ‘radio’ });

where type is not correct , mode is the correct attribute to make it works

$(’#example11’).shImageSelect({ mode: ‘radio’ });

Regards.

oker

oker Purchased

With radio mode , it´s expected to work as your example , but for a unknown reason it don´t works, i have to click first of the default image to unselect it , and after that it works well , click and select , but first option needs to be clicked again to unselect it.

where can i send you a email to check it. i have a website running to check it out.

Please submit a new ticket and provide your url.

Hello,

I do not understand, when I click on the dropdown list, the result is tiny.

Looking at the generated CSS , I see

Do you have an idea ?

Thank you

Hello.
Please submit a new ticket and provide your url.

I already submitted a ticket, but figured I’d post here as well. I’ve followed the quickstart instructions to the letter, but can’t get the plugin to work. My HTML simply displays as a raw dropdown menu. Any help on this would be appreciated.

Hello. Please see ticket upldate.

Only tested with the basic drop down so far with 4 images from your zip file and noticed when it loads, all 4 images onload display simultaneously a second before the css hides the non-selected ones. What happens if I have 10 or 20 images as part of a select box? It seems quirky if that’s the case. Maybe I don’t have the right css loading. I’m using your quick-start guide.

More important, the plugin will not load in Chrome. Using version 55.0.2883.87 (64-bit). It does appear to work with FF and IE. Not tested it with Edge or Apple products yet. Not doing call backs or anything like that, just loading up the simple select drop down example. Is there something else I need to load other than the links provided in the quick-start example?

Thank you. One other question. Is there a guess to how many images a select can hold and still perform ok? 20? 50? Given the images have a small footprint.

I found out why Chrome is not working. This laptop has a touchscreen (which are becoming very popular). The script must sense that the laptop is actually a tablet so in Chrome (but not FF or IE which is odd), it disables the keyboard and mouse inputs. So you can not scroll or click on any of the images within the select tag.

But if you use the touch the screen, the script responds. I hope this is an easy fix?

FYI, the author was quick to respond and correct the Chrome/touchscreen issue above. Nice!

by
by
by
by
by
by