Menu
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 ?
823
What you have to do is generating you image thumbs using php , and create your modal which has an empty image tag (add custom class to access it with jquery ) outside the loop then using jquery
just create script which get the link from clicked image and set the src of the image tag inisde the modal ,
your php code should look like :
<?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" data-toggle="modal" data-target="#imagemodal">
<img src="images/<?php echo $images[$cnt] ?>" width="100px" height="100px"/>
</a>
<?php
}
?>
<div class="modal fade " id="imagemodal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<img class="modal-content" src="" width="100px" height="100px"/>
</div>
</div>
</div>
see below working snippet :
$(function(){
$("#image img").on("click",function(){
var src = $(this).attr("src");
$(".modal-img").prop("src",src);
})
}).modal-img {
width:100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="image">
<a href="#imagemodal" data-toggle="modal" data-target="#imagemodal">
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" width="100px" height="100px"/>
</a>
<a href="#imagemodal" data-toggle="modal" data-target="#imagemodal">
<img src="http://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg" width="100px" height="100px"/>
</a>
<a href="#imagemodal" data-toggle="modal" data-target="#imagemodal">
<img src="https://i2.wp.com/thenewcamera.com/wp-content/uploads/2015/08/Nikon-200-500mm-sample-img4.jpg?resize=750%2C502" width="100px" height="100px"/>
</a>
<a href="#imagemodal" data-toggle="modal" data-target="#imagemodal">
<img src="https://i1.wp.com/thenewcamera.com/wp-content/uploads/2015/08/Nikon-200-500mm-sample-img2.jpg?resize=750%2C502" width="100px" height="100px"/>
</a>
<div>
<div class="modal fade " id="imagemodal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<img class="modal-img" />
</div>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
