I have a question regarding Ajax, which I am using for the first time. My project consists of a menu with links to the different sections of the site. On the main page there is the simplest photo viewer, with two clickable icons to navigate through the pictures. Then, when the user clicks on the different links, ajax displays the different sections: contact, gallery, contact, etc...
My problem is that when one clicks back on the "home" button and is confronted with the photo viewer, the clickable icons no longer let you browse through the pictures. As I don't have any experience with Ajax, I am not too sure why this is. The javascript only works the first time you are presented with the photo viewer as you load the site, but doesn't seem to be read once the content is loaded again with ajax.
Here is the code:
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="header">
<div id="title"><h1>TITLE<span id="subtitle">SUBTITLE</span></h1></div>
<nav class="cf" id="menu">
<ul>
<li><a href="about.html">ABOUT</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="bio.html">BIO</a></li>
<li><a href="contact.html">CONTACT</a></li>
<li><a href="index.html" class="current">HOME</a></li>
</ul>
</nav>
</div>
<section id="content">
<div id="container">
<div id="imagewrap">
<img src="Images/Images/Image1.jpg" id="front" />
<div id="previous" class="buttons"></div>
<div id="next" class="buttons"></div>
</div>
</div> <!-- end of content -->
</section> <!-- end of container -->
<div id="footer">
</div>
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>
</body>
</html>
.js
$( document ).ready(function() {
$( "#imagewrap" ).hide();
function showPicture() {
$( "#imagewrap" ).fadeIn('slow');
}
setTimeout(showPicture, 2000);
$( "nav a" ).on('click', function(e){
e.preventDefault();
var url = this.href;
$( "nav a.current" ).removeClass("current");
$(this).addClass("current");
$( '#container' ).remove();
$( '#content').load(url + ' #content').hide().fadeIn('slow');
});
counter = 1;
$( '.buttons' ).on('click', function(e){
if (counter < 1 || counter > 5) {return false;}
var id = e.target.id;
if (id == "next" && counter < 5){counter++;
} else if (id == "previous" && counter > 1){counter--;}
getImage();
});
getImage = function() {
document.getElementById("front").src = "Images/Images/Image" + counter + ".jpg";
}
});
contact.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<section id="content">
<div id="container">
<div id="contact" class="sections">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia odit culpa excepturi itaque hic laborum odio nam deserunt ipsum dolor rerum repudiandae, quidem voluptatem nisi numquam tempora vel consequuntur harum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam ut error consectetur eum delectus porro dolore repellendus quidem! Ad, dignissimos minus debitis nam sunt aliquid eius quam cum, omnis magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe vero ducimus reprehenderit quibusdam esse sed, porro pariatur illum natus tempore? Iste laborum odio deleniti molestias praesentium delectus repudiandae consequatur corporis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est fugit provident, labore expedita nostrum laborum nesciunt! Assumenda inventore repudiandae dignissimos animi autem, dolorem sint, incidunt officia quam porro, perspiciatis fuga.</p>
</div>
</div> <!-- end of content -->
</section> <!-- end of container -->
</body>
</html>
I am not posting the html for the other content as it is as with the contact.html or the css file to keep things short. Will do if requested. Thank you for your time.
