This tutorial based on bootstrap grid gallery with modal.
Download the files from Github. Note that you will need to have jQuery and Bootstrap (CSS and JS) in your pages for the plugin to work effectively.
Here we create dynamic div using javascript and link with modal box. Every edit click you will get same image in the modal which was we achive using jquery.
Following basic explaination of codes.
Step 1. Include following css and js
IN HEADER
<link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-grid.min.css"> <link rel="stylesheet" href="css/bootstrap-reboot.min.css"> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
IN FOOTER
<script src="js/jquery/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script>
Step 2. Decide you thumb div
<div class="container"> <h1 class="my-4 text-center">Thumbnail Gallery</h1> <div class="row text-center gallery"> <!-- Append code here using javascript --> </div> </div> <!-- /.container -->
Step 3. Add you modal div
<!-- Modal --> <div class="modal fade" id="uploadImage" tabindex="-1" role="dialog" aria-labelledby="uploadImage" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Edit Image:</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="row"> <div class="col-lg-6 col-md-6 col-xs-6"> Original Image: <div class="Original_image"><img class="img-fluid img-thumbnail" src="img/1.jpg" alt=""></div> </div> <div class="col-lg-6 col-md-6 col-xs-6"> New Image: <img class="img-fluid img-thumbnail" src="img/dummy.png" alt=""> <input type="file" name="file" id="file" /> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
Step 4. Now add below script in footer. In below script we just create image array and using jquery each function we are creating dynamic thumbnail div.
<script type="text/javascript"> var img_array = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg', 'img/6.jpg', 'img/7.jpg', 'img/8.jpg']; jQuery.each( img_array, function( i, val ) { jQuery('.gallery').append('<div class="col-lg-3 col-md-4 col-xs-6"><div class="overlay"><a href="#" class="d-block"><img class="img-fluid img-thumbnail" src="'+val+'" alt=""></a><div class="mask"><a href="#" class="close-icon"><i class="fa fa-times" aria-hidden="true"></i></a><div class="flex-center"><a (0);" data-toggle="modal" data-target="#uploadImage" class="edit"><i class="fa fa-pencil" aria-hidden="true"></i></a></div></div></div></div>'); }); jQuery('.edit').click(function(){ var img_url = $(this).closest('.overlay').find('.img-thumbnail').attr('src'); $('.Original_image img').attr('src', img_url); }); jQuery('.close-icon').click(function(){ $(this).closest('.overlay').parent('div').remove(); }); </script>
If you have any issue feel free comment to me. I will try to explain you different way.
Introduction In the world of web development, selecting the correct framework is critical. Laravel and…
Introduction By enabling containerization, Docker has transformed the way software is built, deployed, and managed.…
Introduction Speed and efficiency are critical in the ever-changing world of web development. Effective caching…
Introduction Git, a popular version control system in software development, enables developers to track changes,…
Introduction Are you tired of grappling with tangled changes and unfinished work while using Git?…
Introduction Version control is essential in software development because it ensures that changes to a…