@craftthingy-digital-innovation/cty-interactive-lightbox-zoomer-web

Bilingual documentation: Bahasa Indonesia | English

Bahasa Indonesia

Library client-side JavaScript modular untuk menangani dialog modal pratinjau gambar (Lightbox) lengkap dengan fitur interaktif perbesaran (zoom in/out/reset/mousewheel) dan geser gambar (panning drag) secara lancar di perangkat desktop maupun mobile.

Fitur Utama

• 🔍 Zooming Presisi: Perbesaran menggunakan tombol eksternal atau langsung menggunakan scroll mousewheel.
• 🖐️ Panning Smooth: Menggeser foto dengan drag mouse (desktop) atau geseran sentuh/swipe (touch mobile).
• ⚙️ Event Automation: Mengikat tombol kontrol close/zoom/reset eksternal secara otomatis dan menangani siklus pelepasan memori.

Instalasi

npm install @craftthingy-digital-innovation/cty-interactive-lightbox-zoomer-web

Cara Penggunaan

import { InteractiveLightboxZoomer } from '@craftthingy-digital-innovation/cty-interactive-lightbox-zoomer-web';

const zoomer = new InteractiveLightboxZoomer({
  overlayElement: '#lightbox-overlay', // Element overlay modal
  modalElement: '#lightbox', // Container dialog modal
  imageContainer: '#lightbox-img-container', // Pembungkus gambar (area drag/scroll)
  imageElement: '#lightbox-image', // Elemen gambar <img>
  btnClose: '#btn-close-lightbox', // Tombol tutup
  
  // Tombol zoom
  btnZoomIn: '#btn-zoom-in',
  btnZoomOut: '#btn-zoom-out',
  btnZoomReset: '#btn-zoom-reset',
  
  // Konfigurasi zoom
  minScale: 0.5,
  maxScale: 4.0,
  zoomStep: 0.25
});

// Tampilkan gambar tertentu di dalam modal
zoomer.open('https://domain-anda.com/path/foto.jpg');

// Hancurkan listener jika tidak digunakan lagi
zoomer.destroy();

English

A modular client-side JavaScript library to manage preview modal dialogs (Lightboxes) featuring smooth zoom (in/out/reset/wheel) and panning (drag/swipe) controls on both desktop and mobile viewports.

Key Features

• 🔍 Precision Zooming: Smooth scales via external click controls or intuitive scroll-wheel gestures.
• 🖐️ Fluid Panning: Drag-to-pan on desktops and touch-swipe gestures on mobile devices.
• ⚙️ Event Binding Automation: Automatically attaches event control hooks to specified DOM elements.

Installation

npm install @craftthingy-digital-innovation/cty-interactive-lightbox-zoomer-web

Usage

import { InteractiveLightboxZoomer } from '@craftthingy-digital-innovation/cty-interactive-lightbox-zoomer-web';

const zoomer = new InteractiveLightboxZoomer({
  overlayElement: '#lightbox-overlay',
  modalElement: '#lightbox',
  imageContainer: '#lightbox-img-container',
  imageElement: '#lightbox-image',
  btnClose: '#btn-close-lightbox',
  btnZoomIn: '#btn-zoom-in',
  btnZoomOut: '#btn-zoom-out',
  btnZoomReset: '#btn-zoom-reset'
});

zoomer.open('https://your-domain.com/path/image.jpg');
zoomer.destroy();

License

Licensed under Public-Source Corporate Royalty License (PSCRL). See LICENSE for details.