Basic usage

安裝 Zoomist 之後，僅需幾個步驟便能建立一個 Zoomist 應用 :

新增 Zoomist HTML layout

在 HTML 中加入 Zoomist layout:

index.html
<!-- zoomist-container -->
<div class="zoomist-container">
  <!-- zoomist-wrapper is required -->
  <div class="zoomist-wrapper">
    <!-- zoomist-image is required -->
    <div class="zoomist-image">
      <!-- you can add anything you want to zoom here. -->
      <img src="..." />
    </div>
  </div>
</div>

客製化 Zoomist 樣式

你可能會想客製化屬於你的 Zoomist 樣式 :

customize.css
.zoomist-container {
  width: 100%;
  max-width: 600px;
}


.zoomist-image {
  width: 100%;
  aspect-ratio: 1;
}


.zoomist-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

實例化 Zoomist

最後, 在你的 JS 檔案中將其實例化 :

main.js
import Zoomist from 'zoomist'


new Zoomist('.zoomist-container', {
  // Optional parameters
  maxScale: 4,
  bounds: true,
  // if you need slider
  slider: true,
  // if you need zoomer
  zoomer: true
})