<script>
$(document).ready(function(){
var pageNum = 1;
$("#more-photos").click(function(event){
event.preventDefault();
var $link = $(this);
var url = $link.attr('href');
console.log(url);
if(url){
$.get(url, function(data){
$("#gallery").append(data);
});
pageNum ++;
if(pageNum < 4){
$link.attr('href', './'+pageNum+'.html');
}
else{
$link.remove();
}
}
})
})
// $(document).ready(function(){
// $('div .photo').hover(function(){
// $(this).find('.details').fadeTo('slow', 0.7);
// },function(){
// $(this).find('.details').fadeOut('slow');
// })
// })
$(document).ready(function(){
$('#gallery').on('mouseenter mouseleave', 'div.photo', function(event){
var $details = $(this).find('.details');
if(event.type == 'mouseenter'){
$details.fadeTo('slow', 0.7);
}
else{
$details.fadeOut('slow');
}
})
})
</script>
</head>
<body>
<div id = "container">
<h1> Photo Gallery</h1>
<div id = "gallery">
<div class = "photo">
<img src = "./images/1.jpg">
<div class = "details">
<div class = "description">The Cullin Mountains, Isle of skye ....</div>
<div class = "date">12/24/2000</div>
<div class = "photographer"> Alasdair Dougall</div>
</div>
</div>
<div class = "photo">
<img src = "./images/2.jpg">
<div class = "details">
<div class = "description">The Cullin Mountains, Isle of skye.... </div>
<div class = "date">12/24/2000</div>
<div class = "photographer"> Alasdair Dougall</div>
</div>
</div>
<div class = "photo">
<img src = "./images/3.jpg">
<div class = "details">
<div class = "description">The Cullin Mountains, Isle of skye.... </div>
<div class = "date">12/24/2000</div>
<div class = "photographer"> Alasdair Dougall</div>
</div>
</div>
<div class = "photo">
<img src = "./images/4.jpg">
<div class = "details">
<div class = "description">The Cullin Mountains, Isle of skye .....</div>
<div class = "date">12/24/2000</div>
<div class = "photographer"> Alasdair Dougall</div>
</div>
</div>
<div class = "photo">
<img src = "./images/5.jpg">
<div class = "details">
