How do i display image in bootstrap modal with Javascript - javascript

am having trouble getting my photos to display in modal using javascript. All i get when i click on a photo is a blank modal popping up. I believe this is because am still learning javascript and related questions haven't helped much. Would appreciate all the help i get
Modal html code
<!-- photos -->
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-xs-6">
<img src="images/image1.jpg" alt="recent photo">
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<img src="images/image2.jpg" alt="recent photo">
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<img src="images/image3.jpg" alt="recent photo">
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<img src="images/image4.jpg" alt="recent photo">
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<img src="images/image5.jpg" alt="recent photo">
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<img src="images/image6.jpg" alt="recent photo">
</div>
</div>
</div>
<!-- ./photos -->
<!-- modal -->
<div class="modal fade" id="trslphotos" tabindex="-1" role="dialog" 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"></h4>
</div>
<div class="modal-body"><img src="" class="img-responsive"></div>
<div class="modal-footer">
<a class="carousel-control left" href="#recent-photos" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="carousel-control right" href="#recent-photos" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
<!-- ./modal -->
This is the javascript am using to call the image
function displayPhotos(url) {
//this should load photos
$('.modal-body img').attr('src',url);
//show modal
$('#trslphotos').modal();
}


Here is the solution for you. I've simply called your displayPhotos() function on modal shown.
Fiddle
$('#trslphotos').on('shown.bs.modal', function (a, b,c) {
var clickedImageUrl = a.relatedTarget.childNodes[0].src;
displayPhotos(clickedImageUrl);
})
function displayPhotos(url) {
console.log(url);
$('.modal-body img').attr('src',url);
$('#trslphotos').modal();
}
Now it will work just fine with your code. Hope it helps u.


I don't know what your problem, may be this help you a little. Try to listen on click in trslphotos.
$(function() {
$('#trslphotos').on('show.bs.modal', function() {
$('.modal-body img').attr('src', "https://i.stack.imgur.com/nukKn.jpg");
//$('#trslphotos').modal('show');
});
$('#trslphotos').on('click', function() {
//$('.modal-body img').attr('src', "https://i.stack.imgur.com/nukKn.jpg");
$('#trslphotos').modal('show');
});
});
<link href="https://bootswatch.com/united/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image1.jpg" data-target="#trslphotos">
<img src="images/image1.jpg" alt="recent photo">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image2.jpg" data-target="#trslphotos">
<img src="images/image2.jpg" alt="recent photo">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image3.jpg" data-target="#trslphotos">
<img src="images/image3.jpg" alt="recent photo">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image4.jpg" data-target="#trslphotos">
<img src="images/image4.jpg" alt="recent photo">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image5.jpg" data-target="#trslphotos">
<img src="images/image5.jpg" alt="recent photo">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image6.jpg" data-target="#trslphotos">
<img src="images/image6.jpg" alt="recent photo">
</a>
</div>
</div>
</div>
<!-- ./photos -->
<!-- modal -->
<div class="modal fade" id="trslphotos" tabindex="-1" role="dialog" 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"></h4>
</div>
<div class="modal-body">
<img src="" class="img-responsive">
</div>
<div class="modal-footer">
<a class="carousel-control left" href="#recent-photos" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="carousel-control right" href="#recent-photos" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>

Related

Why does only the first of my modals load as expected?

I'm a beginner in programming and I have a little problem.
I have six modal images but only one of them is loading right.
Where is my mistake? How do I have to change my code?
I've tried to use a for loop but it doesn't happen again.
I'm using document.getElementsByClassName('myImages') but it doesn't happen again.
Here is my HTML and JavaScript code:
var modal = document.getElementById('myModal');
var img = document.getElementsByClassName('myImages');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<img src="pictures/r.jpg" class="myImages" id="myImg" style="width:100%;max-width:300px">
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<p>Mъжка тениска</p>
<button type="button" class="btn btn-primary">Buy</button>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<img src="pictures/q.jpg" id="myImg" class="myImages" style="height:100%;max-height:300px;width:100%;max-width:300px">
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<p>Тениска Playboy</p>
<button type="button" class="btn btn-primary">Buy</button>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<img src="pictures/w.jpg" id="myImg" class="myImages" style="height:100%;max-height:300px;width:100%;max-width:300px">
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<p>Mъжка тениска</p>
<button type="button" class="btn btn-primary">Buy</button>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<img src="pictures/e.jpg" id="myImg" class="myImages" style="height:100%;max-height:300px;width:100%;max-width:300px">
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<p>Mъжка тениска</p>
<button type="button" class="btn btn-primary">Buy</button>
</div>
</div>
<!----------------------------------------------------------------------------------------->
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<img src="pictures/1.jpeg" id="myImg" class="myImages" style="height:100%;max-height:300px;width:100%;max-width:300px">
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<p>Mъжка тениска</p>
<button type="button" class="btn btn-primary">Buy</button>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<img src="pictures/2.jpg" id="myImg" class="myImages" style="height:100%;max-height:300px;width:100%;max-width:300px">
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<p>Тениска Playboy</p>
<button type="button" class="btn btn-primary">Buy</button>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<img src="pictures/3.jpg" id="myImg" class="myImages" style="height:100%;max-height:300px;width:100%;max-width:300px">
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<p>Mъжка тениска</p>
<button type="button" class="btn btn-primary">Buy</button>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<img src="pictures/e.jpg" id="myImg" class="myImages" style="height:100%;max-height:300px;width:100%;max-width:300px">
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<p>Mъжка тениска</p>
<button type="button" class="btn btn-primary">Buy</button>
</div>
</div>
<div class="Socials">
<br>
</div>
</div>

Phantomjs remove class

I use pageres-cli (phantomjs) to take a screenshot from a website.
The animated stuff doesnt work while take a screenshot. I try to remove classes from HTML before rendering page. (".wow, .fadeIn, .animated ...")
I can remove elements etc, so i'm at the right point of the code, but this following specific code doesnt work.
page.evaluate(function (css) {
[...]
Array.prototype.slice.call(document.getElementsByClassName("wow")).forEach(function(script) {
script.classList.remove("wow");
});
}, opts.css);
HTML:
<section class="well2 well2_ins bg-secondary-rgba">
<div class="container">
<h3 class="text-primary center991">
Leistungen
<small>
<span>Alle Leistungen</span>
</small>
</h3>
</div>
<div class="owl-carousel">
<div class="item">
<div class="container">
<div class="row center991">
<div class="col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-delay=".1s">
<div class="thumbnail-1 thumbnail3">
<img src="http://placehold.it/270x200?text=Platzhalter Bild" alt=""/>
<div class="caption" data-equal-group="2">
<h5 class="txt-sec">
Hol- und Bringservice
</h5>
<a class="btn btn-primary offs1" href="/">Zum Angebot<span class="triang"></span></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-delay=".2s">
<div class="thumbnail-1 thumbnail3">
<img src="http://placehold.it/270x200?text=Platzhalter Bild" alt=""/>
<div class="caption" data-equal-group="2">
<h5 class="txt-sec">
Mobiler Service
</h5>
<a class="btn btn-primary offs1" href="/">Zum Angebot<span class="triang"></span></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-delay=".3s">
<div class="thumbnail-1 thumbnail3">
<img src="http://placehold.it/270x200?text=Platzhalter Bild" alt=""/>
<div class="caption" data-equal-group="2">
<h5 class="txt-sec">
Ersatzwagen
</h5>
<a class="btn btn-primary offs1" href="/">Zum Angebot<span class="triang"></span></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-delay=".4s">
<div class="thumbnail-1 thumbnail3">
<img src="http://placehold.it/270x200?text=Platzhalter Bild" alt=""/>
<div class="caption" data-equal-group="2">
<h5 class="txt-sec">
Sonnenschutzfolien
</h5>
<a class="btn btn-primary offs1" href="/">Zum Angebot<span class="triang"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="row center991">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="thumbnail-1 thumbnail3">
<img src="http://placehold.it/270x200?text=Platzhalter Bild" alt=""/>
<div class="caption" data-equal-group="2">
<h5 class="txt-sec">
Klimaanlagen-Service
</h5>
<a class="btn btn-primary offs1" href="/">Zum Angebot<span class="triang"></span></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="thumbnail-1 thumbnail3">
<img src="http://placehold.it/270x200?text=Platzhalter Bild" alt=""/>
<div class="caption" data-equal-group="2">
<h5 class="txt-sec">
Autoglasversiegelung
</h5>
<a class="btn btn-primary offs1" href="/">Zum Angebot<span class="triang"></span></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="thumbnail-1 thumbnail3">
<img src="http://placehold.it/270x200?text=Platzhalter Bild" alt=""/>
<div class="caption" data-equal-group="2">
<h5 class="txt-sec">Dichtigkeitsprüfung</h5>
<a class="btn btn-primary offs1" href="/">Zum Angebot<span class="triang"></span></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="thumbnail-1 thumbnail3">
<img src="http://placehold.it/270x200?text=Platzhalter Bild" alt=""/>
<div class="caption" data-equal-group="2">
<h5 class="txt-sec">Funktionstest</h5>
<a class="btn btn-primary offs1" href="/">Zum Angebot<span class="triang"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

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>

How to popup image with the title

I using bootstrap framework and I'd like to get popup image with the title but it show only image. and i don't know how to add code to show the title in js. please help me.
Here's my code:
js
<script>
$(document).ready(function(){
$('li img').on('click',function(){
var src = $(this).attr('src');
var img = '<img src="' + src + '" class="img-responsive"/>';
$('#myModal').modal();
$('#myModal').on('shown.bs.modal', function(){
$('#myModal .modal-body').html(img);
});
$('#myModal').on('hidden.bs.modal', function(){
$('#myModal .modal-body').html('');
});
});
})
</script>
html
<div class="row">
<div id="small-img" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<ul class="main-icon">
<li class="tp-icon"> <img src="img/khmermart.png"> <p>name</p> <p>passowrd</p>
</li>
<li class="tp-icon"> <img src="img/wing.png"><p>name</p> <p>passowrd</p>
</li>
<li class="tp-icon"> <img src="img/AMK.png"><p>name</p><p>passowrd</p>
</li>
</ul>
</div>
</div>
<div class="popup">
<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-body"></div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>

You have to set all your data attributes for each modal so you can then retrieve them when you open up the modal popup.
$(document).ready(function() {
loadGallery(true, 'a.thumbnail');
function loadGallery(setIDs, setClickAttr) {
var selector,
counter = 0;
function updateGallery(selector) {
var $sel = selector;
current_image = $sel.data('image-id');
$('#image-gallery-caption').text($sel.data('caption'));
$('#image-gallery-title').text($sel.data('title'));
$('#image-gallery-image').attr('src', $sel.data('image'));
disableButtons(counter, $sel.data('image-id'));
}
if (setIDs == true) {
$('[data-image-id]').each(function() {
counter++;
$(this).attr('data-image-id', counter);
});
}
$(setClickAttr).on('click', function() {
updateGallery($(this));
});
}
});
.page-header {
text-align: center;
}
a.thumbnail,
.thumbnail:hover,
.thumbnail:focus,
.thumbnail:active {
border: none;
outline: none;
}
.caption {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Modal + Image</h1>
<div class="thumb"><a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title 1" data-caption="This a caption 1" data-image="http://placehold.it/350x150/f00/fff" data-target="#image-gallery" />
<img class="img-responsive" src="http://placehold.it/350x150/548457/fff" alt="" />
</a>
</div>
<div class="thumb"><a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title 2" data-caption="This a caption 2" data-image="http://placehold.it/350x150/000/fff" data-target="#image-gallery" />
<img class="img-responsive" src="http://placehold.it/350x150/000/fff" alt="" />
</a>
</div>
<div class="thumb"><a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title 3" data-caption="This a caption 3" data-image="http://placehold.it/350x150/266080/fff" data-target="#image-gallery" />
<img class="img-responsive" src="http://placehold.it/350x150/266080/fff" alt="" />
</a>
</div>
<div class="thumb"><a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title 4" data-caption="This a caption 4" data-image="http://placehold.it/350x150/1c1c1c/fff" data-target="#image-gallery" />
<img class="img-responsive" src="http://placehold.it/350x150/1c1c1c/fff" alt="" />
</a>
</div>
</div>
<div class="modal fade" id="image-gallery" 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="image-gallery-title"></h4>
</div>
<div class="modal-body">
<img id="image-gallery-image" class="img-responsive" src="" />
</div>
<div class="modal-footer">
<div class="col-md-12 text-justify" id="image-gallery-caption">This text will be overwritten by jQuery</div>
</div>
</div>
</div>
</div>
</div>

I am not sure where you want the title to show, so I am assuming you want it in the default bootstrap modal header. You would update the modal code as follows, to include the header (you can remove the close button if required):
<div class="popup">
<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-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body"></div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
Then you would modify your js like this:
<script>
$(document).ready(function(){
$('li img').on('click',function(){
var src = $(this).attr('src');
var img = '<img src="' + src + '" class="img-responsive"/>';
var title = src;
});
$('#myModal').modal();
$('#myModal').on('shown.bs.modal', function(){
$('#myModal .modal-body').html(img);
$('#myModal .modal-title').text(title);
});
$('#myModal').on('hidden.bs.modal', function(){
$('#myModal .modal-body').html('');
$('#myModal .modal-title').text('');
});
});
</script>
If you want to use just the file name, you can set a title for the image that is just the filename and use it:
example of one of your list items with added title:
<li class="tp-icon"> <img src="img/AMK.png" title="AMK"><p>name</p><p>passowrd</p>
</li>
and the js to replace previous examples title var:
var title = $(this).attr("title");

loading a specific slide in carousel in modal in bootstrap

I have a list of thumbnails, on a Bootstrap 3 page. When clicking them, I want to open a modal which contains a carousel of additional info for each of the thumbnails.
I would like that when I click on the thumbnail, the modal opens with the specific slide in the carousel open.
I'm trying the following, but both the modal's "data-toggle" and carousel's "data-slide-to" attributes use "data-target" to set the target, but in this case the targets are two different IDs ("#myModal" and "#gallery" repectively). I can't have two "data-target" on the same HTML tag. Is there a way to hack this easily? Sorry, I'm not a dev.
This is the list of thumbnails:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3"><img src="http://placehold.it/150x75&text=item1" data-toggle="modal" data-target="#myModal" data-slide-to="0"></div>
<div class="col-xs-6 col-sm-4 col-md-3"><img src="http://placehold.it/150x75&text=item2" data-toggle="modal" data-target="#myModal" data-slide-to="1"></div>
<div class="col-xs-6 col-sm-4 col-md-3"><img src="http://placehold.it/150x75&text=item3" data-toggle="modal" data-target="#myModal" data-slide-to="2"></div>
<div class="col-xs-6 col-sm-4 col-md-3"><img src="http://placehold.it/150x75&text=item4" data-toggle="modal" data-target="#myModal" data-slide-to="3"></div>
</div>
</div>
And here's the modal code:
<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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button></div>
<div class="modal-body">
<div id="gallery" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/600x400&text=item1" alt="item1">
<div class="carousel-caption">
<h4>heading 1</h4>
<p>This is the description.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/600x400&text=item2" alt="item2">
<div class="carousel-caption">
<h4>heading 2</h4>
<p>This is the description.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/600x400&text=item3" alt="item3">
<div class="carousel-caption">
<h4>heading 3</h4>
<p>This is the description.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/600x400&text=item4" alt="item4">
<div class="carousel-caption">
<h4>heading 4</h4>
<p>This is the description.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#gallery" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#gallery" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
</div>
</div>

You can wrap the image in anchor that targets the carousel like this:
<a href="#gallery" data-slide-to="0">
<img src="http://placehold.it/150x75&text=item1" data-toggle="modal" data-target="#myModal">
</a>
Demo: http://jsfiddle.net/NJWqw/

Categories

Resources