I'm trying to create a layout where all the images within the #ImageContainer are displayed in a fixed Div. Everything seems to be working well except for the fact that when I click on an image, it disappears from the #ImageContainer and shows up in the #BigImage. This behavior is not intended in my jQuery code, and I'm having trouble identifying the root cause.
HTML:
<body>
<div id="ImageCotainer">
<div id="headerLogo">
<div id="Logo">
</div>
</div>
<img src="images/hotel/1.jpg" alt="">
<img src="images/hotel/2.jpg" alt="">
<img src="images/hotel/3.jpg" alt="">
<img src="images/hotel/4.jpg" alt="">
<img src="images/hotel/5.jpg" alt="">
<img src="images/hotel/6.jpg" alt="">
<img src="images/hotel/7.jpg" alt="">
</div>
<div id="BigImage">
<img src="images/wedding/4.jpg" alt="">
</div>
</body>
CSS:
#BigImage{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 700px;
width: 1000px;
margin: auto;
background-color: rgba(0,0,0,0.95);
z-index: 50;
display: none;
}
#BigImage img{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 500px;
width: 800px;
margin: auto;
}
Javascript:
$(window).load(function() {
$("#Logo").click(function () {
window.location.href = "hotelM.html"
});
$("img").click(function () {
//var img = $(this);
$("#BigImage").html(this);
$("#BigImage").fadeIn(1000);
});
$("#BigImage").click(function () {
$("#BigImage").fadeOut(1000);
});
});