Fancyapps
Return to top
On this page

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