- 11.1 Prepping the Gallery
- 11.2 Changing the Gallery Image
- 11.3 Setting an Image as Current
- 11.4 Changing the Image Info
- 11.5 Conclusion
This chapter is from the book
This chapter is from the book
This chapter is from the book
11.3 Setting an Image as Current
Section 11.2 represents a major accomplishment: The main task of a photo gallery—namely, swapping the main display image based on a user’s click—is done. All we need to do now is change the “current image” indicator in the first column (this section) and update the image info in the third column (Section 11.4). Both tasks involve a mix of new and old techniques.
As seen in Listing 11.3, the current image is indicated in the HTML source using a CSS class called current:
<div class="current">
<img src="/images/small/beach.jpg" alt="Venice Beach"
data-large-version="/images/large/beach.jpg"
data-title="Venice Beach"
data-description="An overhead shot of Venice Beach, California.">
</div>
This arranges for an orange box shadow due to a line in main.css:
.
.
.
.gallery-thumbs .current img {
box-shadow: 0 0 0 5px #ed6e2f;
opacity: 1;
}
.
.
.
Our basic strategy is to add code to the listener in Listing 11.4 that arranges to remove the current image indicator from the thumbnail it’s on and move it to the thumbnail that’s been clicked. This is a little trickier than it looks because the class isn’t on the image—it’s on the div surrounding the image. Luckily, JavaScript lets us navigate up and down the DOM with ease, so that we can easily access the DOM element one level up in the tree (Figure 9.6)—the so-called parent node.
In short, our algorithm for changing the current image class is as follows:
Find the current thumbnail and remove the current class.
Add the current class to the parent of the clicked image.
Because there’s only one element on the page with class current, we can select it using querySelector:
document.querySelector(".current");
But how can we remove the class? Ah: javascript dom remove class. This leads us to the classList method and its attendant remove method:
document.querySelector(".current").classList.remove("current");
There’s a lot of method chaining here, but its meaning is clear enough.
Happily, once we know how to find the parent node of an element (javascript dom parent node), we can use the corresponding classList.add method (javascript dom add class) to add the desired class:
thumbnail.parentNode.classList.add("current");
Putting these together means we’re already done! The result appears in Listing 11.7 (which includes the result of solving the exercise in Section 11.2.1).
Listing 11.7: Changing the current class.
js/gallery.js
// Activates the image gallery.
// The main task is to attach an event listener to each image in the gallery
// and respond appropriately on click.
function activateGallery() {
let thumbnails = document.querySelectorAll("#gallery-thumbs > div > img");
let mainImage = document.querySelector("#gallery-photo img");
thumbnails.forEach(function(thumbnail) {
thumbnail.addEventListener("click", function() {
// Set clicked image as display image.
let newImageSrc = thumbnail.dataset.largeVersion;
mainImage.setAttribute("src", newImageSrc);
// Change which image is current.
document.querySelector(".current").classList.remove("current");
thumbnail.parentNode.classList.add("current");
});
});
}
As a result of the code in Listing 11.7, clicking on a thumbnail automatically updates the current image indicator, whether the image is Mammoth Mountain in the Sierras (Figure 11.12) or The Huntington in San Marino, California (Figure 11.13).
)
Figure 11.12: Mammoth Mountain.
)
Figure 11.13: The Chinese Garden at The Huntington.
11.3.1 Exercise
There’s a little duplication in Listing 11.7; in particular, it repeats the string literal "current". Eliminate this duplication by factoring the string into a variable called currentClass.