jquery - Flip Images on Radio Button Change -
i have radio list buttons have been replaced 2 image. when unchecked, imgfront visible, when checked, imgback visible. aim flip image using css transform reveal other imagine on check. how done?
html:
<div class="switch"> <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-yes-no" value="1" type="radio" name="category" /> <label id="label1" for="cmn-toggle-1"> <img id="imgfront1" src="~/content/img/categories/refuse.png" width="65" height="65"/> <img id="imgback1" src="~/content/img/categories/refuselabel.png" width="65" height="65" class="hidden"/> </label> </div> <div class="switch"> <input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-yes-no" value="2" type="radio" name="category" /> <label id="label2" for="cmn-toggle-2"> <img id="imgfront2" src="~/content/img/categories/water.png" width="65" height="65"/> <img id="imgback2" src="~/content/img/categories/waterlabel.png" width="65" height="65" class="hidden"/> </label> </div> <div class="switch"> <input id="cmn-toggle-3" class="cmn-toggle cmn-toggle-yes-no" value="3" type="radio" name="category" /> <label id="label3" for="cmn-toggle-3"> <img id="imgfront3" src="~/content/img/categories/building.png" width="65" height="65"/> <img id="imgback3" src="~/content/img/categories/buildinglabel.png" width="65" height="65" class="hidden"/> </label> </div> css:
/* ============================================================ common ============================================================ */ .cmn-toggle { position: absolute; margin-left: -9999px; visibility: hidden; } .cmn-toggle + label { display: block; position: relative; cursor: pointer; outline: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ============================================================ switch 3 - yes no ============================================================ */ input.cmn-toggle-yes-no + label { padding: 2px; width: 120px; height: 60px; } input.cmn-toggle-yes-no + label::before, input.cmn-toggle-yes-no + label::after { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; color: #fff; font-family: "roboto slab", serif; font-size: 20px; text-align: center; line-height: 60px; } input.cmn-toggle-yes-no + label::before { -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; -o-transition: -o-transform 0.5s; transition: transform 0.5s; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } input.cmn-toggle-yes-no + label::after { -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; -o-transition: -o-transform 0.5s; transition: transform 0.5s; -webkit-transform: rotatey(180deg); -moz-transform: rotatey(180deg); -ms-transform: rotatey(180deg); -o-transform: rotatey(180deg); transform: rotatey(180deg); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } input.cmn-toggle-yes-no:checked + label::before { -webkit-transform: rotatey(180deg); -moz-transform: rotatey(180deg); -ms-transform: rotatey(180deg); -o-transform: rotatey(180deg); transform: rotatey(180deg); } input.cmn-toggle-yes-no:checked + label::after { -webkit-transform: rotatey(0); -moz-transform: rotatey(0); -ms-transform: rotatey(0); -o-transform: rotatey(0); transform: rotatey(0); } js:
$(document).ready(function() { $('input[name=category]:radio').change(function() { if(this.checked==true){ //do } else{ //doo else } }); });
if want switch image on selected radio button can vastly simplify css.
in html, change id attributes on label > img tags class="imgfront" , class="imgback" so:
<div class="switch"> <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-yes-no" value="1" type="radio" name="category" /> <label id="label1" for="cmn-toggle-1"> <img class="imgfront" src="~/content/img/categories/refuse.png" width="65" height="65"/> <img class="imgback" src="~/content/img/categories/refuselabel.png" width="65" height="65"/> </label> </div> <div class="switch"> <input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-yes-no" value="2" type="radio" name="category" /> <label id="label2" for="cmn-toggle-2"> <img class="imgfront" src="~/content/img/categories/water.png" width="65" height="65"/> <img class="imgback" src="~/content/img/categories/waterlabel.png" width="65" height="65"/> </label> </div> <div class="switch"> <input id="cmn-toggle-3" class="cmn-toggle cmn-toggle-yes-no" value="3" type="radio" name="category" /> <label id="label3" for="cmn-toggle-3"> <img class="imgfront" src="~/content/img/categories/building.png" width="65" height="65"/> <img class="imgback" src="~/content/img/categories/buildinglabel.png" width="65" height="65"/> </label> </div> you can drop class="hidden" on "back" images. unless class defined , needed in different css, it's not being used here.
in css, leave common section , drop else. 3 simple css rules handle image flipping. css should like:
/* ============================================================ common ============================================================ */ .cmn-toggle { position: absolute; margin-left: -9999px; visibility: hidden; } .cmn-toggle + label { display: block; position: relative; cursor: pointer; outline: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ============================================================ radio button image flipping when selected ============================================================ */ .switch > label > .imgback { display: none; } .switch > input[type='radio']:checked + label > .imgfront { display: none; } .switch > input[type='radio']:checked + label > .imgback { display: block; } your javascript fine, although it's not necessary here image flipping. if need take care of other activities when 1 of radio buttons selected keep it, otherwise can rid of it.
that should it. if want add more fancy transitions css can that. solution perform image swap using purely css.
Comments
Post a Comment