From bb3c1a71e18881ad2f8ead19519b1e453bfffa13 Mon Sep 17 00:00:00 2001 From: Dora Jurcevic Date: Wed, 3 Jul 2024 15:20:14 +0200 Subject: [PATCH] add: xlarge img added to model and to zoom --- components/product/ImageList.vue | 1 + models/ProductImageSet.ts | 2 ++ plugins/medium-zoom.client.ts | 6 +++++- 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/components/product/ImageList.vue b/components/product/ImageList.vue index f346bcbc..ffc37872 100644 --- a/components/product/ImageList.vue +++ b/components/product/ImageList.vue @@ -18,6 +18,7 @@ quality="80" :placeholder="img(image.large?.src, { h: 548, f: 'webp', blur: 2, q: 10 })" format="webp" + :data-zoom-src="image.xlarge?.src" /> diff --git a/models/ProductImageSet.ts b/models/ProductImageSet.ts index b8223e75..f9e24b70 100644 --- a/models/ProductImageSet.ts +++ b/models/ProductImageSet.ts @@ -4,11 +4,13 @@ export class ProductImageSet extends Model { small: ProductImage | null medium: ProductImage | null large: ProductImage | null + xlarge: ProductImage | null constructor(data: any) { super(data) this.small = data && data.small ? new ProductImage(data.small) : null this.medium = data && data.medium ? new ProductImage(data.medium) : null this.large = data && data.large ? new ProductImage(data.large) : null + this.xlarge = data && data.xlarge? new ProductImage(data.xlarge) : null } } diff --git a/plugins/medium-zoom.client.ts b/plugins/medium-zoom.client.ts index fc4a37ea..fe27882c 100644 --- a/plugins/medium-zoom.client.ts +++ b/plugins/medium-zoom.client.ts @@ -3,7 +3,11 @@ import mediumZoom, { Zoom } from "medium-zoom"; export default defineNuxtPlugin((nuxtApp) => { const selector = ".image-zoom"; - const zoom: Zoom = mediumZoom(selector, { background: "#0f0f0f87" }); + const innerWidth = window.innerWidth + const zoom: Zoom = mediumZoom(selector, { + margin: innerWidth < 640 ? 45 : innerWidth < 1024 ? 24 : innerWidth < 1536 ? 96 : 150, + background: "#0f0f0f87" + }); // (re-)init for newly rendered page, also to work in SPA mode (client-side routing) nuxtApp.hook("page:finish", () => {