Develop Reference

Javascript different Carousel with same Layout/Style

I've been puzzled by a thing these days, tried to google but didn't find anything that would help my case, not sure whether someone asked this but looks like did not (at least not as specific).
What I'm troubled with is :
I have a section with 4 different (put only 2 in the code) vertical divs which I want each to trigger a different Lightbox/Carousel on click.
What I have atm is the code below (without CSS where I only have the styling of Slides and Modal/Carousel layout).
Problem
What I lack is the knowledge as to how to trigger different carousels with same Modal/Carousel layout I styled in CSS. for example I would like the second Slide to trigger a Lightbox/Carousel containing images 3.jpg and 4.jpg.
Cheers and have a nice day. Thanks in advance.
I'm still a beginner so most likely I have some useless pieces of code which is not being used.
HTML
<section class="row" id="gallery" data-toggle="modal" data-target="#exampleModal">
<div class="slide" alt="First slide" data-toggle="modal" data-target="#exampleModal" data-slide-to="0" >
<div class="content">
<h2> Pre-Wedding</h2>
<p>Bla-bla-bla-bla</p>
</div>
</div>
<div class="slide" alt="Second slide" data-toggle="modal" data-target="#exampleModal" data-slide-to="0">
<div class="content">
<h2> Groom</h2>
<p>Bla-bla-bla-bla</p>
</div>
</div>
</section>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<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>
</div>
<div class="modal-body">
<div id="carouselExample" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block " src="1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block " src="2.jpg" alt="Second slide">
</div>
...other Images
</div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
Javascript
document.getElementById('gallery').classList.add("custom");
document.getElementById('exampleModal').classList.add("custom");

Found out how to.
basically i changed the CSS from this
CSS
#exampleModal.custom{
...
}
Javascript
document.getElementById('gallery').classList.add("custom");
document.getElementById('exampleModal').classList.add("custom");
to this
CSS
#exampleModal.custom, #carouselone.custom{
...
}
Javascript
document.getElementById('gallery').classList.add("custom");
document.getElementById('exampleModal').classList.add("custom");
document.getElementById('carouselone').classList.add("custom");
So now by changing ID and data-target it triggers the same layout with different content(images).
Not sure wether it is the most efficient way but hey..it works

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>

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>

Why isn't my bootstrap Modal being destroyed on hide? How can I get Multiple remote Modals to work?

I am currently trying to produce a portfolio-style website, and decided to use Bootstrap 3. I want to use modals to display my work from a simple image gallery. I have managed to successfully produce each modal and remote link them, however I run into an issue after opening the second modal. The second modal's content is then the content shown for any subsequent modal called. I have tried using javascript to destroy the modal on each instance of hide, yet it doesn't seem to be working and I can not figure out why. Can someone please tell me what I'm doing wrong?
Gallery:
<div class="banner" id="portfolio"><h2>WORK</h2></div>
<div id="gallery" class="final-tiles-gallery effect-zoom effect-fade-out caption-top caption-bg">
<div class="ftg-items">
<div class="tile">
<a class="tile-inner" data-title="VoodooDesignCo." data-toggle="modal" href="portfolioDIR/voodooDetails.php" data-target="#myModal">
<img class="item" data-src="images/work/voodooDesign.png">
<span class='title'>Voodoo Design Co.</span>
<span class='subtitle'>Logo Design and Branding</span>
</a>
</div>
<div class="tile">
<a class="tile-inner" data-title="Godzilla (2014) - Poster Design" data-toggle="modal" href="portfolioDIR/godzillaDetails.php" data-target="#myModal">
<img class="item" data-src="images/work/godzillaPoster.png">
<span class='title'>Godzilla (2014)</span>
<span class='subtitle'>Poster Design</span>
</a>
</div>
<div class="tile">
<a class="tile-inner" data-title="Iron & Air - Title Design" data-toggle="modal" href="portfolioDIR/ironAirDetails.php" data-target="#myModal">
<img class="item" data-src="images/work/ironAirType.png">
<span class='title'>Iron & Air</span>
<span class='subtitle'>Game Concept - Title Design</span>
</a>
</div>
<div class="tile">
<a class="tile-inner" data-title="Aquaman - Title Design" data-toggle="modal" href="portfolioDIR/aquamanDetails.php" data-target="#myModal">
<img class="item" data-src="images/work/aquamanType.png">
<span class='title'>Aquaman</span>
<span class='subtitle'>Movie Concept - Title Design</span>
</a>
</div>
<div class="tile">
<a class="tile-inner" data-title="AllBikes.com.au" data-toggle="modal" href="portfolioDIR/allbikesDetails.php" data-target="#myModal">
<img class="item" data-src="images/work/allbikesWeb.png">
<span class='title'>AllBikes.com.au</span>
<span class='subtitle'>Website Design and Development</span>
</a>
</div>
</div>
</div>
Modal:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-center"></h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button class="btn btn-defualt" data-dismiss="modal" aria-hidden="true"><span class="fa fa-hand-o-left"></span> Back</button>
</div>
</div>
</div>
</div>
Remote Modal:
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-center">Iron & Air Title Design - Video Game Concept</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 text-center">
<img src="images/work/ironAirType.png" alt="Iron & Air: Racing Video Game" class="details img-responsive img-center">
<p>Title Design/Typeface Exploration</p>
</div>
<div class="col-sm-6">
<h4>Project Info:</h4>
<p>his project required the typeface design or title design for a game, movie, T.V. show, etc. This design is based on a fictional racing video game, called 'Iron & Air'</p>
<hr>
<p>blah blah blah blah</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-defualt" data-dismiss="modal"><span class="fa fa-hand-o-left"></span> Back</button>
</div>
ModalReset JavaScript:
$("#myModal").on('hidden.bs.modal', function () {
$("#myModal").removeClass('fade').modal('hide');
$(this).data('bs.modal', null);
});

I did something similar a while back...
I used one modal and pulled in the content from an external file.
each modal would load new content into the same modal with something like this
$("#info").click(function(){
var url = HOST_NAME+"info/modal-data";
$( "#modal-body" ).load(url, function() {
$( "#modal-body" ).show("slow");
});
loadModal();
});
and open the modal with this
function loadModal() {
$( "#modal-body .page-wrapper" ).remove();
$( "#modal-body" ).hide();
$('#edit').modal();
}
Modal
<div class="modal fade" id="edit" 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>
</div>
<div id="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><?=__('modal_close')?></button>
</div>
</div>
</div>
</div>