If you have an image gallery, and you click on one of the photo albums, you need write code that remembers what the currently selected album is. This is important because if the user clicks on slide show, you want to show a slide show of the currently selected album.
In this case, you can create a gallery.js file. This will contain all the code that maps content data to the templates. This code needs to know what to display, and when to display it.
Look at the above picture. The first thing you see are a bunch of variables. These variables represent the templates. Here, you compile them at the beginning, so they can be used later. You also see variables for the current album and current photo.
The function show template is going to take a template, apply data to it, and display it to the HTML. This process is encapsulated into a single function so it can be easily reused.
You start by loading and compiling all your templates. You have your templates saved as variables, so you can easily call them later.
Next you will have click functions for your albums, photos, and slide show tabs. These are the three main tabs on your web page. Clicking each of those tabs will cause a distinct template to be loaded.
Later down in the code you want to grab all the elements with the class “album-thumbnail”, and give them a click function. You grab the data id and use that to select the correct album out of the array, and then show that album by the photos template. You also save it in the variable current_album. Again, it is important for your code to know what the current album is. The last thing is some code showing what to display when you click on a photo thumbnail.