We Keep Coding

Onclick of Image (used in element <a>) not working in jquery

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).

Open gallery when select a thumbnail

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.

load images into bootstrap carousel onClick

I'm working on an html site with a lot of images, to reduce loading time I'm going to load hidden images when user click on the cover image with javascript, then insert it into bootstrap carousel.
I tried to make it, but unsuccessful. Images aren't load. Any help?
Here is my last code:
HTML
<li>
<a href="#" onclick="imgFilter('.ar-img')">
<img src="images/AR/01.jpg" alt="">
</a>
<div class="accordion carousel-inner">
<div class="item active">
<img src="images/AR/01.jpg" alt="slide">
</div>
<div class="item">
<img class="ar-img" src="" data-src="images/AR/02.jpg" alt="slide">
</div>
<div class="item">
<img class="ar-img" src="" data-src="images/AR/03.jpg" alt="slide">
</div>
</div>
</li>
<li>
<a href="#" onclick="imgFilter('.br-img')">
<img src="images/BR/01.jpg" alt="">
</a>
<div class="accordion carousel-inner">
<div class="item active">
<img src="images/BR/01.jpg" alt="slide">
</div>
<div class="item">
<img class="br-img" src="" data-src="images/BR/02.jpg" alt="slide">
</div>
<div class="item">
<img class="br-img" src="" data-src="images/BR/03.jpg" alt="slide">
</div>
</div>
</li>
JS
function imgFilter(id) {
var imgId = $(id);
$("imgId").each(function(i) {
$("this").setAttribute('src', $("this").getAttribute('data-src'));
});
};

Something in the lines of:
$(".item img").each(function(i) {
$("this").setAttribute('src', $("this").getAttribute('data-src'));
}
however i would use jQuery plugin lazyload instead (http://www.appelsiini.net/projects/lazyload).
Assumed you have css like:
.item{
width:200px;
height:auto;
}
.item img{
width:100%;
height:auto;
}

Jquery click function not being called on dynamic data

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.

Position Isotope Load More Button within Container

I am trying to build an image grid with Isotope where a "Load More"-Button is positioned within that grid, at the end after all elements.
Placing the button was not a problem, and the insert of new elements neither, however I have strictly no idea how I can ensure that button always stays after the elements. In my current code, if the "Load More" button is clicked and more elements are inserted after the button.
Any idea how I could change that? Here what I've got some far: http://goo.gl/JbXkzC
Thanks!

First, your button can't be an isotope item if you don't want it part of the isotope layout so it is incorporated into the layout. You could use isotope's stamp option but the easiest way is to move it out of the col-xs-12 and into the row-fluid and change your button css slightly:
codepen
html:
<div class="container">
<div class="row">
<h1>Isotope Image Grid</h1>
<!--<button class="" id="button">Load More</button>-->
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12">
<div class="item">
<img src="" alt="" />
</div>
<div class="item">
<img src="" alt="" />
</div>
<div class="item">
<img src="" alt="" />
</div>
<div class="item">
<img src="" alt="" />
</div>
<div class="item">
<img src="" alt="" />
</div>
<div class="item">
<img src="" alt="" />
</div>
<div class="item">
<img src="" alt="" />
</div>
<div class="item">
<img src="" alt="" />
</div>
<div class="item">
<img src="" alt="" />
</div>
</div><button id="button">Load More</button>
</div>
</div>
css:
#button {
display:inline-block;
width: 25%;
height: 180px;
color: #fff;
font-size: 18px;
background-color: #C0392B;
border: 0px;
}

Looks like the only solution to this is to remove the "Load More" button and re-add it once the new elements have been appended.
$('#portfolioGrid').on("click", ".loadMore", function(addIsotopeItems){
addIsotopeItems.preventDefault();
var OElem = document.getElementById("button");
OElem.parentNode.removeChild(OElem);
var di="<div class=\'item item-new\'><img src=\'\'></img></div><button class=\'item loadMore\' id=\'button\'>Load More</button>";
newItems = $(di).appendTo('#portfolioGrid');
$("#portfolioGrid").isotope('insert', newItems );
});
Full code here on CodePen.