ARTICLES > Javascript

[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>
 
 
 

 

Turn Back