Product Gallery
Las fotos del producto: una imagen principal, una tira de miniaturas y la vista a tamaño completo.
Las miniaturas son un tablist de verdad — las flechas se mueven entre ellas y la tira entera es una sola parada de tabulador. Elegir una variación enciende su foto, sin que ninguno de los dos componentes sepa del otro.
Props: miniaturas sí o no y dónde van, abrir las imágenes a tamaño completo, el marco, y de qué producto leer.
Props
| Prop | Tipo | Por defecto | Qué hace |
|---|---|---|---|
| Thumbnails | elección: below, left, right | below | Dónde va la tira. Al lado de la imagen se pliega debajo en un contenedor estrecho, así que una ficha a dos columnas sigue funcionando en un móvil. |
| Show the thumbnail strip | sí / no | on | Apagado deja sólo la imagen principal — lo que quiere una tarjeta, donde una tira de cinco miniaturas es más grande que la tarjeta. |
| Open images full size | sí / no | on | Añade un botón que abre la foto a su tamaño original, con las flechas para moverse entre fotos y Escape para salir. |
| Frame → Aspect ratio | texto | 1 | La forma de la imagen principal: 1, 4/5 o 3/2. La foto se encaja entera dentro, así que la caja no cambia de alto cuando alguien elige otra. |
| Frame → Thumbnail size | texto | 4.5rem | |
| Frame → Corner radius | texto | var(--fe-woo-radius, 0.75rem) | |
| Colours → Frame background | texto | var(--fe-woo-panel, #f3f4f6) | |
| Colours → Selected thumbnail | texto | var(--fe-woo-accent, #111827) | |
| Colours → Border | texto | var(--fe-woo-border, #d1d5db) | |
| Product | texto | {this.fecommerce.id} | Sin tocarlo sigue al producto que se muestra, que es lo que quiere una plantilla de producto. Dentro de un bucle sigue al producto de cada tarjeta. |
| First image | texto | {this.featuredImage} | Lo pinta el servidor, para que la página enseñe el producto antes de que corra ningún script y para que el navegador empiece a descargarla ya. El runtime la sustituye por la foto que se elija; no lo toques salvo que la primera imagen deba ser otra que la destacada. |
| First image alt text | texto | {this.title} | Sólo para ese primer pintado. En cuanto el runtime arranca, cada foto usa el texto alternativo de su propio adjunto, que es donde una tienda debería escribirlo. |
Sus variables propias
| Variable | Por defecto | Qué controla |
|---|---|---|
--fe-woo-gallery-selected | var(--fe-woo-accent, #111827) | El contorno de la miniatura que se está viendo. |
--fe-woo-gallery-ratio | 1 | La forma de la imagen principal — 1, 4/5, 3/2. La foto se encaja entera dentro, así que la caja no cambia de alto. |
--fe-woo-gallery-thumb-size | 4.5rem | Cuánto mide cada miniatura. |
--fe-woo-gallery-thumb-ratio | 1 | Su forma, independiente de la de la imagen principal. |
--fe-woo-gallery-columns | repeat(auto-fill, minmax(var(--fe-woo-gallery-thumb-size, 4.5rem), 1fr)) | El grid-template-columns entero de la tira, si el ajuste automático no es lo que quieres. |
--fe-woo-gallery-control-bg | var(--fe-woo-surface, #ffffff) | Los botones que flotan sobre la foto: tamaño completo y las flechas. |
--fe-woo-gallery-control-color | var(--fe-woo-color, #111827) | Su símbolo. |
--fe-woo-gallery-backdrop | rgb(17 24 39 / 80%) | Lo que oscurece la página detrás de la vista a tamaño completo. |
--fe-woo-gallery-swap | 240ms | Lo que tarda una foto en cambiar. |
--fe-woo-gallery-swap-zoom | 300ms | Lo que dura el zoom de ese cambio. |
--fe-woo-gallery-swap-shift | 100% | Cuánto se desplaza la foto que sale. |