[JQuery] Image checkbox limit range Turn Back
2019-10-08 16:04:08
Example for Video spliting function by interval (time range)
Looping to images (.jpg) in folder ex
<ul style="list-style: none" id="thumb-list"><?php foreach(glob('ex/'.$h.'*.jpg') as $dph){ ?><li class="nopad text-center"><label class="image-checkbox"><img class="img-responsive" src="<?=$dph?>" /><input type="checkbox" name="image[]" value="<?=toMin($dph,$h)?>" class="double-box"><i class="fa fa-check hidden"></i></label></li><? }?></ul>
Show the time range to input value after thumbnail checked.
<input type="text" name="start"> to <input type="text" name="end"><button type="button" onclick="clrBox()">Clear</button>
Style sheet (CSS)
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"><style type="text/css">#thumb-list {width: 800px; padding: 10px; overflow-x: auto}#thumb-list li {display: table-cell; position: relative;}.nopad {padding-left: 0 !important;padding-right: 0 !important;}/*image gallery*/.image-checkbox {cursor: pointer;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border: 4px solid transparent;margin-bottom: 0;outline: 0;}.image-checkbox input[type="checkbox"] {display: none;}.image-checkbox-checked {border-color: #F44336;}.image-checkbox-checked img {opacity: 0.2}.image-checkbox .fa {position: absolute;color: #4A79A3;background-color: #fff;padding: 10px;top: 0;right: 0;}.image-checkbox-checked .fa {display: block !important;}label {display: inline-block;max-width: 100%;margin-bottom: 5px;font-weight: 700;}:after, :before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}.hidden {display: none!important;}</style>
Javascript
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript">var limit = 2;$(".image-checkbox").each(function () {if ($(this).find('input[type="checkbox"]').first().attr("checked")) {$(this).addClass('image-checkbox-checked');}else {$(this).removeClass('image-checkbox-checked');}});$(".image-checkbox").on("click", function (e) {var $checkbox = $(this).find('input[type="checkbox"]');if( $('input[name="image[]"]:checked').length >= limit && !$checkbox.prop("checked")) {alert('Limited to 2 clips');$(this).find('input').prop('checked', false);}else{$(this).toggleClass('image-checkbox-checked');$checkbox.prop("checked",!$checkbox.prop("checked"));fillTime();}e.preventDefault();});function fillTime(){var val = [];$('#thumb-list .double-box:checked').each(function(i){val[i] = $(this).val();});$('input[name=start]').val(val[0]);$('input[name=end]').val(val[1]);}function clrBox(){$('#thumb-list .double-box:checked').each(function(){$(this).prop('checked', false);$(this).parent().toggleClass('image-checkbox-checked');});$('input[name=start],input[name=end]').val('');}</script>