1 minute, 31 seconds
Recently I wanted to implement simple way to load a number of gallery images on an a static HTML page. JavaScript was my go to, specifically jQuery. I started by including jQuery on my page:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
After noodling on which way to build this, I decided to use the anchor name (“#”) in the URL. We register a jQuery listener like this:
$( document ).ready(function() {
$(window).on('hashchange', function() {
changePhoto();
});
});
What this code does, is on page load (“ready()”), we listen to changes to the “hashchange”. When we hear a change to the anchor name, run the “changePhoto()” function.
I then have a single img HTML tag which we’ll update:
<img id="changable" src="Image1.jpg" />
And some links which control which image the user can see:
<a href="#" class="go-photo" photo="1">Photo 1</a> -
<a href="#" class="go-photo" photo="2">Photo 2</a> -
<a href="#" class="go-photo" photo="3">Photo 3</a>
To handle these clicks, we just have a function which looks for the “go-photo”:
$('.go-photo').click(function(e) {
e.preventDefault();
window.location.hash = $(this).attr('photo');
});
This simply intercepts the default action of clicking a link and instead updates the anchor based of the ID of the “photo” element in the link. Any time the hash is updated in the URL, our listener will fire our own “changePhoto()” function.
Finally, we have our changePhoto function which handles changing the image source upon a hash change in the URL:
function changePhoto( base){
photoid = window.location.hash.replace("#", "");
$('#changable').attr('src', 'Image' + photoid + '.jpg');
return true;
}
And, bam, you have a tidy, JS based photo navigator. My main goal of having both a JS call to change the anchor and the browser back button trigger a call to changePhoto() as achieved. To add a new photo to your page, just upload a new Image4.jpg image and add a new link with the right “photo=4” value and you’re good to go!
