參數與選項

在你將 Zoomist 引入你的專案之後，就能透過 Zoomist 函式（類別）將其實例化.

實例

Zoomist 函式（類別）可傳入兩個參數，分別為 zoomistElement 和 zoomistOptions，並且將回傳 Zoomist 實例。

範例：

const zoomist = new Zoomist('.zoomist-container', {
  maxScale: 4
})

在將 Zoomist 實例化之後, 你就能從 Zoomist 實例上使用與存取其方法和屬性。而且你也能在 zoomistElement 的 zoomist 屬性 找到此實例並運用它:

範例：

const zoomist = new Zoomist('.zoomist-container')


zoomist.zoom(0.1)
document.querySelector('.zoomist-container').zoomist.zoom(0.1)

參數

Zoomist 函式（類別）能傳入兩個參數：

參數型別描述
zoomistElementHTMLElement | string第一個參數，必要。 Zoomist 容器元素對應的 HTMLElement 或 string (CSS Selector)。
zoomistOptionsobject第二個參數，選填。 一個 Zoomist 選項的 object。

第二個參數 zoomistOptions 為選填，所以你能簡單地初始化 Zoomist 像是：

new Zoomist('.zoomist-container')
// 或
const zoomistElement = document.querySelector('.zoomist-container')
new Zoomist(zoomistElement)

而 Zoomist 將會把這些選項設為預設值。

選項

所有可用選項及其預設值：

名稱型別預設描述
boundsbooleantrue

設定 .zoomist-image 是否能被縮放或拖曳出邊界。

draggablebooleantrue

設定 .zoomist-image 是否能被拖曳。

wheelablebooleantrue

設定當使用滑鼠滾輪時 .zoomist-image，是否能被縮放。

pinchablebooleantrue

設定 .zoomist-image 是否能使用手勢縮放。（僅適用於行動裝置）

minScalenumber1

設定縮放的最小值，必須小於 initScale。

若設定 bounds 為 true 而且 minScale < 1, minScale 將會自動地被設定為 1。

maxScalenumber10

設定縮放的最大值，必須大於 minScale。

initScalenumber | nullnull

設定縮放的初始值。必須大於 minScale 且小於 maxScale。
若將其設為 null，則會以 minScale 作為 initScale的值。

zoomRationumber0.1

設定縮放時的比率。

disableDraggingClassstring'zoomist-not-draggable'

元素擁有這個 class 時，將不會被拖曳。

disableWheelingClassstring'zoomist-not-wheelable'

當滑鼠滾輪作用在擁有這個 class 的元素時，將不會被縮放。

dragReleaseOnBoundsbooleanfalse

如果設置為 true，且當 .zoomist-image 在邊界時，啟用釋放觸控事件以允許進一步的頁面滾動。

只作用在擁有 touch events 的裝置，並且 bounds 設定為 true 時。

wheelReleaseOnMinMaxbooleanfalse

如果設置為 true，且當 .zoomist-image 剛好處於 mixScale 或 maxScale 時，啟用釋放滾輪事件以允許進一步的頁面滾動。

只作用在擁有 wheel events 的裝置。

sliderboolean | SliderOptions

Zoomist 內建的滑桿工具。
設定成 true 可以快速的啟用它。（查看更多 slider 選項）

zoomerboolean | ZoomerOptions

Zoomist 內建的縮放按鈕工具。
設定成 true 可以快速的啟用它。（查看更多 zoomer 選項）

範例：

new Zoomist('.zoomist-container', {
  maxScale: 4,
  initScale: 2,
  slider: true
})

滑桿工具

Zoomist 內建一個簡單的滑桿工具供你使用。你可以將選項 slider 設定成 true， Zoomist 將會在 zoomistElement 中生成一個水平的滑桿工具。或是你能透過以下的 slider 選項客製化你的滑桿工具。

所有的滑桿工具選項：

名稱型別預設描述
elHTMLElement | string | nullnull

接收一個 HTMLElement 或 string (CSS Selector) 並將其作為滑桿工具的容器。

direction'horizontal' | 'vertical''horizontal'

設定滑桿工具的方向為水平或垂直。

範例：

index.html
<!-- custom slider -->
<div class="custom-zoomist-slider"></div>
<!-- zoomist -->
<div class="zoomist-container">
  <div class="zoomist-wrapper">
    <div class="zoomist-image">
      <!-- your content -->
    </div>
  </div>
</div>
main.js
new Zoomist('.zoomist-container', {
  slider: {
    el: '.custom-zoomist-slider',
    direction: 'vertical'
  }
})

若欲客製化滑桿工具的樣式，查看 CSS 變數。

縮放按鈕

Zoomist 也為你提供一些縮放工具，像是 放大按鈕、縮小按鈕、重置按鈕。你能將選項 zoomer 設定成 true， Zoomist 將會在 zoomistElement 內生成這些按鈕。或是你能透過以下的 zoomer 選項客製化你的縮放按鈕。

所有縮放按鈕的選項：

名稱型別預設描述
elHTMLElement | string | nullnull

定義縮放按鈕的容器。

inElHTMLElement | string | nullnull

定義你的放大按鈕。
若將其設定為關鍵字 .zoomist-zoomer-in, Zoomist 將會自動生產一個按鈕給你。

outElHTMLElement | string | nullnull

定義你的縮小按鈕。
若將其設定為關鍵字 .zoomist-zoomer-out, Zoomist 將會自動生產一個按鈕給你。

resetElHTMLElement | string | nullnull

定義你的重置按鈕。
若將其設定為關鍵字 .zoomist-zoomer-reset, Zoomist 將會自動生產一個按鈕給你。

disabledClassstring | false | null'zoomist-zoomer-disabled'

設定禁用時的 class。
當縮放值到達 maxScale 時，inEl 會被加上此 class；當縮放值到達 minScale 時，outEl 會被加上此 class；當縮放值為 initScale 時，resetEl 會被加上此 class。

範例：

index.html
<!-- custom zoomer -->
<div class="custom-zoomist-zoomer">
  <button class="custom-zoomer-in">+</button>
  <button class="custom-zoomer-out">-</button>
</div>
<!-- zoomist -->
<div class="zoomist-container">
  <div class="zoomist-wrapper">
    <div class="zoomist-image">
      <!-- your content -->
    </div>
  </div>
</div>
main.js
new Zoomist('.zoomist-container', {
  zoomer: {
    inEl: '.custom-zoomer-in',
    outEl: '.custom-zoomer-out'
  }
})

若欲客製化縮放按鈕的樣式，查看 CSS 變數。