1
onex
This is a multiple-input fields generator that can generate or add or create multiple input fields dynamically at a time.
Slick marquee slider - manage HTML marquee with slick javascript library.
Tesseract js demo scan text over the image by just doing small amounts of code.
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>
