Why does the Jquery children selector select the img element, extract it, remove it, and then append it to another div element? Shouldn't it create a copy of the element being appended?
var $anchors = $("#imageGallery a");
var $overlay = $('<div id="overlay"></div>');
$("body").append($overlay);
$anchors.click(function(event){
event.preventDefault();
$overlay.show();
var a = $(this).children();
$overlay.append(a);
});
$overlay.click(function(){
$(this).hide();
});body {
font-family: sans-serif;
background: #384047;
}
h1 {
color: #fff;
text-align: center
}
ul {
list-style:none;
margin: 0 auto;
padding: 0;
display: block;
max-width: 780px;
text-align: center;
}
ul li {
display: inline-block;
padding: 8px;
background:white;
margin:10px;
}
ul li img {
display: block;
}
a {
text-decoration: none;
}
#overlay{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left:0;
background: rgba(0,0,0,0.7);
display: none;
}<body>
<h1>Image Gallery</h1>
<ul id="imageGallery">
<li><a href="images/1.png"><img src="images/1.png"></a></li>
<li><a href="images/2.png"><img src="images/2.png"></a></li>
<li><a href="images/3.png"><img src="images/3.png"></a></li>
<li><a href="images/4.png"><img src="images/4.png"></a></li>
<li><a href="images/5.png"><img src="images/5.png"></a></li>
<li><a href="images/6.png"><img src="images/6.png"></a></li>
<li><a href="images/7.png"><img src="images/7.png"></a></li>
</ul>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>