javascript - bootstrap jquery click event -

javascript - bootstrap jquery click event -

i have 3 icons below each image such close open in new window , open in pop up.

bootstrap code:

<div class="image-div"> <div class="col-md-3"><img src="images/sample.jpg" id="1"> <div class="bot-icon1 glyphicon glyphicon-remove" "=""></div> <div class="bot-icon2 glyphicon glyphicon-share-alt" "=""></div> <div class="bot-icon3 glyphicon glyphicon-globe" "=""></div> </div> </div> <div class="image-div"> <div class="col-md-3"><img src="images/sample-2.jpg"> <div class="bot-icon1 glyphicon glyphicon-remove"></div> <div class="bot-icon2 glyphicon glyphicon-share-alt"></div> <div class="bot-icon3 glyphicon glyphicon-globe"></div> </div> </div> <div class="image-div"> <div class="col-md-3"><img src="images/sample-2.jpg"> <div class="bot-icon1 glyphicon glyphicon-remove"></div> <div class="bot-icon2 glyphicon glyphicon-share-alt"></div> <div class="bot-icon3 glyphicon glyphicon-globe"></div> </div> </div> <div class="image-div"> <div class="col-md-3"><img src="images/sample-4.jpg"> <div id="reload"> <div class="bot-icon1 glyphicon glyphicon-remove"></div></div> <div class="bot-icon2 glyphicon glyphicon-share-alt"></div> <div class="bot-icon3 glyphicon glyphicon-globe"></div> </div> </div> <div class="image-div"> <div class="col-md-3"><img src="images/sample.jpg"> <div class="bot-icon1 glyphicon glyphicon-remove"></div> <div class="bot-icon2 glyphicon glyphicon-share-alt"></div> <div class="bot-icon3 glyphicon glyphicon-globe"></div> </div> </div> <div class="image-div"> <div class="col-md-3"><img src="images/sample-2.jpg"> <div class="bot-icon1 glyphicon glyphicon-remove"></div> <div class="bot-icon2 glyphicon glyphicon-share-alt"></div> <div class="bot-icon3 glyphicon glyphicon-globe"></div> </div> </div> <div class="image-div"> <div class="col-md-3"><img src="images/sample-2.jpg"> <div class="bot-icon1 glyphicon glyphicon-remove"></div> <div class="bot-icon2 glyphicon glyphicon-share-alt"></div> <div class="bot-icon3 glyphicon glyphicon-globe"></div> </div> </div> <div class="image-div"> <div class="col-md-3"><img src="images/sample-4.jpg"> <div class="bot-icon1 glyphicon glyphicon-remove"></div> <div class="bot-icon2 glyphicon glyphicon-share-alt"></div> <div class="bot-icon3 glyphicon glyphicon-globe"></div> </div> </div> <div class="image-div"> <div class="col-md-3"><img src="images/sample-5.jpg"> <div class="bot-icon1 sample glyphicon-remove"></div> <div class="bot-icon2 glyphicon glyphicon-share-alt"></div> <div class="bot-icon3 glyphicon glyphicon-globe"></div> </div> </div> </div>

javascript code:

$(".bot-icon1").click( function() { $(this).siblings('img').css('display', 'none'); }); $( ".image-div" ).hover( function() { $(this).find( ".bot-icon1" ).css( "display", "block" ); $(this).find( ".bot-icon2" ).css( "display", "block" ); $(this).find( ".bot-icon3" ).css( "display", "block" ); }, function() { $(this).find(".bot-icon1" ).css( "display", "none" ); $(this).find(".bot-icon2" ).css( "display", "none" ); $(this).find (".bot-icon3" ).css( "display", "none" ); } ); $(document).ready(function() { $('.image-div img').each(function() { var maxwidth = 250; // max width image var maxheight =250; // max height image var ratio = 0; // used aspect ratio var width = $(this).width(); // current image width var height = $(this).height(); // current image height // check if current width larger max if(width > maxwidth){ ratio = maxwidth / width; // ratio scaling image $(this).css("width", maxwidth); // set new width $(this).css("height", height * ratio); // scale height based on ratio height = height * ratio; // reset height match scaled image width = width * ratio; // reset width match scaled image } // check if current height larger max if(height > maxheight){ ratio = maxheight / height; // ratio scaling image $(this).css("height", maxheight); // set new height $(this).css("width", width * ratio); // scale width based on ratio width = width * ratio; // reset width match scaled image height = height * ratio; // reset height match scaled image } }); });

i not able perform click action 3 icons. , want alter image src of different images on clicking sec icon open in new window.can help me out?

clear view in bootply

http://www.bootply.com/8fxllvxzph#

$(".bot-icon2").click(function() { $(this).siblings('img').attr("src","image.jpg"); });

javascript jquery twitter-bootstrap