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

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>

Related

Popup not triggered for the second time

I have created a separate popup for each view and it works for the first time. The popup windows comes out when I click the text for the first time.
However, the popup window does not come out when I click the same text for the second time. How can I open the popup window on each click?
jQuery(document).ready(function($) {
$("body").on('click','.popup-trigger',function(e)
{
// $(this).after( $(this).nextAll('#popup:first') );
// $(this).nextAll('#popup:first').appendTo("body").modal('show');
console.log('clicked popup');
e.stopPropagation();
if(jQuery(window).width() < 767) {
$(this).after( $(this).nextAll('#popup:first') );
$(this).nextAll('#popup:first').appendTo('body').modal('show');
} else {
// $('#popup').hide();
$(this).nextAll('#popup:first').appendTo('body').modal('show');
};
});
});
You can run the code in here to check my problem:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<a class="popup-trigger" data-toggle="modal" data-target="#popup"><div class="col-md-3 col-sm-3 text-center"><div class="field-content"></div><div class="field-content">tEST1</div></div></a>
<div class="modal fade" id="popup" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="popup-content">
<div class="field-content"><p>Hello..test1</p>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
<div class="views-row views-row-2 views-row-even">
<a class="popup-trigger" data-toggle="modal" data-target="#popup"><div class="col-md-3 col-sm-3 text-center" ><div class="field-content"></div><div class="field-content">tEST2</div></div></a>
<div class="modal fade" id="popup" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="popup-content">
<div class="field-content"><p>Hello..test2 </p>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
<div class="views-row views-row-3 views-row-odd">
<a class="popup-trigger" data-toggle="modal" data-target="#popup"><div class="col-md-3 col-sm-3 text-center" ><div class="field-content"></div><div class="field-content">Test3</div></div></a>
<div class="modal fade" id="popup" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="popup-content">
<div class="field-content"><p>Hello..test3 </p>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</div>

You could do like this
Already you target the id .No need a call dom modal('show').But all the target id was same .So Add separate id for each modal and respected target button. like popup1,popup2...
Target modal was auto popped.its a default behaviour of bootstrap
And no need to appendTo('body') .Because its already available in body
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<a class="popup-trigger" data-toggle="modal" data-target="#popup">
<div class="col-md-3 col-sm-3 text-center">
<div class="field-content"></div>
<div class="field-content">tEST1</div>
</div>
</a>
<div class="modal fade" id="popup" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="popup-content">
<div class="field-content">
<p>Hello..test1</p>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
<div class="views-row views-row-2 views-row-even">
<a class="popup-trigger" data-toggle="modal" data-target="#popup2">
<div class="col-md-3 col-sm-3 text-center">
<div class="field-content"></div>
<div class="field-content">tEST2</div>
</div>
</a>
<div class="modal fade" id="popup2" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="popup-content">
<div class="field-content">
<p>Hello..test2 </p>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
<div class="views-row views-row-3 views-row-odd">
<a class="popup-trigger" data-toggle="modal" data-target="#popup3">
<div class="col-md-3 col-sm-3 text-center">
<div class="field-content"></div>
<div class="field-content">Test3</div>
</div>
</a>
<div class="modal fade" id="popup3" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="popup-content">
<div class="field-content">
<p>Hello..test3 </p>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</div>

jQuery(document).ready(function($) {
$("body").on('click','.popup-trigger',function(e)
{
// $(this).after( $(this).nextAll('#popup:first') );
// $(this).nextAll('#popup:first').appendTo("body").modal('show');
console.log('clicked popup');
e.stopPropagation();
if(jQuery(window).width() < 767) {
$(this).after( $(this).nextAll('#popup:first') );
$(this).nextAll('#popup:first').modal('show');
} else {
// $('#popup').hide();
$(this).nextAll('#popup:first').modal('show');
};
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<a class="popup-trigger" data-toggle="modal" data-target="#popup"><div class="col-md-3 col-sm-3 text-center"><div class="field-content"></div><div class="field-content">tEST1</div></div></a>
<div class="modal fade" id="popup" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="popup-content">
<div class="field-content"><p>Hello..test1</p>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
<div class="views-row views-row-2 views-row-even">
<a class="popup-trigger" data-toggle="modal" data-target="#popup"><div class="col-md-3 col-sm-3 text-center" ><div class="field-content"></div><div class="field-content">tEST2</div></div></a>
<div class="modal fade" id="popup" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="popup-content">
<div class="field-content"><p>Hello..test2 </p>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
<div class="views-row views-row-3 views-row-odd">
<a class="popup-trigger" data-toggle="modal" data-target="#popup"><div class="col-md-3 col-sm-3 text-center" ><div class="field-content"></div><div class="field-content">Test3</div></div></a>
<div class="modal fade" id="popup" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="popup-content">
<div class="field-content"><p>Hello..test3 </p>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</div>

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;
});

How do i display image in bootstrap modal with 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>

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