Feature-Wish: Bigger Image by "onClick" or "onMouseOver"

[suther]

Would be good if user don't need to do right mouse click and "show image in new Tab" to see a big picture, but would see it by click on it, or onMouse-Over.

[BenRoe]

Hi @suther
this is a good idea. It should be possible. We already have the image with bigger size.
@swift502 do you know a easy solution?

[swift502]

@BenRoe Look I suppose we can go forward with mdx and do all this, if you want me to download all the preview images to this repo.

I honestly don't know if that's okay to "redistribute" those images like this, because I imagine we don't have explicit permission from all the authors of the images.

But once the images are local, we can do anything we want. The biggest hurdle to everything right now is that they're remote.

[BenRoe]

I only accept open source projects and the images are in the same repo.
This project is also not commercial. So it should cover all open source licens.

[swift502]

Alright I'll give it a go then. 👍

[swift502]

@BenRoe No, it's too hard (for me). Even locally I don't know how to do it.

You can see what I tried to do here, essentially astro wants me to import every image rather than using string paths. https://github.com/swift502/awesome-mechanical-keyboard/commit/8c58ea16402be238d5f80bc8780b986e7969f590

And I don't know how to do that and not make it terrible. I tried. Sorry. I'm out.

[suther]

Don't see what you (@swift502) mean with download all the images.
What I meant was just to show them bigger... they can stay where they are.

Something simple like this general functionality of an popup:

<td align="center">
    <img id="thumbnail" src="https://camo.githubusercontent.com/8a6557a48c119b0f784a840c558cac54a4ee4eb57af2096c7278eb13845a05d2/68747470733a2f2f692e696d6775722e636f6d2f305775663861542e706e67" width="200px" onclick="openPopup()">
</td>

<!-- Popup Modal -->
<div id="imagePopup" class="popup">
    <span class="close" onclick="closePopup()">&times;</span>
    <img class="popup-content" id="popupImage">
</div>

/* Popup Styles */
.popup {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8);
}

.popup-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

function openPopup() {
    var popup = document.getElementById("imagePopup");
    var popupImage = document.getElementById("popupImage");
    var thumbnail = document.getElementById("thumbnail");
    popup.style.display = "block";
    popupImage.src = thumbnail.src;
}

function closePopup() {
    var popup = document.getElementById("imagePopup");
    popup.style.display = "none";
}

[BenRoe]

Why not easy as possible with

<a href="" target="_blank" rel="external"><img src=""></a>