@alain_tran/loupejs

v1.1.4

Published

16 days ago

Create zoom on image

Downloads

322

0High
0Medium
0Low

alain_tran

loupe zoom image lens

## Usage

### Step 1: Import the Loupe

In your JavaScript file, import the `Loupe` from the package:

```javascript
import Loupe from '@alain_tran/loupejs';

Step 2: Prepare the HTML Structure

Ensure that your HTML contains the necessary elements with appropriate data-target attributes:

<div class="relative w-96 h-96 cursor-none">
  <img src="/path-to-background-image.jpg" alt="Image à zoomer" data-target="image" class="w-full h-full object-cover">
  <div class="z-10 absolute inset-0 w-full h-full opacity-0 bg-no-repeat pointer-events-none transition-opacity duration-300" data-target="magnifier"></div>
  <div class="z-20 absolute w-20 h-20 opacity-0 bg-white/60 transition-opacity duration-300 pointer-events-none" data-target="lens"></div>
</div>

data-target="image": The image you want to apply the magnifier effect to.
data-target="magnifier": The magnifier element, which will display the zoomed-in portion of the image.
data-target="lens": The lens element, which will move with the cursor to indicate the zoomed area.

Step 3: Initialize the Loupe

Once the DOM is loaded, you need to initialize the Loupe with the corresponding elements:

document.addEventListener('DOMContentLoaded', () => {
  const imageElement = document.querySelector('[data-target="image"]');
  const magnifierElement = document.querySelector('[data-target="magnifier"]');
  const lensElement = document.querySelector('[data-target="lens"]');

  if (imageElement && magnifierElement && lensElement) {
    new Loupe(imageElement, magnifierElement, lensElement);
  }
});

Step 4: Customize the Magnifier (Optional)

You can customize the zoom level and background image by passing additional parameters to the Loupe:

new Loupe(imageElement, magnifierElement, lensElement, 'path-to-background-image.jpg', 4);

backgroundUrl: (Optional) The URL of the image to use for the background of the magnifier.
zoomLevel: (Optional) The zoom level, where the default is 3.

Step 5: Add Styling

You can add additional styles to the magnifier and lens elements as needed. For example:

[data-target="magnifier"] {
  border-radius: 50%;
  border: 2px solid #000;
  background-repeat: no-repeat;
  background-position: 0 0;
}

[data-target="lens"] {
  border-radius: 50%;
}

Step 6: Run Your Project

After following these steps, your image should have a functional magnifier effect when hovered over.

Example

Here is a basic example to see the package in action:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Magnifier Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div style="position: relative;">
    <img src="your-image.jpg" data-target="image" alt="Zoomable Image" style="width: 100%; height: auto;">
    <div data-target="magnifier" class="opacity-0" style="position: absolute; width: 100px; height: 100px; pointer-events: none;"></div>
    <div data-target="lens" class="opacity-0" style="position: absolute; width: 50px; height: 50px; border: 2px solid #000;"></div>
  </div>

  <script type="module">
    document.addEventListener('DOMContentLoaded', () => {
      const imageElement = document.querySelector('[data-target="image"]');
      const magnifierElement = document.querySelector('[data-target="magnifier"]');
      const lensElement = document.querySelector('[data-target="lens"]');

      if (imageElement && magnifierElement && lensElement) {
        new Loupe(imageElement, magnifierElement, lensElement);
      }
    });
  </script>
</body>
</html>

License

This package is open-source and available under the MIT License.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme