The Big Photo

A tile is small. In this exercise, the selected photo shows big, over the whole page. Galleries call this a lightbox: the page stays behind it, darker, and a button closes it.

The component. Lightbox.vue is new. Its template has the dark layer over the page (the class lightbox), a white box in it (box), and in the box, the close button ✕ (the class close). The styles are ready. The lightbox has no photo of its own: what it shows comes from App.vue, through slots.

• The default slot gets the photo itself: the emoji in a div with the class big, with the photo's color as its background. The class big is in style.css, because the content of a slot is styled by the parent, not by the lightbox.
• A slot named caption, in a paragraph with the class caption under the photo, gets the caption and the place, for example Sunrise, Loch Lomond.

The close button belongs to the lightbox. It doesn't hide anything itself: it emits the event close, and App.vue decides what happens.

The task. When a photo is selected, App.vue shows the lightbox with it. When the lightbox emits close, App.vue hides it, and no photo is selected any more.

A tip: show the lightbox with v-if. While it's hidden, it isn't on the page at all, and when it's shown, a photo is selected, so its content can use that photo.