use Modal Images for controller images

[ellensp]

Add Model images to https://marlinfw.org/docs/hardware/controllers.html

Firstly for the record, I'm not a web developer, I only found out that Model images was a thing today while looking at bootstrap. Basically I followed https://www.w3schools.com/howto/howto_css_modal_images.asp and https://stackoverflow.com/questions/47798971/several-modal-images-on-page

The current way to view the high resolution images opened up a new browser window. This is rather primitive.
With Modal Images it opens up over the top of the webpage with a close gadget, this is much more intuitive.

As a benefit of using Modal Images the *_thumb.jpg files are no longer required and are generated as needed.

I'm not sure of the best places to add the css and javascript when it comes to jekyll so feel free to move things about.

[thisiskeithb]

Modals are fun!

There's an issue with images zooming beyond their actual maximum size and some are blowing beyond the page view:

This might be a limitation on the version of Bootstrap we're using, but the only way to exit the modal view is to click the X, when you can normally click anywhere outside of the image/modal content or by pressing escape. See my comment below.

[thisiskeithb]

Here's a non-custom image modal example using Bootstrap 5.3, so some variables would likely need to changed to work with 4.x (if it works at all in 4.x :smile:):

Click to expand me!

```html

Bootstrap 5 Image Modal

```

Save the contents to a .html file & preview it locally in your browser.

[thinkyhead]

This particular zoomer is not actually based on Bootstrap. It's set up manually, adding click handlers to the small images and to the modal close box, using a CSS zoom animation on the image and caption. The Bootstrap zoomer should be relatively easy to set up and use, so we could also give that a try and compare.

[ellensp]

Ideally what I would like to see is a way to zoom in to the maximum resolution of the image. But I have no idea how to do that other that writing some custom javascript

[thisiskeithb]

This particular zoomer is not actually based on Bootstrap.

I pasted in the Bootstrap example once I realized what was actually going on 😄

Ideally what I would like to see is a way to zoom in to the maximum resolution of the image. But I have no idea how to do that other that writing some custom javascript

Here's a 4.x version:

```html

Bootstrap 4 Image Modal

```

Edit: We're using 3.x, not 4.x 🙃

https://github.com/MarlinFirmware/MarlinDocumentation/blob/ae2942e5f6d2af2dba6b8a5de9f4ddff325adace/assets/javascript/bootstrap.min.js#L2

[thisiskeithb]

Looks like Bootstrap 3.3.6 works fine:

Expand me!

```html

Bootstrap 3 Image Modal

```

I had to switch CDNs for the minified Bootstrap JS since jsdelivr didn't have it, but you get the idea.

Bootstrap 3.x also supports thumbnails, so we can do all this with stock Bootstrap.