I've gone through the existing questions and can't find a solution to my problem, so here goes...
I am trying to implement a carousel inside of a modal, but the click function is not being called when I activate the modal. The HTML is generated dynamically, so I'm think my problem is how I'm incorporating the javascript.
I should mention this is what I'm trying to implement: http://www.bootply.com/alcaraz/QxGeDFsS8G#
Here is my my HTML that is being loaded dynamically
<div class="container" id="photography">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<a data-toggle="modal" data-target="#modal-gallery" href="#">
<img src="img/img1.jpg" class="thumbnail img-responsive" id="image-1">
</a>
</br>
<a data-toggle="modal" data-target="#modal-gallery" href="#">
<img src="img/img1.jpg" class="thumbnail img-responsive">
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<a data-toggle="modal" data-target="#modal-gallery" href="#">
<img src="img/img1.jpg" class=" thumbnail img-responsive" id="image-2">
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<a data-toggle="modal" data-target="#modal-gallery" href="#">
<img src="img/img1.jpg" class="thumbnail img-responsive" id="image-3">
</a>
</div>
</div><!--Row-->
<div class="hidden" id="image-repo">
<!-- #image-1 -->
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="Image 11" src="img/img1.jpg">
</div>
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="Image 12" src="img/img1.jpg">
</div>
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="Image 13" src="img/img1.jpg">
</div>
<!-- #image-2 -->
<div class="item" id="image-2">
<img class="thumbnail img-responsive" title="Image 21" src="http://dummyimage.com/600x350/2255EE/969696">
</div>
<div class="item" id="image-2">
<img class="thumbnail img-responsive" title="Image 21" src="http://dummyimage.com/600x600/2255EE/969696">
</div>
<div class="item" id="image-2">
<img class="thumbnail img-responsive" title="Image 23" src="http://dummyimage.com/300x300/2255EE/969696">
</div>
<!-- #image-3-->
<div class="item" id="image-3">
<img class="thumbnail img-responsive" title="Image 31" src="http://dummyimage.com/600x350/449955/FFF">
</div>
<div class="item" id="image-3">
<img class="thumbnail img-responsive" title="Image 32" src="http://dummyimage.com/600x600/449955/FFF">
</div>
<div class="item" id="image-3">
<img class="thumbnail img-responsive" title="Image 33" src="http://dummyimage.com/300x300/449955/FFF">
</div>
And here is my Javascript
$("document").ready(function(){
$('.stop-this-link').on('click', false);
$("#About").on("click", clickAbout);
$("#Projects").on("click", clickProjects);
$("#Photography").on("click", clickPhotography);
$("#Film").on("click", clickFilm);
$("#Resume").on("click", clickResume);
$("#Contact").on("click", clickContact);
});
function clickAbout(evt){
$("#portfolio").load("aboutMe.html");
}
function clickProjects(evt){
$("#portfolio").html("Clicked Projects");
}
function clickResume(evt){
$("#portfolio").html("Clicked Resume");
}
function clickPhotography(evt){
$("#portfolio").load("photography.html");
/* activate the carousel */
$("#modal-carousel").carousel({interval:false});
/* change modal title when slide changes */
$("#modal-carousel").on("slid.bs.carousel", function () {
$(".modal-title").html($(this).find(".active img").attr("title"));
})
/* when clicking a thumbnail */
//$(".portfolio .photography").on('click', ".row .thumbnail", function(event){
//$(document.body).on('click', '.row .thumbnail', function(event){
$(".row .thumbnail").click(function(){
var content = $(".carousel-inner");
var title = $(".modal-title");
content.empty();
title.empty();
var id = this.id;
var repo = $("#img-repo .item");
var repoCopy = repo.filter("#" + id).clone();
var active = repoCopy.first();
active.addClass("active");
title.html(active.find("img").attr("title"));
content.append(repoCopy);
// show the modal
//$("#modal-gallery").modal("show");
});
}
function clickFilm(evt){
$("#portfolio").load("film.html");
}
function clickContact(evt){
$("#portfolio").load("contact.php");
}
Finally, here is the static HTML that the dynamic content is loaded into.
<div class="col-md-9 col-lg-9 col-xs-9 col-sm-9" id="portfolio"></div> <!--Portfolio!-->
<div id="modal-gallery" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title"></h3>
</div><!--Modal Header-->
<div class="modal-body">
<div id="modal-carousel" class="carousel">
<div class="carousel-inner">
</div><!--Carousel-Inner-->
<a class="carousel-control-left" href="#modal-carousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="carousel-control-right" href="#modal-carousel" data-slide"prev"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div><!--Carousel-->
</div><!--Modal Body-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div><!--Footer-->
</div><!--modal content-->
</div><!--Modal Dialog-->
</div><!--modal-gallery-->
You need to propagate the event when dynamic elements are added to the DOM:
$("body").on("click", '#About', clickAbout);
Event delegation is basically attaching the event to a parent container (for the sake of the example i've used body, but you might want to use a closer parent in order to make it more performant). This parent will have the event and it will know when a new child is added to it, and delegate the event to that given child.
You need to use event delegation for this. You are binding events on page load (inside your document ready function), but the elements don't exist in the page yet. You should do something like this:
$('body').on('click', '#About', clickAbout);
This will listen for click events on the body tag and then see if they match the provided selector. Read more about event delegation here: http://api.jquery.com/on/
A more efficient way to accomplish this in your particular use case would be to set the onclick attribute of the elements that you are adding dynamically. For example:
<div id="About" onclick="clickAbout">
Also, you have some issues with your HTML. You cannot assign the same ID to multiple elements as you have. You have three divs with the id "image-1", for example. IDs must be unique and only one element with a given ID should exist within the page. Otherwise, you'll run into all sorts of problems.
Related
I need to implement a carousel/slider. which has to display max four items in a row and than next slides have 4 items and so on. I have a list of items from back end and want to show first 4 elements of it in 1st slide and than next 4 items in next slide and so on.
I have html template which is showing hard coded items but I want to show dynamic data here (Loop on item div for next slides and inside loop on col-md-3 div to show 4 items in a slide ).
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-3">
<div class="item-slider">
<a class="thumbnail" href="#"><img alt="" src="{%
static 'images/t1.jpg' %}"></a>
<div class="item-cont">
<h3>Title</h3>
<p>Description</p>
<a href="#" class="btn orange-btn btn-block
more-btn" data-toggle="modal" data-
target="#tenants1">More Details</a>
</div>
</div>
<div class="col-md-3">
<div class="item-slider">
<a class="thumbnail" href="#"><img alt="" src="{%
static 'images/t1.jpg' %}"></a>
<div class="item-cont">
<h3>Title</h3>
<p>Description</p>
<a href="#" class="btn orange-btn btn-block
more-btn" data-toggle="modal" data-
target="#tenants1">More Details</a>
</div>
</div>
</div>
</div>
/// AGAIN LOOP ITERATION ON ITEM DIV FOR NEXT SLIDE.
<div class="item active">
<div class="row">
<div class="col-md-3">
<div class="item-slider">
<a class="thumbnail" href="#"><img alt="" src="{%
static 'images/t1.jpg' %}"></a>
<div class="item-cont">
<h3>Title</h3>
<p>Description</p>
<a href="#" class="btn orange-btn btn-block
more-btn" data-toggle="modal" data-
target="#tenants1">More Details</a>
</div>
</div>
<div class="col-md-3">
<div class="item-slider">
<a class="thumbnail" href="#"><img alt="" src="
{% static 'images/t1.jpg' %}"></a>
<div class="item-cont">
<h3>Title</h3>
<p>Description</p>
<a href="#" class="btn orange-btn btn-block
more-btn" data-toggle="modal" data-
target="#tenants1">More Details</a>
</div>
</div>
</div>
</div>
</div>
I need to apply 2 loops (1st for slider and 2nd to show four items in slider)
I have a gallery and images contains other images. So After click on image thubnail I want to see full size of thubnail image and other images which are not represent on gallery because they are just part of that main image. This images will be reached trough scrolling and will be shown in same window with main image.
Now i Have code like this(with one image after click on thubnail) :
<div class="col-3 thumb">
<a data-fancybox="gallery" href="1.jpg" class="fancybox" data-caption="Description 1">
<div class="hovereffect">
<img class="img-fluid" src="1.jpg" alt="">
<div class="overlay">
<h2>Tittle 1</h2>
</div>
</div>
</a>
</div>
<div class="col-3 thumb">
<a data-fancybox="gallery" href="2.jpg" class="fancybox" data-caption="Description 2">
<div class="hovereffect">
<img class="img-fluid" src="2.jpg" alt="">
<div class="overlay">
<h2>Tittle 2</h2>
</div>
</div>
</a>
</div>
<div class="col-3 thumb">
<a data-fancybox="gallery" href="3.jpg" data-caption="Description 3">
<div class="hovereffect">
<img class="img-fluid" src="3.jpg" alt="">
<div class="overlay">
<h2>Tittle 3</h2>
</div>
</div>
</a>
</div>
Update
Solve this with id:
<a data-fancybox="gallery" href="#img_1" class="fancybox">
<div style="display:none">
<div id="img_1"">
<div class="container">
<div class="row">
<div class="col-7" >
<a data-fancybox="gallery1" href="1.jpg" class="fancybox">
<img class="img-fluid" src="1.jpg" />
</a>
</div>
</div>
</div>
</div>
</div>
So, basically, you are asking for two way navigation (e.g., two dimensional), but I have never stumbled upon such script that would fully support that.
You can display additional images under the main image, but they will not have the same functionality (e.g., zooming/dragging/etc) or you can display them as inline elements (obviously, there would be no image-related functionality).
I have this footer of a fixed nav-bar in Div.
<div id="footer">
<div class="col-xs-12 navbar-inverse navbar-fixed-bottom">
<div class="row" id="bottomNav">
<div class="col-xs-4 text-center">
<a id="id1" href="#">
<img id="image1" src='img/feature1.png' alt='missing'>
<div class="caption">Act-1</div>
</a>
</div>
<div class="col-xs-4 text-center">
<a id="id2" href="#">
<img id="image2" src='img/feature2.png' alt='missing'>
<div class="caption">Act-2</div>
</a>
</div>
<div class="col-xs-4 text-center">
<a id="id3" href="#">
<img id="image3" src='img/feature3.png' alt='missing'>
<div class="caption">Act-3</div>
</a>
</div>
</div>
</div>
</div>
On click of image1, I want to do some stuff. I am using alert to test it. The jquery function is in a separate js file which is added in the html. This is the only function js file has in it. I tried to use #id1 and #image1 both in the ebelow function, but it just would not get called.
$("#image1").click(function() {
alert("you are in Act-1 window");
});
what's wrong in such a simple code, i just can't get it.
Your code works fine. It seems to be working for me. The alert gets called if that is what you are looking for
$("#image1").click(function() {
alert("you are in Act-1 window");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="footer">
<div class="col-xs-12 navbar-inverse navbar-fixed-bottom">
<div class="row" id="bottomNav">
<div class="col-xs-4 text-center">
<a id="id1" href="#">
<img id="image1" src='img/feature1.png' alt='missing'>
<div class="caption">Act-1</div>
</a>
</div>
<div class="col-xs-4 text-center">
<a id="id2" href="#">
<img id="image2" src='img/feature2.png' alt='missing'>
<div class="caption">Act-2</div>
</a>
</div>
<div class="col-xs-4 text-center">
<a id="id3" href="#">
<img id="image3" src='img/feature3.png' alt='missing'>
<div class="caption">Act-3</div>
</a>
</div>
</div>
</div>
</div>
Why you put the image inside a href="#" if you are not going to use it? here you have the error
You can also avoid jQuery by vanila js.
var img = document.querySelector('#YourID');
img.addEventListener('click', handler function);
It's better to use separated function for handling ( in this case you can remove the handler).
I'm trying to add some code in order to open a gallery when a thumbnail is selected.
Right now i have this line
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Thumbnail Gallery</h1>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="images/idee-bianco.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="images/idee-bianco.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="images/idee-bianco.png" alt="">
</a>
</div>
........
</div>
Now, i would like to open a gallery or carousel whenever a thumbnail is selected.
It's a portfolio so each thumbnail represent something different, for example, photography, video, illustration, and so on.
Bootstrap's CSS is mostly default, same for js.
Thanks
Try this
<div class="col-lg-12 gallery">
<h1 class="page-header">Thumbnail Gallery</h1>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="images/idee-bianco.png" alt="" onclick = "Show()">
</a>
</div>
<style>
.gallery{
display: none; // gallery is not visible normally
}
</style>
<script>
function Show(){
document.getElementsByClass('gallery').style.display = 'block';
</script>
Here when user clicks an image, you are calling the show function which manipulates the display property of the class gallery. Remember that this function will affect all elements belonging to class 'gallery'. Use id of you intend to have only one such gallery on your page.
I'm using Blueimp gallery to present some images on my website. There are 8 images divided in two rows. The 5th thumbnail (first image on the second row) seems broken, although I can see it in the carousel presentation.
![thumbnails]:https://drive.google.com/file/d/0ByO6EWQ4CgAUaGwzbXhnWDlBWFU/view?usp=sharing
Here's the code
<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<div id="links">
<div class="row">
<div class="col-xs-2 col-xs-offset-3">
<a href="img/117.jpg" class="thumbnail">
<img src="img/thumbnails/117.jpg">
</a>
</div>
<div class="col-xs-2">
<a href="img/119.jpg" class="thumbnail">
<img src="img/thumbnails/119.jpg">
</a>
</div>
<div class="col-xs-2">
<a href="img/120.jpg" class="thumbnail">
<img src="img/thumbnails/120.jpg">
</a>
</div>
<div class="col-xs-2">
<a href="img/121.jpg" class="thumbnail">
<img src="img/thumbnails/121.jpg">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-3">
<a href="img/125.jpg" class="thumbnail">
<img src="img/tumbnails/125.jpg">
</a>
</div>
<div class="col-xs-2">
<a href="img/128.jpg" class="thumbnail">
<img src="img/thumbnails/128.jpg">
</a>
</div>
<div class="col-xs-2">
<a href="img/129.jpg" class="thumbnail">
<img src="img/thumbnails/129.jpg">
</a>
</div>
<div class="col-xs-2">
<a href="img/130.jpg" class="thumbnail">
<img src="img/thumbnails/130.jpg">
</a>
</div>
</div>
</div>
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
Does anyone have an idea of what can be happening here. Thanks in advance!
You have a typo: change
<img src="img/tumbnails/125.jpg">
to (add the 'h')
<img src="img/thumbnails/125.jpg">
:)