Pins

This plugin helps you position elements over Panzoom content so that they stay in the same place after any transformation (zoom, rotate, flip, etc.).

Usage

Include plugin's JS file and optionally include plugin's CSS file.

You are not required to use plugin's CSS file - you can just absolutely position your elements in the center of the container with just a few lines of CSS.

import { Pins } from "@fancyapps/ui/dist/panzoom/panzoom.pins.js";
import "@fancyapps/ui/dist/panzoom/panzoom.pins.css";

Pass Pins to Panzoom constructor or use plugins option. This plugin has no options.

const container = document.getElementById("myPanzoom");
const options = {
  // Your custom options
};

Panzoom(container, options, { Pins }).init();

Use an inner wrapping element with the class name f-panzoom__wrapper and place your elements along with your content.

Add data-x and data-y data attributes to specify the position above the content. These both attributes can contain numeric values or percentages. The starting point is in the upper left corner.

For example, data-x="0%" data-y="0%" would place your element in the top left corner of the content, while data-x="50%" data-y="50%" would place your element in the middle.

<div class="f-panzoom" id="myPanzoom">
  <div class="f-panzoom__wrapper">
    <div class="f-panzoom__pin" data-x="56%" data-y="60%">
      <svg>...</svg>
    </div>
    <img
      class="f-panzoom__content"
      src="https://lipsum.app/id/15/1600x1200"
      alt="Sample image"
      width="1600"
      height="1200"
    />
  </div>
</div>

Examples

Basic example

Combine

It is also possible to display pins while using the toolbar provided by the Controls plugin.