Radioimg.js

Welcome to radioimg.js

This is one of the easiest way to create radio buttons using images.

Basic example without any data

 $('.test').radioimg();

To add some data

 $('.test').radioimg({
        data: [ 
          {data: "A5", img: "http://placehold.it/74x105/35d/fff&text=A5"},
          {data: "A4", img: "http://placehold.it/105x148/35d/fff&text=A4"},
          {data: "A3", img: "http://placehold.it/148x210/35d/fff&text=A3"}
        ]
});

Setup trigger event to detect changes

$('.test').on('change', function(event, val){
    console.log(val);
})

Other options available - defaults shown

{
    name: "radioimg",
    selectedClass: "radioimg-selected", // Important to setup styling
    class: "radioimg",
    debug: false, // Set to true to show radio buttons
    color: "black",
    initial: "not set", // Choose which data.data value should be selected on creation
    data: [{data: "1", img: ""}, {data: "2", img: ""}]
}

Sample styling

.radioimg {
    border: 3px solid transparent;
}

.radioimg-selected {
    border: 3px solid red;
}

.radioimg:hover {
    border: 3px dotted rgba(121,121,121, 0.5);
}