use Modal Images for controller images #573
Conversation
|
Modals are fun! There's an issue with images zooming beyond their actual maximum size and some are blowing beyond the page view: 
|
|
Here's a non-custom image modal example using Bootstrap Click to expand me!
<!DOCTYPE html>
<html lang="en" lang="en" data-bs-theme="dark">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap 5 Image Modal</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container mt-5">
<h1>Bootstrap 5 Image Modal</h1>
<!-- <button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#imgModal"
>
Popup image
</button> -->
<a href="#" data-bs-toggle="modal" data-bs-target="#imgModal"
><img
src="https://picsum.photos/900/500"
class="img-thumbnail"
width="300px"
alt="Launch image demo modal"
/></a>
<div id="imgModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-body">
<img src="https://picsum.photos/900/500" width="100%" />
</div>
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
</body>
</html>Save the contents to a |
|
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. |
|
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 |
I pasted in the Bootstrap example once I realized what was actually going on 😄
Here's a 4.x version:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap 4 Image Modal</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
rel="stylesheet"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container mt-5">
<h1>Bootstrap 4 Image Modal</h1>
<!-- <button
type="button"
class="btn btn-primary"
data-toggle="modal"
data-target="#imgModal"
>
Popup image
</button> -->
<a href="#" data-toggle="modal" data-target="#imgModal"
><img
src="https://picsum.photos/900/500"
class="img-thumbnail"
width="300px"
alt="Launch Image Modal"
/></a>
<div id="imgModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-body">
<img src="https://picsum.photos/900/500" width="100%" />
</div>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-2.2.1.min.js"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous"
></script>
</body>
</html>Edit: We're using |
|
Looks like Bootstrap Expand me!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap 3 Image Modal</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.6/dist/css/bootstrap.min.css"
rel="stylesheet"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container mt-5">
<h1>Bootstrap 3 Image Modal</h1>
<!-- <button
type="button"
class="btn btn-primary"
data-toggle="modal"
data-target="#imgModal"
>
Launch Image Modal
</button> -->
<a href="#" data-toggle="modal" data-target="#imgModal"
><img
src="https://picsum.photos/900/500"
class="img-thumbnail"
width="300px"
alt="Launch Image Modal"
/></a>
<div id="imgModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<img src="https://picsum.photos/900/500" width="100%" />
</div>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-2.2.1.min.js"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
crossorigin="anonymous"
></script>
</body>
</html>I had to switch CDNs for the minified Bootstrap JS since jsdelivr didn't have it, but you get the idea. Bootstrap |
thinkyhead
force-pushed
the
master
branch
4 times, most recently
from
d065c08 to
7f8f101
Compare
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.