Api sample

.github/workflows/publish-pages.yml

@@ -29,8 +29,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'
@@ -39,11 +39,11 @@ jobs:
           npm install
           npm run build
       - name: Setup Pages
-        uses: actions/configure-pages@v3
+        uses: actions/configure-pages@v4
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-pages-artifact@v3
         with:
-          path: 'dist'
+          path: 'build'
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4

.github/workflows/test-on-pull.yml

@@ -10,8 +10,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'

.gitignore

@@ -9,6 +9,7 @@ yarn.lock
 
 node_modules
 dist
+build
 .cache
 
 env.yml

README.md

@@ -5,14 +5,14 @@
 [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)][License]
 
 
-FSI QuickZoom is an HTML5 and Javascript based tool adding image zoom to desktop and mobile browser.
+FSI QuickZoom is a tool for adding image zoom to desktop and mobile browser.
 When hovering over a single source image provided by FSI Server, the part of the image the cursor is currently pointing at will be displayed enlarged in a zoom window next to the original image.
 The real-time scaling capabilities of the image server are used to achieve pixel-perfect results.
 FSI QuickZoom can be created and controlled as a simple HTML tag and/or via JavaScript API.
 
 This repository contains examples on how to use and build your own applications.
 
-![Project Image](project.apng)
+[![Project Image](project.apng)][GHPages]
 
 ## Getting Started
 

package.json

@@ -3,7 +3,7 @@
     "name": "NeptuneLabs GmbH",
     "url": "https://www.neptunelabs.com/"
   },
-  "version": "23.11.24",
+  "version": "24.03.19",
   "homepage": "https://www.neptunelabs.com/fsi-quickzoom",
   "repository": {
     "type": "git",
@@ -12,15 +12,14 @@
   "license": "Apache-2.0",
   "private": true,
   "engines": {
-    "node": ">=16.0.0",
-    "npm": ">=6.0.0"
+    "node": ">=18.0.0",
+    "npm": ">=8.0.0"
   },
-  "devDependencies": {
-    "@neptunelabs/fsi-samples-framework": "^1.1.0",
-    "prettier": "^3.0.1"
+  "dependencies": {
+    "@neptunelabs/fsi-samples-framework": "^2.0.18"
   },
   "scripts": {
-    "start": "start-sample",
-    "build": "start-sample --build"
+    "start": "workbench",
+    "build": "workbench --build"
   }
 }

project.yml

@@ -2,5 +2,6 @@
 title: 'FSI QuickZoom'
 projectURL: https://www.neptunelabs.com/fsi-quickzoom/
 originAssetPath: quickzoom
+schema: overview-taupe
 playground:
   stackblitz: fsi-quickzoom-samples

samples/fly-out-zoom/config.yml

@@ -6,31 +6,23 @@ overview:
     - Hover zoom
     - Enabling hover zoom by CSS class
   order: 2
+schema: bootstrap-taupe
 sample:
-  template:
-    schema: framework-2023
-    components:
-      menu:
-        template: data/furniture-menu.yml
-      featured:
-        template: data/furniture-featured.yml
-      highlight: DEAL OF THE DAY
-      footer:
-        credits:
-          photos:
-            author: various artists
-            link: https://pixabay.com/
-            platform: Pixabay
-          viewer:
-            link: https://www.neptunelabs.com/fsi-quickzoom/
-      fsi:
-        touchZoom: true
-        quickZoom: true
-      bootstrap:
-        icons: false
-  mapping:
-    html: "index.html"
-    css: "style.css"
-    js: "script.js"
-playground:
-  deploy: true
+  menu:
+    data: furniture-menu.yml
+  featured:
+    data: furniture-featured.yml
+  highlight: DEAL OF THE DAY
+  footer:
+    credits:
+      photos:
+        author: various artists
+        link: https://pixabay.com/
+        platform: Pixabay
+      viewer:
+        link: https://www.neptunelabs.com/fsi-quickzoom/
+  fsi:
+    touchZoom: true
+    quickZoom: true
+  bootstrap:
+    icons: false

samples/in-place-zoom/config.yml

@@ -6,31 +6,23 @@ overview:
     - In place image zoom
     - Enabling zoom by CSS class
   order: 1
+schema: bootstrap-taupe
 sample:
-  template:
-    schema: framework-2023
-    components:
-      menu:
-        template: data/furniture-menu.yml
-      featured:
-        template: data/furniture-featured.yml
-      highlight: DEAL OF THE DAY
-      footer:
-        credits:
-          photos:
-            author: various artists
-            link: https://pixabay.com/
-            platform: Pixabay
-          viewer:
-            link: https://www.neptunelabs.com/fsi-quickzoom/
-      fsi:
-        touchZoom: true
-        quickZoom: true
-      bootstrap:
-        icons: false
-  mapping:
-    html: "index.html"
-    css: "style.css"
-    js: "script.js"
-playground:
-  deploy: true
+  menu:
+    data: furniture-menu.yml
+  featured:
+    data: furniture-featured.yml
+  highlight: DEAL OF THE DAY
+  footer:
+    credits:
+      photos:
+        author: various artists
+        link: https://pixabay.com/
+        platform: Pixabay
+      viewer:
+        link: https://www.neptunelabs.com/fsi-quickzoom/
+  fsi:
+    touchZoom: true
+    quickZoom: true
+  bootstrap:
+    icons: false

samples/javascript-api/README.md

@@ -0,0 +1,109 @@
+# JS API Sample
+
+FSI QuickZoom contains an extensive JS API with methods and callbacks that you can use.
+You can find [an overview of all available parameters in the corresponding documentation](https://docs.neptunelabs.com/docs/fsi-quickzoom/js-api/public-methods).
+
+This example is a simple demonstration of how to use these methods and callbacks.
+
+To display zoom with FSI QuickZoom, all you need to do is add the following script to the top of your web page:
+
+```html
+<script
+  src='https://fsi.domain.tld/fsi/viewer/applications/quickzoom/js/fsiquickzoom.js'
+</script>
+```
+This will ensure that the FSI QuickZoom is loaded.
+
+For this sample, we will only have static images at the beginning, as we only want to initalize QuickZoom in place of an image when a button is clicked.
+This means that the viewer is initialised by JavaScript.
+
+To do this, we have created this part in the body:
+
+```html
+<fsi-quickzoom
+  style="display: none"
+  inPlaceZoom="true"
+  magnification="2.5"
+  enableByCSSClass="useQuickZoom"
+  autoZoomDimension="true"
+></fsi-quickzoom>
+ <div class="col productContainer" id="productContainer">
+  <img class="zoom" id="zoomImg" src="{{&fsi.server}}/{{&fsi.context}}/static/assets/samples/furniture/hepburn-big.jpg" width="600" height="600" alt="">
+  <button type="button" id="zoomBtn" class="btn btn-lg btn-outline-dark">Show Zoom</button>
+</div>
+```
+
+It's important to set `enableByCSSClass="useQuickZoom"` as the CSS class is set later on.
+`productContainer` is the div that contains all the elements.
+`zoomImg` is the image that will be displayed on load and replaced by the viewer.
+The `zoomBtn` button is used to switch from the image to the viewer.
+
+In the corresponding `style.css` the button is placed above the image div with `z-index`:
+
+```css
+.productContainer .btn {
+  position: absolute;
+  z-index: 15;
+}
+```
+
+The switch on button click is achieved via JS in the corresponding `script.js`:
+
+```js
+document.addEventListener('DOMContentLoaded', () => {
+  let img
+  imgCounter = 0;
+  document.getElementById('zoomBtn').addEventListener('click', () => {
+    if (imgCounter === 0) {
+      img =  '{{&fsi.server}}/{{&fsi.context}}/server?type=image&source=images/samples/ssi/furniture/home-7473734.jpg&width=600';
+    }
+    else if (imgCounter === 1) {
+      img =  '{{&fsi.server}}/{{&fsi.context}}/server?type=image&source=images/samples/ssi/furniture/home-7473732.jpg&width=600';
+    } else {
+      img =  '{{&fsi.server}}/{{&fsi.context}}/server?type=image&source=images/samples/ssi/furniture/home-7531458.jpg&width=600';
+    }
+
+    addMyImagesToTheDom(); // add your images here
+    const instance = $FSI.quickZoom.scanForNewImages()
+    document.getElementById('zoomBtn').style.display = 'none'
+
+    function addMyImagesToTheDom() {
+      const ele = document.getElementById("zoomImg");
+      ele.setAttribute("src", img);
+      ele.classList.add('useQuickZoom')
+    }
+
+  })
+
+});
+
+function changeImage(buttonID) {
+  let curImage = document.getElementById('zoomImg');
+  switch (buttonID) {
+    case "0":
+      img =  '{{&fsi.server}}/{{&fsi.context}}/server?type=image&source=images/samples/ssi/furniture/home-7473734.jpg&width=600';
+      imgCounter = 0;
+      break
+    case "1":
+      img = '{{&fsi.server}}/{{&fsi.context}}/server?type=image&source=images/samples/ssi/furniture/home-7473732.jpg&width=600';
+      imgCounter = 1;
+      break
+    case "2":
+      img = '{{&fsi.server}}/{{&fsi.context}}/server?type=image&source=images/samples/ssi/furniture/home-7531458.jpg&width=600';
+      imgCounter = 2;
+      break
+    default:
+      img = '{{&fsi.server}}/{{&fsi.context}}/server?type=image&source=images/samples/ssi/furniture/home-7531464.jpg&width=600';
+  }
+  curImage.src = img;
+}
+
+```
+
+The `imgCounter` ensures the correct image is loaded onClick.
+The function `addMyImagesToTheDom()` adds the class `useQuickZoom` to the id `zoomImg`.
+A click on the `zoomBtn` element will scan for now images with the method `$FSI.quickZoom.scanForNewImages()`. (see [documentation](https://docs.neptunelabs.com/docs/fsi-quickzoom/js-api/callbacks#scanfornewimages))
+Since we set the class which is listed in the parameter `enableByCSSClass`, images will now be loaded with QuickZoom.
+
+The function `changeImage(buttonID)` switches the images corresponding to the thumbnails.
+

samples/javascript-api/config.yml

@@ -0,0 +1,27 @@
+overview:
+  title: JavaScript API
+  image: logo.png
+  description: Learn how to use the JavaScript QuickZoom API with a simple demo.
+  order: 3
+  facts:
+    - JS built FSI QuickZoom
+    - JS API Demonstration
+schema: bootstrap-taupe
+sample:
+  menu:
+    data: furniture-menu.yml
+  highlight: DEAL OF THE DAY
+  featured:
+    data: furniture-featured.yml
+  footer:
+    credits:
+      photos:
+        author: various artists
+        link: https://pixabay.com/
+        platform: Pixabay
+      viewer:
+        link: https://www.neptunelabs.com/fsi-touchzoom/
+  fsi:
+    quickZoom: true
+  bootstrap:
+    icons: true