Develop Reference

Images from data model are not loading into Bootstrap modal

On my page I loaded images into a carousel. The images are loading from the data model. The inspected view of the image shows the data-img-url has a complete url. When I click on the image the modal will open but there is no image. What correction should I make so the image renders in the modal window? Below is the html...
<ul id="sync1">
<li class="item">
#*This is the primary image*#
<a href="#myModal" data-toggle="modal" data-img-url="#Model.ImageLargePath">
<img src="#Model.ImageLargePath" data-src="#Model.ImageLargePath" alt="#(Model.Attributes?.Value("SEODescription"))" title="#Model.SEODescription" class="carousel-img" />
</a>
<a class="carouselImageText">#(Model.SEODescription.ToString())</a>
</li>
#if (Model.AlternateImages != null && Model.AlternateImages.Any())
{
//This is where we load all the images into the primary carousel IF we have alternate images
foreach (var image in Model.AlternateImages)
{
<li class="item">
<a href="#myModal" data-toggle="modal" data-img-url="#Model.ImageLargePath">
<img src="#image.ImageLargePath" class="carousel-img" />
</a>
</li>
}
}
</ul>
Here is the modal...
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body text-center">
<img class="" src="#" />
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
Below is the javascript...
$('#sync1 img').click(function (e) {
$('#myModal img').attr('src', $(this).attr('data-img-url'));
});

Dynamically Adding Image into Bootstrap Modal on click from Angular ng-repeat

I have a page of photos where I want to allow the user to click to enlarge that specific image into a bootstrap modal. How can I dynamically add each specific image to the modal on click..my html looks like this:
<div class="container fishing-picture-container">
<div ng-repeat="picture in fishingPictures" ng-if="$index % 3 == 0" class="row row-buffer">
<div class="col-md-4" ng-if="fishingPictures[$index].name">
<figure>
<img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index].name}}" ng-click="showModal(fishingPictures[$index].name)" />
</figure>
</div>
<div class="col-md-4" ng-if="fishingPictures[$index + 1].name">
<figure>
<img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index + 1].name}}" ng-click="showModal(fishingPictures[$index + 1].name)" />
</figure>
</div>
<div class="col-md-4" ng-if="fishingPictures[$index + 2].name">
<figure>
<img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index + 2].name}}" ng-click="showModal(fishingPictures[$index + 2].name)" />
</figure>
</div>
</div>
</div>
<!-- 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">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
I was thinking I would call a function that would pass in the name of the image and then add that to the modal but doesn't seem to work. Does that seem to be the best way to go about it? Ideally, I would prefer to get a look similar to what it looks like when you click on the image in this link:
http://www.w3schools.com/howto/howto_css_modal_images.asp

Angular script
$scope.showModal = function (imageName) {
angular.element("#imagemodal").modal("show");
$scope.ImageName = "Path here...."+ imageName;
}
Html
<div class="modal-body">
<img ng-src="{{ImageName}}" id="imagepreview">
</div>
--------------------------------------or-------------------------------------
Html
<figure>
<img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index + 2].name}}" data-target="#imagemodal" data-imgname="{{fishingPictures[$index + 2].name}}" data-toggle="modal"/>
</figure>
<div class="modal-body">
<img ng-src="{{ImageName}}" id="imagepreview">
</div>
Angular script
$("#imagemodal").on("shown.bs.modal", function (event) {
var imgName= $(event.relatedTarget).data('imgname');
$scope.ImageName = "Path here...."+ imageName;
});

Bootstrap modal fails to show image

I've been trying to get this bootstrap modal to work without any luck. Been looking at similar problem here as well but none has helped me.
My problem is that the images does not show. The window is there but no image inside it.
Anyway here's the code.
Edit: I have looked at Need to load image as modal on click in bootstrap css, I even tried the code and did not get that to work either for me. There for a new question, my bad if that was wrong. :/
<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" src="citymalmo_frontpage_thumbnail.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" src="citymalmo_page_thumbnail.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" src="srp4_page_thumbnail.png" alt="SR P4"></a>
</div>
</div>
<script type="text/javascript">
$('.getSrc').click(function() {
var src =$(this).attr('src');
$('.showPic').attr('src', src);
});
</script>
<!-- Modal -->
<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" src="" class="showPic">
</div>
</div>
</div>
</div>
I have bootstrap.min.js loaded.

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/

Three issues - first you are trying to get the src on an onclick of ".getSrc" - but you have not designated that class in the code. You will need to add it as below:
Second you have a typo with the "tumbnail" and third you are using "this" to get the src of the image but the image is nested within an <a> element - so the "this" will refer to the <a> and not the image within it..
<!-- Button trigger modal -->
<a class="thumbnail getSrc" href="#" data-image="citymalmo_page.png" data-toggle="modal" data-target="#myModal"><img class="img-responsive center-block" src="citymalmo_page_thumbnail.png" alt="City Malmö sida"></a>
You need to find the image within the a element and get that src (or use a data attribute on the a like the one that already there.:
<script type="text/javascript">
$('.getSrc').click(function() {
var src =$(this).find('img').attr('src');
$('.showPic').attr('src', src);
});
</script>
if you want to use the data attribute on the a then it would be:
<a class="thumbnail getSrc" href="#" data-source="citymalmo_page_thumbnail.png" data-image="citymalmo_page.png" data-toggle="modal" data-target="#myModal"><img class="img-responsive center-block" src="citymalmo_page_thumbnail.png" alt="City Malmö sida"></a>
<script type="text/javascript">
$('.getSrc').click(function() {
var src =$(this).attr('data-source');
$('.showPic').attr('src', src);
});
</script>

jquery dynamic image gallery popup show all images

i want to create dynamic model popup so i have write below js code..but when i have click on single image then model pop up show all images content in dynamic created div . i want same image and its content in model popup.
<script>
$("#pop").on("click", function() {
$('#imagepreview').attr('src', $('#imageresource').attr('src'));
$('#imagemodal').modal('show');
});
</script>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12" >
<div class="row">
<div id="pop">
<a href="#" class="dialogpopup" style=" height: auto;width: 600px;display: -webkit-inline-box;">
<div ng-repeat="Spaces in SpaceList" style="height:auto!important;display: table-caption;">
<span>{{Spaces.Name}}</span>
<img id="imageresource" src="{{Spaces.Image}}" style="width:200px; height: 200px;">
<span>{{Spaces.MaxCapacity}}</span>
</div>
</a>
</div>
<!-- Modal -->
<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">{{Spaces.Name}}</h4>
</div>
<div class="modal-body addright" id="modelimg1" ng-repeat="Spaces in SpaceList">
<img src="{{Spaces.Image}}" id="imagepreview" style="width:400px; height: 270px;">
<p class="parapadding">
Name:{{Spaces.Name}}<br />
Description:{{Spaces.Description}}<br />
Size:{{Spaces.Size}}<br />
Capacity:{{Spaces.MaxCapacity}}<br />
Configuration:<br />
</p>
</div>
</div>
</div>
</div>
</div>
</div>

ID param of any tag should be unique. And in your repeater you have same ids. Change it to smth like id="{{'imagepreview' + $index}}" and
ng-repeat="Spaces in SpaceList track by $index"

How to use bootstrap modal on multiple images on same page on image click?

I have about 18 images on the page that I am trying to display larger in a modal upon clicking the image, but it only displays the first image every time.
I have tried traversing the DOM with $(this).find('img') and I tried it with children also I have tried setting the images to different ids and setting these as a variable.
My current attempt was to set the small image's path to the same id as the larger image's path and then using find. I only have the first two images "set up" for now, since I can't get it working right yet.
BTW, I have tried other methods of zooming in and popovers and plug-ins with no success either, this is the closest I've come to something that works.
Note: There is another question which shows pretty much the same issue, but the answer there didn't work for me.
<img height="100" width="80" id="1" data-toggle="modal" data-target="#myModal" data-dismiss="modal" src='~/Content/MyPics/TextDollarPart1.JPG' alt='Text dollar code part one.' />
<div id="myModal" class="modal fade" >
<div class=" modal-lg">
<div class="modal-content">
<div class="modal-body">
<img id="1"src="~/Content/MyPics/TextDollarPart1.JPG" class="img-responsive" height="1500" width="1000">
</div>
</div>
</div>
</div>
<img height="100" width="80" id="2" data-toggle="modal" data-target="#myModal" data-dismiss="modal" src="~/Content/MyPics/TextDollarPart2.JPG" alt="Text dollar code part two." />
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<img id="2" src="~/Content/MyPics/TextDollarPart2.JPG" class="img-responsive" height="1500" width="1000">
</div>
</div>
</div>
</div>
Script
$(document).ready(function () {
$('img').on('click', function () {
var picID = $(this).attr('id');
$(this).find('picID');
$('picID').modal('toggle');
});
});

You are very close to your goal, you have 2 images
<img height="100" width="80" id="1" data-toggle="modal" data-target="#myModal" src='http://tympanus.net/Tutorials/CaptionHoverEffects/images/1.png' alt='Text dollar code part one.' />
<img height="100" width="80" id="2" data-toggle="modal" data-target="#myModal" src='http://tympanus.net/Tutorials/CaptionHoverEffects/images/2.png' alt='Text dollar code part one.' />
One Modal
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img class="img-responsive" src="" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
If you want to show image in modal with your approach using click function
$(document).ready(function () {
$('img').on('click', function () {
var image = $(this).attr('src');
$('#myModal').on('show.bs.modal', function () {
$(".img-responsive").attr("src", image);
});
});
});
Fiddle
Or you can use bootstrap modal event function only, less complicated and better approach (recommended solution)
$(document).ready(function () {
$('#myModal').on('show.bs.modal', function (e) {
var image = $(e.relatedTarget).attr('src');
$(".img-responsive").attr("src", image);
});
});
Fiddle

You mean you have 18 images, when you click on a image , website will open a open to show a larger image?
So why don't you use another plugin such as Nivo lightbox, which allow you open a popup to show image, and even though put all your image in a gallery when open a popup

I am learning English, so I'm not sure if I fully understand but if you want is show different images in a modal by clicking on each thumbnail image. I think that this code can help you.
here is an Jsfiddle example:
How to show multiple images on the same modal
And the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<script type="text/javascript" src="jquery-1.11.2.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
<style type="text/css">
.my-img a {
display: inline-block;
margin: 10px;
border: 2px solid #CCC;
}
.my-img a:hover {
border: 2px solid #45AFFF;
}
.modal-lg {
width: 86%;
}
.modal-body {
overflow: auto;
max-height: auto;
}
</style>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<div class="row">
<div class="col-xs-12 my-img">
<a href="#" id="link1" data-toggle="modal" data-target="#myModal">
<img src="1.png" id="img1" class="img-responsive" width="250px">
</a>
<a href="#" id="link1" data-toggle="modal" data-target="#myModal">
<img src="2.png" id="img2" class="img-responsive" width="250px">
</a>
<a href="#" id="link1" data-toggle="modal" data-target="#myModal">
<img src="3.png" id="img3" class="img-responsive" width="250px">
</a>
<a href="#" id="link1" data-toggle="modal" data-target="#myModal">
<img src="4.png" id="img4" class="img-responsive" width="250px">
</a>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">your image title here (can be dynamic) </h4>
</div>
<div class="modal-body" id="showImg">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('img').on('click', function() {
$("#showImg").empty();
var image = $(this).attr("src");
$("#showImg").append("<img class='img-responsive' src='" + image + "' />")
//alert(image);
})
});
</script>
</body>
</html>

It is Work Fine For Normal image Path But I have base64 image so not work this javascript.
<img src="<?php echo 'data:image/'.$imageFileType.';base64,'.$fetch_expance['expance_image'];?>" style="cursor: pointer;" data-toggle="modal" data-target="#myModal" width="100px" height="100px" /><br>