{"_id":"@craftthingy-digital-innovation/cty-interactive-lightbox-zoomer-web","_rev":"3-996eb152d8b3f3236426ab11770a6314","name":"@craftthingy-digital-innovation/cty-interactive-lightbox-zoomer-web","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.1":{"name":"@craftthingy-digital-innovation/cty-interactive-lightbox-zoomer-web","version":"1.0.1","_id":"@craftthingy-digital-innovation/cty-interactive-lightbox-zoomer-web@1.0.1","maintainers":[{"name":"killerking69","email":"alifnurhidayatwork@gmail.com"}],"homepage":"https://github.com/CraftThingy-Digital-Innovation/cty-interactive-lightbox-zoomer-web#readme","bugs":{"url":"https://github.com/CraftThingy-Digital-Innovation/cty-interactive-lightbox-zoomer-web/issues"},"dist":{"shasum":"967874f6936be286d4d214e7bd1fd9ab264d8ba9","tarball":"https://registry.npmjs.org/@craftthingy-digital-innovation/cty-interactive-lightbox-zoomer-web/-/cty-interactive-lightbox-zoomer-web-1.0.1.tgz","fileCount":6,"integrity":"sha512-ioUSwgEM/ZC2iWCmy5ptNeepaXCfT4Rkb+edE9nHkYnVQ7QVKqqb/DbDKnpMkU21TOm3wd2ryc/kngGx4xplkQ==","signatures":[{"sig":"MEQCIEk+00M3L/K+aZ9Qan+ijmkxZTU2aYPJY/PaHEucM1C2AiADMUB2pWPIuNXOioB/6Cb3R3gP4u4alN/NhvnN7wAf4Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":24854},"main":"./dist/cty-interactive-lightbox-zoomer.umd.js","type":"module","module":"./dist/cty-interactive-lightbox-zoomer.es.js","exports":{".":{"import":"./dist/cty-interactive-lightbox-zoomer.es.js","require":"./dist/cty-interactive-lightbox-zoomer.umd.js"}},"gitHead":"3b7eb5964f7b91eab84a97110b97d0fc76d9a7af","scripts":{"build":"vite build"},"_npmUser":{"name":"killerking69","email":"alifnurhidayatwork@gmail.com"},"repository":{"url":"git+https://github.com/CraftThingy-Digital-Innovation/cty-interactive-lightbox-zoomer-web.git","type":"git"},"_npmVersion":"11.6.1","description":"Interactive responsive modal image lightbox with dragging, panning, controls, and wheel zoom.","directories":{},"_nodeVersion":"23.11.0","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.2.0"},"_npmOperationalInternal":{"tmp":"tmp/cty-interactive-lightbox-zoomer-web_1.0.1_1783087286278_0.23894811538612282","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@craftthingy-digital-innovation/cty-interactive-lightbox-zoomer-web","version":"1.0.2","_id":"@craftthingy-digital-innovation/cty-interactive-lightbox-zoomer-web@1.0.2","maintainers":[{"name":"killerking69","email":"alifnurhidayatwork@gmail.com"}],"homepage":"https://github.com/CraftThingy-Digital-Innovation/cty-interactive-lightbox-zoomer-web#readme","bugs":{"url":"https://github.com/CraftThingy-Digital-Innovation/cty-interactive-lightbox-zoomer-web/issues"},"dist":{"shasum":"01f01b0c2d683b750d6a0deaa44a17e839d54556","tarball":"https://registry.npmjs.org/@craftthingy-digital-innovation/cty-interactive-lightbox-zoomer-web/-/cty-interactive-lightbox-zoomer-web-1.0.2.tgz","fileCount":6,"integrity":"sha512-dhTCqWVBfpmz0c+qStVuKVUpRe7hBeX9fV4h7QheJpTW+65PCgPyzw3OPagwLzX8+mZ0jXSC4Q5uzGmiCs/o9w==","signatures":[{"sig":"MEUCICBUZTXIMUuz3N9k3Dl+nl3hHfuBM+lGms/qkFEqV91AAiEA9HiMlcZYQzkMBTkK/aJHBCjBBNlzX1KTWRaEPztZdUY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":25116},"main":"./dist/cty-interactive-lightbox-zoomer.umd.js","type":"module","module":"./dist/cty-interactive-lightbox-zoomer.es.js","exports":{".":{"import":"./dist/cty-interactive-lightbox-zoomer.es.js","require":"./dist/cty-interactive-lightbox-zoomer.umd.js"}},"gitHead":"c8e4638f851c2f7b55175aa03371fb3366986eec","scripts":{"build":"vite build"},"_npmUser":{"name":"killerking69","email":"alifnurhidayatwork@gmail.com"},"repository":{"url":"git+https://github.com/CraftThingy-Digital-Innovation/cty-interactive-lightbox-zoomer-web.git","type":"git"},"_npmVersion":"11.6.1","description":"Interactive responsive modal image lightbox with dragging, panning, controls, and wheel zoom.","directories":{},"_nodeVersion":"23.11.0","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.2.0"},"_npmOperationalInternal":{"tmp":"tmp/cty-interactive-lightbox-zoomer-web_1.0.2_1783090177849_0.05208952075721163","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@craftthingy-digital-innovation/cty-interactive-lightbox-zoomer-web","description":"Interactive responsive modal image lightbox with dragging, panning, controls, and wheel zoom.","version":"1.0.3","license":"SEE LICENSE IN LICENSE","type":"module","repository":{"type":"git","url":"git+https://github.com/CraftThingy-Digital-Innovation/cty-interactive-lightbox-zoomer-web.git"},"bugs":{"url":"https://github.com/CraftThingy-Digital-Innovation/cty-interactive-lightbox-zoomer-web/issues"},"homepage":"https://github.com/CraftThingy-Digital-Innovation/cty-interactive-lightbox-zoomer-web#readme","main":"./dist/cty-interactive-lightbox-zoomer.umd.js","module":"./dist/cty-interactive-lightbox-zoomer.es.js","exports":{".":{"import":"./dist/cty-interactive-lightbox-zoomer.es.js","require":"./dist/cty-interactive-lightbox-zoomer.umd.js"}},"scripts":{"build":"vite build"},"publishConfig":{"access":"public"},"dependencies":{},"devDependencies":{"vite":"^5.2.0"},"_id":"@craftthingy-digital-innovation/cty-interactive-lightbox-zoomer-web@1.0.3","gitHead":"8db6ee07f0df05de651b9d1c28bf94b77f697dda","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-q8ywzqdyEBShKInj21zsDbn2RlyAM4jzrz9L9KektPG6YRg4t7EQkdprNx+Ekgjc9ePTrrtl/odyi56jNjsv7Q==","shasum":"ca9acf4f2f02ac0ccca4b55720b1f4ce51459495","tarball":"https://registry.npmjs.org/@craftthingy-digital-innovation/cty-interactive-lightbox-zoomer-web/-/cty-interactive-lightbox-zoomer-web-1.0.3.tgz","fileCount":6,"unpackedSize":25119,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEamORB1tcEXMuRWVgd8aDlLeGTI3cN7pBRoevI/H4eZAiEA9ldmpRQpPvLKUuS1bLl3shKewheT+MDpfX6Vl8xQXO8="}]},"_npmUser":{"name":"killerking69","email":"alifnurhidayatwork@gmail.com"},"directories":{},"maintainers":[{"name":"killerking69","email":"alifnurhidayatwork@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/cty-interactive-lightbox-zoomer-web_1.0.3_1783146786330_0.14874655062656217"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-03T14:01:26.086Z","modified":"2026-07-04T06:33:06.571Z","1.0.1":"2026-07-03T14:01:26.413Z","1.0.2":"2026-07-03T14:49:38.000Z","1.0.3":"2026-07-04T06:33:06.455Z"},"bugs":{"url":"https://github.com/CraftThingy-Digital-Innovation/cty-interactive-lightbox-zoomer-web/issues"},"homepage":"https://github.com/CraftThingy-Digital-Innovation/cty-interactive-lightbox-zoomer-web#readme","repository":{"type":"git","url":"git+https://github.com/CraftThingy-Digital-Innovation/cty-interactive-lightbox-zoomer-web.git"},"description":"Interactive responsive modal image lightbox with dragging, panning, controls, and wheel zoom.","maintainers":[{"name":"killerking69","email":"alifnurhidayatwork@gmail.com"}],"readme":"# @craftthingy-digital-innovation/cty-interactive-lightbox-zoomer-web\n\nBilingual documentation: [Bahasa Indonesia](#bahasa-indonesia) | [English](#english)\n\n---\n\n## Bahasa Indonesia\n\nLibrary 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.\n\n### Fitur Utama\n- 🔍 **Zooming Presisi:** Perbesaran menggunakan tombol eksternal atau langsung menggunakan scroll mousewheel.\n- 🖐️ **Panning Smooth:** Menggeser foto dengan drag mouse (desktop) atau geseran sentuh/swipe (touch mobile).\n- ⚙️ **Event Automation:** Mengikat tombol kontrol close/zoom/reset eksternal secara otomatis dan menangani siklus pelepasan memori.\n\n### Instalasi\n```bash\nnpm install @craftthingy-digital-innovation/cty-interactive-lightbox-zoomer-web\n```\n\n### Cara Penggunaan\n```javascript\nimport { InteractiveLightboxZoomer } from '@craftthingy-digital-innovation/cty-interactive-lightbox-zoomer-web';\n\nconst zoomer = new InteractiveLightboxZoomer({\n  overlayElement: '#lightbox-overlay', // Element overlay modal\n  modalElement: '#lightbox', // Container dialog modal\n  imageContainer: '#lightbox-img-container', // Pembungkus gambar (area drag/scroll)\n  imageElement: '#lightbox-image', // Elemen gambar <img>\n  btnClose: '#btn-close-lightbox', // Tombol tutup\n  \n  // Tombol zoom\n  btnZoomIn: '#btn-zoom-in',\n  btnZoomOut: '#btn-zoom-out',\n  btnZoomReset: '#btn-zoom-reset',\n  \n  // Konfigurasi zoom\n  minScale: 0.5,\n  maxScale: 4.0,\n  zoomStep: 0.25\n});\n\n// Tampilkan gambar tertentu di dalam modal\nzoomer.open('https://domain-anda.com/path/foto.jpg');\n\n// Hancurkan listener jika tidak digunakan lagi\nzoomer.destroy();\n```\n\n---\n\n## English\n\nA 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.\n\n### Key Features\n- 🔍 **Precision Zooming:** Smooth scales via external click controls or intuitive scroll-wheel gestures.\n- 🖐️ **Fluid Panning:** Drag-to-pan on desktops and touch-swipe gestures on mobile devices.\n- ⚙️ **Event Binding Automation:** Automatically attaches event control hooks to specified DOM elements.\n\n### Installation\n```bash\nnpm install @craftthingy-digital-innovation/cty-interactive-lightbox-zoomer-web\n```\n\n### Usage\n```javascript\nimport { InteractiveLightboxZoomer } from '@craftthingy-digital-innovation/cty-interactive-lightbox-zoomer-web';\n\nconst zoomer = new InteractiveLightboxZoomer({\n  overlayElement: '#lightbox-overlay',\n  modalElement: '#lightbox',\n  imageContainer: '#lightbox-img-container',\n  imageElement: '#lightbox-image',\n  btnClose: '#btn-close-lightbox',\n  btnZoomIn: '#btn-zoom-in',\n  btnZoomOut: '#btn-zoom-out',\n  btnZoomReset: '#btn-zoom-reset'\n});\n\nzoomer.open('https://your-domain.com/path/image.jpg');\nzoomer.destroy();\n```\n\n## License\nLicensed under Public-Source Corporate Royalty License (PSCRL). See [LICENSE](./LICENSE) for details.\n","readmeFilename":"README.md","license":"SEE LICENSE IN LICENSE"}