akulubala / Vue Product Zoomer
Licence: mit
Zoom Prodct Image, useful for e-shop website
Stars: ✭ 248
Projects that are alternatives of or similar to Vue Product Zoomer
Vue Parallax
🌌 Vue.js component for parallax image scroll effects
Stars: ✭ 569 (+129.44%)
Mutual labels: image, scrolling, vuejs2
React Image Magnify
A responsive image zoom component designed for shopping sites.
Stars: ✭ 391 (+57.66%)
Mutual labels: product, image, zoom
React Product Card
Animated Product Card with the help of React and SCSS (PWA)
Stars: ✭ 116 (-53.23%)
Mutual labels: product, responsive
Image Focus
A dependency free utility for cropping images based on a focus point ~2.13kB gzipped
Stars: ✭ 134 (-45.97%)
Mutual labels: image, responsive
Pd Select
vue components ,like ios 3D picker style,vue 3d 选择器组件,3D滚轮
Stars: ✭ 101 (-59.27%)
Mutual labels: scrolling, vuejs2
Zoomy
Adds seamless scrollView and instagram like zooming to UIImageViews in any view hierarchy.
Stars: ✭ 130 (-47.58%)
Mutual labels: image, zoom
Jekyll Cloudinary
Jekyll plugin adding a Liquid tag for Cloudinary, for better responsive images
Stars: ✭ 79 (-68.15%)
Mutual labels: image, responsive
Atgmediabrowser
Image slide-show viewer with multiple predefined transition styles, with ability to create new transitions with ease.
Stars: ✭ 186 (-25%)
Mutual labels: image, zoom
Imageviewer
A simple and customizable Android full-screen image viewer 一个简单且可自定义的Android全屏图像浏览器
Stars: ✭ 1,889 (+661.69%)
Mutual labels: image, zoom
V Bar
The virtual responsive crossbrowser scrollbar component for VueJS 2x
Stars: ✭ 216 (-12.9%)
Mutual labels: scrolling, vuejs2
Imgnotes
Extension of the jQuery imgViewer plugin to add markers and notes to the image
Stars: ✭ 98 (-60.48%)
Mutual labels: image, responsive
React Image Zoom
React component for desktop browsers for image zoom on mouse hover
Stars: ✭ 97 (-60.89%)
Mutual labels: image, zoom
React Responsive Picture
A future-proof responsive image component that supports latest Picture specification
Stars: ✭ 91 (-63.31%)
Mutual labels: image, responsive
Stfalconimageviewer
A simple and customizable Android full-screen image viewer with shared image transition support, "pinch to zoom" and "swipe to dismiss" gestures
Stars: ✭ 1,734 (+599.19%)
Mutual labels: image, zoom
Medium Zoom
🔎🖼 A JavaScript library for zooming images like Medium
Stars: ✭ 2,799 (+1028.63%)
Mutual labels: image, zoom
Vue Image Loader
Vue progressive image loader plugin like Medium
Stars: ✭ 47 (-81.05%)
Mutual labels: image, vuejs2
Imgviewer
jQuery plugin to zoom and pan images, even those with a size that is a percentage of their container
Stars: ✭ 50 (-79.84%)
Mutual labels: image, responsive
Welcome to Vue Product Zoomer 👋
A Image Zoomer For Eshop Website.Saving Your Time...
Homepage
🏠Install
npm install vue-product-zoomer
Usage
import ProductZoomer from 'vue-product-zoomer'
Vue.use(ProductZoomer)
<ProductZoomer
:base-images="images"
:base-zoomer-options="zoomerOptions"
/>
Options
images
{
{
'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'}
]
}
}
zoomerOptions
{
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"
}
Author
👤 Raymond Cheng
- Twitter: @akulubala
- Github: @akulubala
🤝 Contributing
Contributions, issues and feature requests are welcome!
Feel free to check issues page.
Show your support
Give a ⭐️ if this project helped you!
This README was generated with ❤️ by readme-md-generator
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].