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 ?
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></div>
You could dynamically change the source of the image inside your modal depending on which anchor the user clicks, to do this simply add a class to each of your anchors and a Jquery function.
This would be your Php/Html code
<?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 class="AnchorClass" 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 src="" id="targetChange"/>
</div>
</div>
</div>
And then you'd need a jquery function to dynamically change the src of the tag inside your modal.
Something like this:
<Script>
$( document ).ready(function() {
$(".AnchorClass").click(function(){
//Assign the src with jquery attr()
});
});
</Script>
With your code you are generating bunch of html code. There's a simple way to decrease the code and implement. First you have to take modal code out of the for loop. Add a class in the link called 'openmodal' and add data-href="image-url" like below. so Class will be same for all the links. on click of this link we can open the modal.
<a href="javascript:;" data-href="images/<?php echo $images[$cnt] ?>" class="openmodal">
Here is your modal code
<div class="modal fade " id="imagemodal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<img src="images/no-image.png" width="100px" height="100px"/>
</div>
</div>
</div>
Use below script to open modal and view image in the modal.
<script>
$(".openmodal").click(function(){
var href = $(this).data("href");
$("#imagemodal img").attr("src",href );
$("#imagemodal").modal("show");
})
</script>