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
Related
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'));
});
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>
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>
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/
I'm looking to implement a series of bootstrap modals with previous/next arrows and a carousel between them.
Here's where I'm at:
<div class="modal fade">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
<
>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
This page demonstrates the behaviour I'm looking to emulate.
How would I write a script in order to switch modals on click of either a.carousel-prev or a.carousel-next?
I think you have your terminology slightly off, the linked page has one modal, with one carousel, which has multiple slides.
This is basically what you are looking for.
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<!-- Carousel Start-->
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
Slide 1
</div>
<div class="item">
Slide 2
</div>
<div class="item">
Slide 3
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<!-- Carousel End -->
</div>
</div>