for(var i=0;i<$('.adp-thumb').length;i++){
$('.adp-thumb').eq(i).attr('rank',i+1);
}
$('.adp-thumb').click(function(e){
e.preventDefault();
$('#adpModal').modal('show');
var img = $(this).parent().attr('href');
if($(this).parent().attr('data-type') == 'video'){
$('.modal-body').html('<video id="video" width="100%" controls><source src="" id="adp-preview" data-type="video/mp4" ></video>');
$('#adp-preview').attr('src',img);
video.play();
}else{
$('.modal-body').html('<img id="adp-preview" src="">');
$('#adp-preview').attr('src',img);
}
// var thumb = $('.adp-thumb');
// var len = thumb.length;
// var ind = $(this).attr('rank');
// var name = $(this).attr('alt');
// $('#rank').html(ind+'/'+len);
// $('#name').html('').append(name);
});
<section>
<div class="container">
<div class="row">
<h1 class="adp-heading">Simple Bootstrap Gallery</h1>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="adp-box">
<a href="https://ak6.picdn.net/shutterstock/videos/1023226366/preview/stock-footage-aerial-view-of-the-east-river-and-roosevelt-island-new-york-city-dark-sunset-lighting-with.webm" data-type="video">
<img src="https://images4.alphacoders.com/378/37864.jpg" class="adp-thumb">
</a>
<div class="adp-titile">
<h4>Js Gallery</h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="adp-box">
<a href="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSIekuJOwtOWtZl9QX3t46Yz_7RCZ4Kpebnugsst2OFfNl-SGjf">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSIekuJOwtOWtZl9QX3t46Yz_7RCZ4Kpebnugsst2OFfNl-SGjf" class="adp-thumb">
</a>
<div class="adp-titile">
<h4>Js Gallery</h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="adp-box">
<a href="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Shaqi_jrvej.jpg/1200px-Shaqi_jrvej.jpg">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Shaqi_jrvej.jpg/1200px-Shaqi_jrvej.jpg" class="adp-thumb" alt="Adminspress Production">
</a>
<div class="adp-titile">
<h4>Js Gallery</h4>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="adp-box">
<a href="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTND5d4jdsypZBKxhDqVBGrywJJ6aHQ_asy5PjUntoh7FTjzbyj">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTND5d4jdsypZBKxhDqVBGrywJJ6aHQ_asy5PjUntoh7FTjzbyj" class="adp-thumb">
</a>
<div class="adp-titile">
<h4>Js Gallery</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Modal-->
<div class="modal fade" id="adpModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Preview</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<div class="justify-left text-left">
<span id="rank" class="badge badge-primary"></span>
<span id="name" class="badge"></span>
</div>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>