phranx

phranx supports this item

Supported

20 comments found.

nevermind. It does have a non-javascript fallback. CodeCanyons iframe craps out without javascript. ha

Thank you! I try to do my best :)

Will this work on the Ipad ?

well, I don’t have an ipad but, I tested it on both an iphone and android and it works as expected, so I guess it will work on the ipad as well.

Nice concept, but doesn’t work.

Can you be more specific? What kind of issues did you experience?

As you didn’t reply to my request I suppose you solved the problems by yourself. But if it’s not the case, please tell me what’s wrong. Saying just “doesn’t woks” doesn’t help me to support you

Added the code within the div as the documentation said, added the script both to the page and then to a separate file as .js afterwards, and the logos within both an images folder and local, and nothing seemed to work?

Didn’t replace the images as was testing with the images provided for the selection suffix method.

If you wrote the code in the right way and it worked before replacing the documentation images with yours, then something you must pay attention is the images_extension parameter which is, by default .png. You should change it if you’re using another image format and ALL the images must have the same format.

Have a look at this fiddle http://jsfiddle.net/phranx/yS7b2/

If it still doesn’t work, then you should provide me some additional informations or (better) the code you wrote.

Got this up and working in minutes without any problems. Does exactly what I need and have added to fav script list ;) Nice work dude.

Thank you Ade!

Nice, but is it possible select max choice?

I’m not sure I understood your request. Do you mean limiting the number of checkboxes that can be checked at the same time?

JIC can’t do this natively, but you can handle get the same behaviour, by handling the click event on the labels… the code is not heavily tested nor optimized, but can it give you an idea ;)

//we lauch jic
$("#myID").jic({jicOptions})
//and we play with the click event on the label
.find("label").click(function(e){
        //max allowed size
        var max_len = 2,
        //once the checkbox is checked, we count how many of them are in the same state
        len = $(this).parents('#myID').find(':checked').length;
        //and if they are more than the size we like, we go back and uncheck the current one
        if(len > max_len){
            //unchecking the current checkbox and triggering che change event so jic can handle the state
            $(this).children(':checkbox').prop('checked',false).trigger('change');
        }

    });

Right. I have 5 items and I must choose only two. Your suggestion is great, thanks. Now it has no effect but I will do some tests. Thank you. Marco

Is there a way to select both suffix and overlay modes at the same time?

No, you must choose between them.

ich habe ein Problem….wenn ich 6 Bilder in 2 Reihen habe und unten ein Bild auswähle, wird das Bild oben markiert? :( Why?

Please write english

I have a post with images on it in WP. I have a client who can log into this page. I want the ability to add a checkbox to the images so the client can choose certain images. Can I …and how would I do it with this plugin? tnx

You have to change the template…

JIC looks for checkboxes and then, for each checkbox it uses the image(s). So if you have something like a gallery, such as div>img1,img2… JIC wouldn’t work.

But, if you modify the way you make the template, then JIC will work like a charm.
<!-- Here just form logic, no images... -->
<div id="myCheckboxes">
    <label for="myCheck01">
        <input id="myCheck01" type="checkbox" />
    </label>
    <label for="myCheck02">
        <input id="myCheck02" type="checkbox" />
    </label>
    <label for="myCheck03">
        <input id="myCheck03" type="checkbox" />
    </label>
</div>

<script type="text/javascript">
    $(function(){

        //setting some options
        var jicOpts = {
            //other options ...

            //here we state what are the images we must use
            images: [myImage_1,myImage_2,myImage_3]
        };

        $("#myCheckboxes").jic(jicOpts);
    });
</script>

Well, it’s just pseudo code, but it gives and idea…

Hi, I don’t get it. I join the JS files as follow:

<script src=”js/jquery.jic.js” type=”text/javascript”></script> <script src=”js/jquery.jic.min.js” type=”text/javascript”></script>

+ the CSS :

<link rel=”stylesheet” type=”text/css” href=”styles/style.css” /> <link rel=”stylesheet” type=”text/css” href=”styles/checkbox.css” /> <link rel=”stylesheet” type=”text/css” href=”styles/reset.css” />

and there is the body :

<label class=’label_jic’ for=’radio-overlay-1’> <input type=”radio” name=”radio-overlay” value=”1” id=”radio-overlay-1” /> </label> <label class=’label_jic’ for=’radio-overlay-2’> <input type=”radio” name=”radio-overlay” value=”2” checked=”checked” id=”radio-overlay-2” /> </label> <label class=’label_jic’ for=’radio-overlay-3’> <input type=”radio” name=”radio-overlay” value=”3” id=”radio-overlay-3” /> </label>

<script language=”JavaScript”> //radio overlay $(”#radio-overlay”).jic({ selection_mode:’overlay’, images_path: ‘images/people/’, images:[‘person1’,’person2’,’person3’] }); </script>

For some reason it doesn’t work. Any clue? Thanks!

I can see 2 issues in the code you posted.

1. There are no tags with id=”radio-overlay”. You should wrap your checkbox inside a div and use that id as selector for JIC.

2. The second problem is that you don’t call JIC after the page is loaded. Call JIC like this
$(function(){ //call JIC here})

Use the code provided with the documentation as starting point and read it. You shouldn’t have any problem ;)

Just bought it, but not sure how to get it to work.

Can you please post a sample html/php page that renders the sample images?

Thanks…

Seriously? I downloaded free solutions to this that actually have full example code. I read the documentation and there’s nothing in here like this: <head><script></script</head>.

You only say “Here’s the javascript” and “Here’s the markup”.

So here’s my code that’s based entirely on your single page documentation file:

<head> <script type=”text/javascript”> //radio overlay $(”#radio-overlay”).jic({ selection_mode:’overlay’, images_path: ‘images/people/’, images:[‘person1’,’person2’,’person3’] }); </script> </head>

<label class=’label_jic’ > <input type=”radio” name=”radio-overlay” value=”1” /> </label> <label class=’label_jic’ > <input type=”radio” name=”radio-overlay” value=”2” checked=”checked” /> </label> <label class=’label_jic’ > <input type=”radio” name=”radio-overlay” value=”3” /> </label>

Forgot the code tags so it left out html and body tags

Probably you forgot to call the plugin in the jquery documentReady callback. The documentation file contains 4 working examples, so if you open it within a text editor you can grab the code and make it work in your project.

Let’s do it step by step ok?

1. The markup. Put this in your html body tag

<!-- other content ...->

<div id="radio-overlay">
    <label class='label_jic' for='radio-overlay-1'>
        <input type="radio" name="radio-overlay" value="1" id="radio-overlay-1"  />
    </label>

    <label class='label_jic' for='radio-overlay-2'>
        <input type="radio" name="radio-overlay" value="2" checked="checked" id="radio-overlay-2"  />
    </label>

    <label class='label_jic' for='radio-overlay-3'>
        <input type="radio" name="radio-overlay" value="3" id="radio-overlay-3"  />
    </label>
</div>

<!-- another content ... ->

2. The javascript part.
<head>
<!-- other content -->

<!-- Here you include jQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<!-- Here you include jic -->
<script type="text/javascript" src="js/jquery.jic.min.js"></script>

<script type="text/javascript">
    $(function(){ //jic, as most jQuery plugins, should be called in the document.ready callback

        //jic in radio overlay mode
        $("#radio-overlay").jic({
            selection_mode:'overlay'
            images_path: 'images/people/', 
            images:['person1','person2','person3']
         });
    });
</script>

<!-- another content -->
</head>

Your example above does NOT work and I spent another hour trying to get something that works.

For anyone else who’s tried to make sense of the horrible documentation here’s code that actually works.

I feel like charging for posting this…..

To the author – what I posted below is the example code that should’ve been in the documentation to start with.


<head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.jic-1.0.1.min.js"></script>
        <link rel="stylesheet" href="styles/checkbox.css" /> 

        <script type="text/javascript">
            $(function(){
                //checkbox suffix
                $("#checkbox-suffix").jic({
                    input_type:'checkbox',
                    images_path: 'images/nums/', 
                    images:['one','two','three','four']
                });

                //radio suffix
                $("#radio-suffix").jic({
                    images_path: 'images/nums/', 
                    images:['one','two','three','four']
                });

                //checkbox-overlay
                $("#checkbox-overlay").jic({
                    input_type:'checkbox',
                    selection_mode:'overlay',
                    images_path: 'images/people/', 
                    images:['person1','person2','person3']
                });

                //radio overlay
                $("#radio-overlay").jic({
                    selection_mode:'overlay',
                    images_path: 'images/people/', 
                    images:['person1','person2','person3']
                });

                //just playing with select all
                $('input.selall_suffix').click(function(){
                    var jset = $("input:checkbox[name=checkbox-suffix]");
                    jset.prop('checked',this.checked).trigger('change');
                });

                $('input.selall_overlay').click(function(){
                    var jset = $("input:checkbox[name=checkbox-overlay]");
                    jset.prop('checked',this.checked).trigger('change');

                });

            });
            </script>

</head>

<div id="radio-overlay">
    <label class='label_jic' for='radio-overlay-1'>
        <input type="radio" name="radio-overlay" value="1" id="radio-overlay-1"  />
    </label>

    <label class='label_jic' for='radio-overlay-2'>
        <input type="radio" name="radio-overlay" value="2" checked="checked" id="radio-overlay-2"  />
    </label>

    <label class='label_jic' for='radio-overlay-3'>
        <input type="radio" name="radio-overlay" value="3" id="radio-overlay-3"  />
    </label>
</div>

See above

I checked the code i wrote and yes, You are right. I didn’t put the comma here //jic in radio overlay mode $("#radio-overlay").jic({ selection_mode:'overlay', //I forgot the comma here images_path: 'images/people/', images:['person1','person2','person3'] });

I’m thinking about a new release, which will make JIC more flexible and easier to use. I’ll bring in account your advices about the documentation. It’ll be more complete and easier to read even for people with no javascript background. Thank you

just formatting the code…
//jic in radio overlay mode 
$("#radio-overlay").jic({ 
selection_mode:'overlay', //I forgot the comma
images_path: 'images/people/', 
images:['person1','person2','person3']
 });

Nice script. Though it’s not all good in IE10. I got radio button images switching nicely in Chrome and Firefox but IE wouldn’t display the selected state.

Don’t worry. Quirks mode and UX-A meta tags appear to have fixed it. Damned dirty browser!

Hi, can this work in vertical mode as well as horizontal?

I am answering here even though we talked via email with stever. It’s possible to format the checkboxes in a vertical manner by adding the rule to the css. label.label_jic { display: block !important; }

Hello phranx this is really amzing work done by you I am just about to purchase it plz tell me how to use it with php mysql where i wanted to change the status of transaction by slecting all,or selecting some of them plz guide me

JIC is a jquery plugin that makes your checkboxes look as image. Stop. So once you generate, via php, the right markup and call JIC, the checkboxes will be replaced by the images you chose. JIC is not difficult to use. Once you get it, explore the source of the documentation and use it as an example.

plz tell me how to use it with php mysql where i wanted to change the status of transaction by slecting all,or selecting some

This request is about your application logic. I can’t help you. If you are able to change the status of your transactions with normal checkboxes, then you’ll be able to do the same thing with JIC. It’ll be completely transparent.

I need limited chose. Please let me know how can I made the code

Why not working on IE11?

I made some tests with IE11 on windows 7 and the demo works perfectly. So I think it’s the code you wrote that isn’t working. Please let me know if you fixed it by yourself

When I wrap the radio overlay in a simple form tag it stops working. If I can’t put these image checkboxes in forms then this is completely useless.

Any clues why this doesn’t work?

I can’t help you without reading what you’ve done wrong. Paste here the code and I’ll have a look.

The IE11 events fix above seems to fix the issue. It works fine when the documentation code is not wrapped up in a form but the fix is needed if it is placed in a form.

by
by
by
by
by
by