Fancyapps

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.

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

Pass plugin to the constructor. This plugin has no options.

js
const container = document.getElementById("myPanzoom");
const options = {};

new Panzoom(container, options, { Pins });

Then place your elements in the Panzoom container and add data-panzoom-pindata attribute to them. 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.

Examples ​

Basic example ​

js
<div class="f-panzoom" id="myPanzoom">
  <div data-panzoom-pin data-x="56%" data-y="60%">
    <svg>...</svg>
  </div>
  <img class="f-panzoom__content" src="https://lipsum.app/id/15/1600x1200" />
</div>

JSFiddle Example

Combine ​

When combining a Pins and a Toolbar plugin, use an inner wrapping element with the class name f-panzoom__viewport, like this:

html
<div class="f-panzoom">
  <div class="f-panzoom__viewport">
    <div data-panzoom-pin ...>...</div>
    <img class="f-panzoom__content" ... />
  </div>
</div>

JSFiddle Example