วิธีการติดตั้งและใช้งาน Medium Zoom ใน Nuxt 3

วันนี้จะมาแนะนำวิธีการติดตั้ง Library นึงครับซึ่งจะทำให้รูปภายในเว็บไซต์ของเรามีลูกเล่นเหมือนกับรูปที่อยู่ภายในเว็บไซต์ Medium.com ครับ อยากรู้ว่าเป็นยังไงลองคลิกที่รูปด้านบนได้เลยครับ 👆

วิธีการติดตั้ง

1. ติดตั้ง Library ดังกล่าว

npm install medium-zoom
หรือ
yarn add medium-zoom

2. สร้าง Folder และ File Plugins

plugins\medium-zoom.client.ts

# เติม .client.ts เพื่อกำหนดว่า plugins นี้เป็นของฝั่ง client อย่างเดียวนะครับ

3. นำ Source Code ไปวางภายในไฟล์ดังกล่าวได้เลยครับ

import { defineNuxtPlugin } from '#app'
import mediumZoom, { Zoom } from 'medium-zoom'

export default defineNuxtPlugin((nuxtApp) => {
  const selector = '.image-zoomable'
  const zoom: Zoom = mediumZoom(selector, {})

  nuxtApp.hook('page:finish', () => {
    zoom.detach(selector).attach(selector)
  })

  nuxtApp.provide('mediumZoom', zoom)
})

4. วิธีการใช้งาน

ใช้กับ <img />

<img src="/images/logo.jpeg" alt="logo" class="image-zoomable" />

# เพิ่ม "image-zoomable" เข้าไปใน class ได้เลย

ใช้กับ <nuxt-img />

<nuxt-img
    src="/images/logo.jpeg"
    alt="logo"
    class="image-zoomable"
/>

# ซึ่งเป็นการเติม class เช่นเดียวกันครับ

References

• Medium Zoom