Time for action – creating multiple zoomable images

We'll keep working with the files we created in the example to create zoomable images—with just a few modifications; we'll be able to place as many zoomable images on the page as we like. Perform the following steps to create multiple zoomable images:

1. Inside the HTML file, add a few more images and accompanying text. The CSS code we wrote earlier is flexible enough to handle multiple blocks of code. We're going to make just one small change to the HTML file. In the <img> element, we'll add an HTML5 data attribute that contains the path to the larger version of the image, as shown in the following code:

   <article>
     <figure>
       <img src="images/chamomile.jpg" height="879" width="1024" alt="Chamomile" data-lgsrc="images/lg-chamomile.jpg">
     </figure>
     <div class="flower-info">
       <h2>Chamomile</h2>
       <p>...</p>
     </div>
   </article>

2. Next, we need to modify the JavaScript...