I am working on a task where I want few images and I want to display image in bootstrap modal.
I have done below code to to display image on modal on click of link, where link has below images. Each image have link.
Modal is opening with all the images, but issue is I don't want to create modal for each image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Image Demo</title>
<link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<?php
$images = ['image_1.png', 'image_2.png', 'image_3.png', 'image_4.png', 'image_5.png'];
for ($cnt = 0; $cnt < count($images); $cnt++) {
?>
<a href="#imagemodal_<?= $cnt ?>" data-toggle="modal" data-target="#imagemodal_<?= $cnt ?>">
<img src="images/<?php echo $images[$cnt] ?>" width="100px" height="100px"/>
</a>
<div class="modal fade " id="imagemodal_<?= $cnt ?>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<img src="images/<?php echo $images[$cnt] ?>" width="100px" height="100px"/>
</div>
</div>
</div>
<?php
}
?>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://getbootstrap.com/docs/3.3/dist/js/bootstrap.min.js"></script>
</body>
</html>
How can I achieve this ?
