A Image Zoomer For Eshop Website.Saving Your Time...
npm install vue-product-zoom
import ProductZoomer from "vue-product-zoom"
Vue.use(ProductZoomer)
<ProductZoomer
:base-images="images"
:base-zoomer-options="zoomerOptions"
@choosenImage="choosenImageHandler"
@previewBoxClicked="previewBoxClickedHandler"
/>
{
{
"thumbs": // optional, if not present will use normal_size instead
[
{"id":"unique id", "url": "image url"},
{"id":"unique id", "url": "image url"}
]
},
{
"normal_size": // required
[
{"id":"unique id", "url": "image url"},
{"id":"unique id", "url": "image url"}
]
},
{
"large_size": //optional, if not present will use normal_size instead
[
{"id":"unique id", "url": "image url"},
{"id":"unique id", "url": "image url"}
]
}
}
{
zoomFactor: 3, // scale for zoomer
pane: "pane", // three type of pane ["pane", "container-round", "container"]
hoverDelay: 300, // how long after the zoomer take effect
namespace: "zoomer", // add a namespace for zoomer component, useful when on page have mutiple zoomer
move_by_click:false // move image by click thumb image or by mouseover
scroll_items: 5, // thumbs for scroll
choosed_thumb_border_color: "#bbdefb", // choosed thumb border color
scroller_button_style: "line",
scroller_position: "left",
zoomer_pane_position: "right"
}
π€ Raymond Cheng
-
Twitter: @akulubala
-
Github: @akulubala
-
Fixed for Nuxt (thsnyzkn)
-
Edited by (@yajinn)