Need to load image as modal on click in bootstrap css
Try this
HTML
<!-- Image trigger modal -->
<img src="http://sheshtawy.files.wordpress.com/2010/05/extra-firefox.png" class="img-responsive img-thumbnail" style="min-height:300px;height:300px;" alt="Responsive image">
<img src="http://sheshtawy.files.wordpress.com/2013/03/cairo_pollution.jpg?w=250"/>
<img src="http://sheshtawy.files.wordpress.com/2012/12/img_4749.jpg?w=250"/>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<img id="mimg" src="">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Script
$(window).load(function(){
$('img').on('click',function()
{
var sr=$(this).attr('src');
$('#mimg').attr('src',sr);
$('#myModal').modal('show');
});
});
DEMO
In Bootstrap open Enlarge image in modal
You can try this code if you are using bootstrap 3:
HTML
<a href="#" id="pop">
<img id="imageresource" src="http://patyshibuya.com.br/wp-content/uploads/2014/04/04.jpg" style="width: 400px; height: 264px;">
Click to Enlarge
</a>
<!-- Creates the bootstrap modal where the image will appear -->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Image preview</h4>
</div>
<div class="modal-body">
<img src="" id="imagepreview" style="width: 400px; height: 264px;" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JavaScript:
$("#pop").on("click", function() {
$('#imagepreview').attr('src', $('#imageresource').attr('src')); // here asign the image to the modal when the user click the enlarge link
$('#imagemodal').modal('show'); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function
});
This is the working fiddle.
How to load image into bootstrap modal with javascript
By using jquery .click you can easily achieve this (with html5 data attribute too).
<ul>
<li><a href="#myModal" data-toggle="modal" data-img-url="http://placehold.it/200x200/dddddd/ffffff&text=Hey1">6 Teams</a>
</li>
<li><a href="#myModal" data-toggle="modal" data-img-url="http://placehold.it/200x200/dddddd/ffffff&text=Hey3">5 Teams</a>
</li>
<li><a href="#myModal" data-toggle="modal" data-img-url="http://placehold.it/200x200/dddddd/ffffff&text=Hey4">4 Teams</a>
</li>
<li><a href="#myModal" data-toggle="modal" data-img-url="http://placehold.it/200x200/dddddd/ffffff&text=Hey5">3 Teams</a>
</li>
</ul>
Script:
$('li a').click(function (e) {
$('#myModal img').attr('src', $(this).attr('data-img-url'));
});
Fiddle: http://jsfiddle.net/vLSWH/292/
Note: Though you did not specify using jQuery, twitter-bootstrap modal require you to use jQuery anyway, so might as well use it.
bootstrap modal on clicking a pic
Add data-toggle and data-target on the ul where write text
<ul data-toggle="modal" data-target="#myModal">
<p2>Click For Details</p2>
</ul>
Hope this works :)
Updated code:
<div class="team-leader wow fadeInDown delay-06s">
<div class="team-leader-shadow">
<a href="#" data-toggle="modal" data-target="#myModal"> Click For Details</a>
</div>
<img src="http://www.owltemplates.com/demo/wordpress/success/wp-content/uploads/2013/01/man4.png" alt="">
<!-- <ul> Remove this ul move text in a tag
<p2>Click For Details</p2>
</ul> -->
</div>
CSS:
.team-leader-shadow a {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
transition: all 0.6s ease-in-out;
font-size: 20px;
opacity: 0;
color: #fff;
text-decoration:none;
}
.team-leader:hover .team-leader-shadow a{
opacity:1;
}
Updated working code here : https://jsfiddle.net/j7xpLq28/
Display image on single bootstrap modal
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>Bootstrap modal fails to show image
Add "getSrc" class to tag
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-2">
<h4>Tidningen City Malmö</h4>
</div>
<div class="col-md-4">
<!-- Button trigger modal -->
<a class="tumbnail" href="#" data-image="citymalmo_frontpage.png" data-toggle="modal" data-target="#myModal">
<img class="img-responsive center-block getSrc" src="flag.png" alt="City Malmö Förstasida">
</a>
</div>
<div class="col-md-4">
<!-- Button trigger modal -->
<a class="tumbnail" href="#" data-image="citymalmo_page.png" data-toggle="modal" data-target="#myModal">
<img class="img-responsive center-block getSrc" src="flag.png" alt="City Malmö sida"></a>
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-2">
<h4>Sveriges Radio P4</h4>
</div>
<div class="col-md-4">
<!-- Button trigger modal -->
<a class="tumbnail" href="#" data-image="srp4_page.png" data-toggle="modal" data-target="#myModal">
<img class="img-responsive center-block getSrc" src="flag.png" alt="SR P4"></a>
</div>
</div>
Next put both classes img-responsive showPic in same class = ""
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="image-gallery-title"></h4>
</div>
<div class="modal-body">
<img class="img-responsive showPic" src="" >
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function()
{
console.log( "ready!" );
$('.getSrc').click(function() {
console.log("hello");
var src =$(this).attr('src');
$('.showPic').attr('src', src);
});
});
</script>
Please note: You need to load jquery javascript, bootstrap css and javascript libraries
Here is a working example
https://jsfiddle.net/mkfLmLx1/
Loading different image in bootstrap modal window
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
//get the source of thumb image
var image = $(this).attr("src");
//remove thumb directory from image
var image = image.replace("thumb/","");
// create html for modal body
var html ='<img src="'+image+'" />';
// add to the modal body.
$('.modal-body').html(html);
$('#myModal').modal({show:true});
});
You are not giving the real large image path in the modal. I hope this code will help you.
Related Topics
How to Have a Non-Rectangular Div
Getting a Reference to the Parent Iframe
How to Move a Carousel Item to the Middle When It's Clicked in Jquery
Angular App Not Loading CSS and Js on Refreshing Page
Add Page-Specific JavaScript or CSS in Joomla
Is There a Limit on Length of the Key (String) in Js Object
Iframe Dynamic Height Width Change Based on Inner Content
Svg Foreignobject Not Working Properly on Safari
Put Cursor at End of Text Input's Value
Using Environment Variables/Parameterizing Config.Xml
Catch JavaScript Event in iOS Wkwebview with Swift