Giter VIP home page Giter VIP logo

starlight-image-zoom's Introduction

starlight-image-zoom 🕵️

Starlight plugin adding zoom capabilities to your documentation images.

Getting Started

Want to get started immediately? Check out the getting started guide.

Features

A Starlight plugin adding zoom capabilities to your documentation images.

  • Lightweight UI based on the <dialog> element
  • No client-side third-party dependencies
  • Markdown and MDX images support: Markdown syntax, HTML syntax, and the <Image> or <Picture> components
  • Alternate text displayed as a caption
  • Accessible buttons to trigger zoom

License

Licensed under the MIT License, Copyright © HiDeoo.

See LICENSE for more information.

starlight-image-zoom's People

Contributors

hideoo avatar martrapp avatar

Stargazers

Pengji Du avatar Marcelo Silva avatar souvik dutta avatar Jaya avatar Saad Khan avatar Kristóf Poduszló avatar tomixy avatar Repooc avatar Oskar Hulter avatar Tom Hackshaw avatar Ghost avatar David Gidwani avatar Daniel Weck avatar Cabbage avatar omar avatar liruifengv avatar  avatar  avatar Atharva avatar  avatar  avatar Userdocs avatar Chris Swithinbank avatar Fafa avatar Paul Valladares avatar  avatar

Watchers

 avatar  avatar

Forkers

emjio yangrunkang

starlight-image-zoom's Issues

When using View Transitions, the page cannot be opened for the first time.

Describe the bug

When I turn on View Transitions, when I load the page for the first time, the magnifying glass appears when I move the mouse over the image, but clicking on it does not work. After I refresh the current page, clicking on the image to enlarge it works.

To Reproduce

  1. turn on View Transitions
  2. load the page for the first time
  3. clicking on image does not work.

Expected behavior

  1. turn on View Transitions
  2. load the page for the first time
  3. clicking on image does work!!!

How often does this bug happen?

Every time

System Info

macOs: 13.6.6
chrome: 124.0.6367.208

Additional Context

No response

Conflict with ExpressiveCode

Describe the bug

After enabling this plugin in Starlight config, the frame="none" flag in my code blocks stoped working and the window frames are displayed.

To Reproduce

  1. Have a page with a code block that applies the frame="none" flag.
    Example:
    CleanShot 2024-05-18 at 13 08 20

CleanShot 2024-05-18 at 13 08 45

  1. Install and enable the starlightImageZoomPlugin in astro.config.mjs
    CleanShot 2024-05-18 at 13 09 24

  2. The code block have window frames now
    CleanShot 2024-05-18 at 13 09 47

Expected behavior

Should not make difference in code blocks

How often does this bug happen?

Every time

System Info

OS: Mac
Browser: Chrome
Plugin version: 0.4.0

Additional Context

No response

Backdrop style

Is your feature request related to a problem?

Consistency with the search behavior in Starlight base

Describe the solution you'd like

Give 2 options. Current, and blurred backdrop.
Blur with search:
image

Solid color with image-zoom plugin:

image

Describe alternatives you've considered

Option to use the blurred backdrop with theme color like in Starlight search menu. Currently it uses a 100% opacity with the base color.

Additional Context

No response

Make the image zoomable, based on the images size.

Is your feature request related to a problem?

I have a full page image. the problem is, that you can not see much, without zooming in.
That is why I hoped this plugin would change that, but If I click the image to open it in the lightbox, it overflows the container and is not readable, and the container is not scrollable. It would be good, to have a zoom, that is calculated by the size of the image, like the one in chrome.
image

Overflow:
image

Describe the solution you'd like

If i open the image url in another tab and zoom with chrome I get this result, which is what I hoped this plugin could do:
image

Describe alternatives you've considered

Writing my own plugin.

Additional Context

No response

Option to hide caption on zoom

Is your feature request related to a problem?

Hey @HiDeoo! I'm wondering if an option to hide the caption on zoom (or limit the caption height) at the bottom of the zoomed image. The caption bar is transparent, which helps a bit, but it does obscure the bottom parts of images with aspect ratios that are closer to 4:3 than 16:9. I already have a component that add captions for my images, so I don't need it on zoom. See screenshots.

Images on the page:

image

Zoomed image (red border):

image

An option for hiding the caption seems like a possible solution.

Describe the solution you'd like

Option/config to hide caption bar on zoom.

Describe alternatives you've considered

I can and have ensured that many of my images are closer to a 16:9 aspect ratio, which usually prevents the caption bar from overlapping and obsuring the image. But sometimes this isn't possible.

Additional Context

Thanks for considering this!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.