jquery - change product image when select color option -
have 2 product image, 1 on left side , 1 on right side. when color choosed, 'tick' icon appear on top of selection. issue is, 'tick' icon won't stick active checkbox when it's been selected. 'tick' icon somehow can stick 1 selector only. intention have 'tick' icon active selection. please advise on matter.
<style> .product-img { width: 50%; display: block; position: relative; height:250px; } .product-img img { width: auto; height: 100%; position: absolute; opacity: 0; transition: 0.3s ease; } .product-img img.active { opacity: 1; } /* product configuration */ .product-color span { font-size: 14px; font-weight: 400; color: #86939e; } /* product color */ .color-choose div { display: inline-block; } .color-choose input[type="radio"] { display: none; } .color-choose input[type="radio"] + label span { display: inline-block; width: 25px; height: 25px; margin: -1px 2px 0 0; vertical-align: middle; cursor: pointer; /* border-radius: 50%; */ border: 2px solid #ffffff; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33); } .color-choose input[type="radio"]#red + label span { background-color: #c91524; } .color-choose input[type="radio"]#blue + label span { background-color: #314780; z-index: 10; } .color-choose input[type="radio"]#black + label span { background-color: #323232; } .color-choose input[type="radio"]:checked + label span { background-image: url(http://lisenme.com/demo/color_change/images/check-icn.svg); background-repeat: no-repeat; background-position: center; } </style> <style> .product-img-a { width: 50%; display: block; position: relative; height:250px; } .product-img-a img { width: auto; height: 100%; position: absolute; opacity: 0; transition: 0.3s ease; } .product-img-a img.active-a { opacity: 1; } /* product configuration */ .product-color-a span { font-size: 14px; font-weight: 400; color: #86939e; } /* product color */ .color-choose-a div { display: inline-block; } .color-choose-a input[type="radio"] { display: none; } .color-choose-a input[type="radio"] + label span { display: inline-block; width: 25px; height: 25px; margin: -1px 2px 0 0; vertical-align: middle; cursor: pointer; /* border-radius: 50%; */ border: 2px solid #ffffff; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33); } .color-choose-a input[type="radio"]#reda + label span { background-color: #c91524; } .color-choose-a input[type="radio"]#bluea + label span { background-color: #314780; z-index: 10; } .color-choose-a input[type="radio"]#blacka + label span { background-color: #323232; } .color-choose-a input[type="radio"]:checked + label span { background-image: url(check-icn-a.svg); background-repeat: no-repeat; background-position: center; } </style> <div style="display: inline-block"> <div class="product-img"> <img data-image="black" src="http://lisenme.com/demo/color_change/images/black.png" alt=""> <img data-image="blue" src="http://lisenme.com/demo/color_change/images/blue.png" alt=""> <img data-image="red" class="active" src="http://lisenme.com/demo/color_change/images/red.png" alt=""> </div> <!-- product color --> <div class="product-color"> <span>select color</span> <div class="color-choose"> <div> <input data-image="red" type="radio" id="red" name="color" value="red" checked> <label for="red"><span></span></label> </div> <div> <input data-image="blue" type="radio" id="blue" name="color" value="blue"> <label for="blue"><span></span></label> </div> <div> <input data-image="black" type="radio" id="black" name="color" value="black"> <label for="black"><span></span></label> </div> </div> </div> </div> <div style="display: inline-block; margin-left: 200px;"> <div class="product-img-a"> <img data-image="blacka" src="http://lisenme.com/demo/color_change/images/black.png" alt=""> <img data-image="bluea" src="http://lisenme.com/demo/color_change/images/blue.png" alt=""> <img data-image="reda" class="active-a" src="http://lisenme.com/demo/color_change/images/red.png" alt=""> </div> <!-- product color --> <div class="product-color-a"> <span>select color</span> <div class="color-choose-a"> <div> <input data-image="reda" type="radio" id="reda" name="color" value="reda" checked> <label for="reda"><span></span></label> </div> <div> <input data-image="bluea" type="radio" id="bluea" name="color" value="bluea"> <label for="bluea"><span></span></label> </div> <div> <input data-image="blacka" type="radio" id="blacka" name="color" value="blacka"> <label for="blacka"><span></span></label> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script> <script> $(document).ready(function() { $('.color-choose input').on('click', function() { var fridge = $(this).attr('data-image'); $('.active').removeclass('active'); $('.product-img img[data-image = ' + fridge + ']').addclass('active'); $(this).addclass('active'); $checkbox.prop('checked', true); }); }); </script> <script> $(document).ready(function() { $('.color-choose-a input').on('click', function() { var fridgea = $(this).attr('data-image'); $('.active-a').removeclass('active-a'); $('.product-img-a img[data-image = ' + fridgea + ']').addclass('active-a'); $(this).addclass('active-a'); $checkbox.prop('checked', true); }); }); </script>
jquery:
$checkbox.prop('checked', true); vanilla javascript:
checkbox.checked = true;
Comments
Post a Comment