Img-checkbox example

https://github.com/gitrequests/img-checkbox

by xkritikx

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="body-wrapper">
    <div>
        <p class="header">
          Fontawesome caption:
        </p>
        <figure class="imgcheckbox">
            <div class="figure-content"><img src="holder.js/200x200"></div>
            <figcaption><i class="fa fa-check fa-5x"></i></figcaption>
            <label><input type="checkbox" name="name"> Label</label>
        </figure>
    </div>

    <div>
        <p class="header">
          Image caption:
        </p>
        <figure class="imgcheckbox">
            <div class="figure-content"><img src="holder.js/200x200"></div>
            <figcaption><img src="holder.js/50x50"></figcaption>
            <label><input type="checkbox" name="name"> Label</label>
        </figure>
    </div>
    
    <div>
        <p class="header">
          Text caption:
        </p>
        <figure class="imgcheckbox">
            <div class="figure-content"><img src="holder.js/200x200"></div>
            <figcaption><span class="header">Label</span></figcaption>
            <label><input type="checkbox" name="name"> Label</label>
        </figure>
    </div>
</div>

CSS

/* Demo styles */
#body-wrapper {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
.header {
  font-size: 1.5em;
  font-weight: 700;
}

/* animation.imgcheckbox.css */
.imgcheckbox-animate-scale{
	animation-name: imgcheckbox-scale;
}
@keyframes imgcheckbox-scale{
	50% {transform: scale(1.2);}
	100% {transform: scale(1);}
}

JavaScript

$(document).ready(function(){
	Holder.run()

	$('.imgcheckbox').imgCheckbox({
		round: true,
		animation: true,
	})
})

// jquery.imgcheckbox.min.js
!function(i){i.fn.imgCheckbox=function(a){var e=i.extend({width:"auto",height:"auto",textColor:"white",overlayBgColor:"black",overlayOpacity:"0.4",round:!1,animation:!1,animationDuration:300,animationArray:["scale"]},a),n={toggleCheckbox:function(){var a=i(this),n=i('input[type="checkbox"]',a),o=i(".checkbox-overlay",a),t=i("figcaption",a),s=!1;e.animation===!0?s=e.animationArray[0]:i.inArray(e.animation,e.animationArray)>-1&&(s=e.animation),s&&(a.css("animation-duration",e.animationDuration+"ms").addClass("imgcheckbox-animate-"+s),"none"!=a.css("animation-name")?a.one("animationend",function(){a.removeClass("imgcheckbox-animate-"+s)}):console.error('To use animations include the file "animation.imgcheckbox.min.css" in the head tag!')),n.prop("checked")?(n.prop("checked",!1),s?o.fadeOut(e.animationDuration):o.hide(),s?t.fadeOut(e.animationDuration):t.hide()):(n.prop("checked",!0),s?o.fadeIn(e.animationDuration):o.show(),s?t.fadeIn(e.animationDuration):t.show())}};return this.each(function(a,o){var t=i(o),s=i("div.figure-content",t),c=i("figcaption",t),r=i("label",t),h=i('input[type="checkbox"]',t),l=i('<div class="checkbox-overlay"></div>').appendTo(t);return...