☰

Messenger Modal Photo Zoom, Drag, Under Mouse

Adds zoom support for opened photos on messenger.com

作者
Matt Markevičius
日安装量
0
总安装量
1
评分
0 0 0
版本
2.2
创建于
2025-04-15
更新于
2025-04-15
大小
10.6 KB
许可证
暂无
适用于


This userscript enhances the photo viewing experience in Messenger's modal view (messenger.com)
by adding advanced photo manipulation tools. It supports zooming with the zoom operation centered at the
mouse pointer (keeping the point under the cursor fixed) and allows for dragging (panning) the image around.
A fixed control bar is available at the top of the screen offering manual zoom in, reset, and zoom out options.

Key Features

  • Zoom Under Mouse Pointer: Use the mouse wheel to zoom in or out.
    The point under your mouse pointer remains fixed as the image scales.
  • Drag (Pan) Functionality: Click and drag the image to reposition it when zoomed in.
  • Global Control Bar: A fixed control bar is displayed at the top center with buttons:
    + (Zoom In), 🔍 (Reset), and - (Zoom Out).
  • HD Image Compatibility: A high z-index is applied to the image to ensure that it
    appears above any interfering elements (such as overlays), making it fully visible in HD mode.
  • Automatic Reset on Photo Change: When switching to another photo in the modal, the script resets
    the zoom level and position to default values, so every new photo starts unzoomed.

How It Works


The script continuously monitors Messenger's DOM for when a modal photo is active—determined by the presence of visible "Next photo" or "Previous photo" buttons.
Once a modal is active, the script attaches event listeners to the photo element (which is identified by its blob: URL) and:


  1. Zooming: The mouse wheel event calculates the position of the mouse relative to the image.
    On zoom in or out, the translation values are updated so that the point under the mouse remains fixed while the image scales.

  2. Dragging: When you click and hold on the image, it begins tracking your mouse movement.
    The image is repositioned by updating its translation values as you drag, allowing you to pan across the zoomed image.

  3. Global Controls: The top control bar offers manual buttons for zooming in, resetting the view,
    and zooming out. These controls work on the current modal photo.

  4. Image Priority via Z-Index: Instead of removing overlay elements through style-based checks,
    the script sets a high z-index on the image. This guarantees that the photo stays on top and visible even if Messenger adds overlays.

  5. Reset on Photo Change: When a new photo is loaded into the modal, the script resets the zoom scale
    and translation values so that each image starts with a clean, unzoomed view.

Installation & Usage

  1. Install a userscript manager like Tampermonkey.
  2. Create a new script and paste the provided code.
  3. Save the script, then visit Messenger.com.
  4. Open a photo in the modal view. The zoom, drag, and control bar features will become active automatically.

Additional Notes

  • The script resets zoom when switching between photos in the modal view.
  • If the high z-index method does not work as expected due to future layout changes, check for script updates.
  • This version avoids the previous approach of removing overlays via style checks and now solely relies on ensuring image priority.

Future Enhancements

  • Integrating multi-touch pinch gestures for mobile devices.
  • Adding inertia or easing effects to the drag functionality for smoother panning.
  • Implementing additional logic to monitor and reapply transformations if the image element is updated dynamically.

Enjoy your enhanced Messenger photo viewing experience!