From 8a08d2d9f817bf4cafb2be11ea1272aec24dc7de Mon Sep 17 00:00:00 2001 From: nelabiernat <60930527+nelabiernat@users.noreply.github.com> Date: Mon, 27 Nov 2023 14:09:43 +0100 Subject: [PATCH 01/14] api sample --- samples/javascript-api/README.md | 49 +++++++++++++++ samples/javascript-api/config.yml | 35 +++++++++++ samples/javascript-api/index.html | 100 ++++++++++++++++++++++++++++++ samples/javascript-api/logo.png | Bin 0 -> 200109 bytes samples/javascript-api/script.js | 51 +++++++++++++++ samples/javascript-api/style.css | 35 +++++++++++ 6 files changed, 270 insertions(+) create mode 100644 samples/javascript-api/README.md create mode 100644 samples/javascript-api/config.yml create mode 100644 samples/javascript-api/index.html create mode 100644 samples/javascript-api/logo.png create mode 100644 samples/javascript-api/script.js create mode 100644 samples/javascript-api/style.css diff --git a/samples/javascript-api/README.md b/samples/javascript-api/README.md new file mode 100644 index 0000000..467e11c --- /dev/null +++ b/samples/javascript-api/README.md @@ -0,0 +1,49 @@ +# Product Detail Page - Using FSI TouchZoom & Single Source Imaging + +This readme describes how the product Detail page sample with _FSI TouchZoom_ and _Single Source Imaging_ of _FSI Server_ is achieved. +The aim of the demo is to show how you can easily integrate different sizes and formats of an image by simply changing the Image URL. +It also shows how FSI TouchZoom is used. + +# Using TouchZoom + +In order to display all images with TouchZoom, you only need to add the corresponding script +to the head of your website: + +```html + +``` + +In our example, this is done through the framework, but you can see that the script is loaded when the page is compiled. + +This ensures that FSI TouchZoom is loaded and all images will be displayed in the resolution matching the current magnification. +This way, sharp images on mobile devices are guaranteed. +You can also see this if you resize your browser window or change between different displays. + +# Enabling/ disabling FSI TouchZoom by using CSS classes + +You can also restrict FSI TouchZoom to certain images and enable or disable it via CSS class. +Simply embed an FSI TouchZoom tag somewhere on the page: + +```html +
+``` + +In this example, TouchZoom will only be used for images with the class _zoom_. + +```html + +``` + +You could also use _disableByCSSClass="noZoom"_ for example. + +For all parameters which can be used, please consult the [manual](https://docs.neptunelabs.com/fsi-viewer/latest/fsi-touchzoom). + +## Testing with examples from your own server + +To test the examples with images from your own [FSI Server](https://www.neptunelabs.com/fsi-server/), please first copy the env.yml.dist file to env.yml and adapt the file, then restart the main demo again. diff --git a/samples/javascript-api/config.yml b/samples/javascript-api/config.yml new file mode 100644 index 0000000..837e49c --- /dev/null +++ b/samples/javascript-api/config.yml @@ -0,0 +1,35 @@ +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 +sample: + template: + schema: framework-2023 + components: + menu: + template: data/furniture-menu.yml + highlight: DEAL OF THE DAY + featured: + template: 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 + mapping: + html: "index.html" + js: "script.js" + css: "style.css" +playground: + deploy: true diff --git a/samples/javascript-api/index.html b/samples/javascript-api/index.html new file mode 100644 index 0000000..5a19599 --- /dev/null +++ b/samples/javascript-api/index.html @@ -0,0 +1,100 @@ +Coffee Table, Distressed Oak Effect
++ + + + + + (4664) Ratings +
+Sturdy, classy and reliable.
++ Guaranteed to make your living room look clean and holds all the things you do not want to have out in the + open. +
++ Dispatched in 4 working days +
+Dimensions:
+ +@
z-JZeEFFQFwmgV y
z!wUjJmdkSOCxaiK&`dgcY~w#NRj|WI%2C;e2E@fi*XS;iT4-WqGK=99zG1m9Q7ab~
zpZ%Ekvgq<+(62v)&X=oCmh1-dp(&&*D-|7 ogVGWVs&T)ACMQl%&e&NWRzztwQVEC3v92
z!Eo1QL9|ItK|x8(c|#?9Lzts_0>3nIiErt_pqTN~L}Xty
W7fhP<@00Bt{3A<59yvwIzT5PD^idAZGRv+*ZcL4K!od8+9by%q<>eHS-R(G
z4$cq#vBGC*rhXmD#J3HiM%wXIKk|z4J-HtqG$>>!PqI!f!0h446wQ3u)?#*}A$|
z4AoLt9hs6`V?^3^b34)A^;RsP9C>_^jW3mCwfW{q?lHsQ&T6v&oYASOlv(Ya{#5{J
zDh=yjzuq#r2{nHq!GR_APckc+nNdU&Ir!kfu
T`fXL~m3CAb;f0C^XF4;l@aC^<=Nh+x3B|^a`
zP-qrttcA?kk1L wcKvz$kLE?%Y=fy%1!u`4AUF}w=y`x~kx|2PT|*)Iz`
zE4f?Nol2lmUyF$kU;UCWA}q{W=9tlrOC>%sHeuZP5~b@Tu+c_|`j@bOxI$m>uQd--
zH3+Um{T2=xSl0G{?z}sPqX6vYt&S%*ri#o*R`rP7T-VP2aKZX>xb&OJ7|A<*D|B>H
ze69jBlr@qp7xV=U)7pkP(n7=JkJ=iY`P0V{_CfTHd|c%icN
z8GS