Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
suther opened this issue Oct 28, 2024 · 7 comments
Open

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

suther opened this issue Oct 28, 2024 · 7 comments
Labels
enhancement New feature or request help wanted Extra attention is needed

Comments

@suther
Copy link

suther commented Oct 28, 2024

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
Copy link
Collaborator

BenRoe commented Nov 19, 2024

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
Copy link
Contributor

swift502 commented Nov 19, 2024

@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
Copy link
Collaborator

BenRoe commented Nov 19, 2024

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.

@BenRoe BenRoe added enhancement New feature or request help wanted Extra attention is needed labels Nov 19, 2024
@swift502
Copy link
Contributor

Alright I'll give it a go then. 👍

@swift502
Copy link
Contributor

swift502 commented Nov 20, 2024

@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
Copy link
Author

suther commented Nov 20, 2024

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
Copy link
Collaborator

BenRoe commented Nov 21, 2024

Why not easy as possible with

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

3 participants