all zoomable images have the same id for controls

[elrayle]

Spotlight Version: 3.0.1, 2.13.0

Description

When a spotlight page has more than one image that is controllable using , the following conditions occur:

• they all share the same id for these controls (i.e., “osd-zoom-in”, “osd-zoom-out”, “osd-home”, “osd-full-page”)
• only the controls for the first image have any impact
• when the controls for the first image are used, all images are impacted (e.g. click the + icon to zoom in on the first image and all images on the page are zoomed in, not just the first one)

Expected

For accessibility (and probably function as well), each control should have a unique id.

When there are multiple controlled images, the controls for each image function as expected and only impact the image they are associated with.

Actual

The control icons share ids by function. That is, all the zoom in buttons have id "osd-zoom-in", all zoom out buttons have id "osd-zoom-out", etc.

When there are multiple controlled images, only the controls for the first image function and the controls impact all the images on the page.

To Reproduce

Prerequisite steps:

1. upload at least 2 images
   1. navigate to Dashboard -> Items -> Add items -> Upload item
   2. click Choose File button
   3. select file
   4. click Open button
   5. assign Title
   6. click Add item button
2. create/edit a page
3. add at least 2 controlled images to the page using the ITEM EMBED widget)
4. save

Test control buttons for second image

1. navigate to page with controlled images
2. test clicking the control buttons
   
   for the second image
3. Notice that nothing happens

Test control buttons for first image

1. navigate to page with controlled images
2. test clicking the control buttons
   
   for the first image
3. Notice that all controlled images are impacted

Related Issues

cbeer/openseadragon-rails#29

openseadragon/openseadragon#2087