akulubala / vue-product-zoomer

Zoom Prodct Image, useful for e-shop website

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

vue-product-zoomer's Issues

Stylesheet should be scoped?

I believe the stylesheet used should be scoped. Currently it creates conflicts (especially .control, which is used in many CSS frameworks to represent form inputs). Any reason why it isn't scoped?

Arrow Icon Issues

Hey I am having some issues with rendering the arrow icons for the thumbnail preview

gridsome build fails

Adding vue-product-zoomer to Gridsome works during gridsome develop, but it fails during gridsome build (node v8.11.0/v10.16.0) while server side rendering (SSR) with the error:

Failed to render /examples/product
ReferenceError: window is not defined
    at Object.465 (node_modules/vue-product-zoomer/dist/assets/js/app.bundle.js:1:206)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Module.523 (assets/js/page--src--pages--examples--product-vue.f579c5f2.js:113:18)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at <anonymous>
gridsome build  34.41s user 2.34s system 149% cpu 24.610 total

Is there a work-around for server rendered pages, that this window is not referenced?
Sounds similiar like the nuxt issue. Don't know to handle it with gridsome.

Dont have mobile support?

Is possible this component work well in mobile?

Cannot import locally

Hi,

thanks for nice work!

But I cannot import the component locally. Always get 'template or rendered function not defined' error... I hade to import it in my main app.js and Vue.use(ProductZoomer) for it to work.

Could u pls help me on that? Thanks!

Routing breaks the image zoomer

[UPDATE] I discovered that going from one page to another breaks the zoomer. I just placed a link from a page with zoomer in nuxt demo to another new page just containing a link back to the previous and reproduces the same error I discribe below.

I added nuxt-i18n to the demo project with nuxt at https://github.com/akulubala/nuxt-product-zoomer-demo. Then configured nuxt-i18n with the data in the Basic Usage section; adding to the page with the zoomer two links to change language.

First load is fine, but when clicking on the the link to change the language the thumbnails are no loger visible and while the main picture is present the zoom effect is gone.

When the change of the language happens some styles on the zoomer are change, visibility set to hidden etc; but I cannot understand why.

Any solution? Thank you very much!

Attempting to Use Carousel

I am implementing a carousel using Vuetify but I am having a problem the zoom box is only shown in the first image, I made a change so that the image would be displayed from an array, you have some idea of why only the zoom box is shown in the first picture?

Thank you

您好,可以修复一下点击箭头没有改变的bug吗,我们老师说那样star会多很多哦!!! (^_^)

Not zooming

Everything connected correctly and working without any errors. But, it is not zooming the image. I tried to pass 'thumb', 'normal_size' and 'large_size' - no result.

const images = {

    thumbs: [
      {
        id: 1,
        url:
          "https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg"
      },
      {
        id: 2,
        url:
          "https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg"
      },
      {
        id: 3,
        url:
          "https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg"
      }
    ],
    normal_size: [
      {
        id: 1,
        url:
          "https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg"
      },
      {
        id: 2,
        url:
          "https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg"
      },
      {
        id: 3,
        url:
          "https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg"
      }
    ],
    large_size: [
      {
        id: 1,
        url:
          "https://j.plenio.de/images/igallery/resized/401-500/jplenio_DSC02004-430-4000-4000-100.jpg"
      },
      {
        id: 2,
        url:
          "https://j.plenio.de/images/igallery/resized/401-500/jplenio_DSC02004-430-4000-4000-100.jpg"
      },
      {
        id: 3,
        url:
          "https://j.plenio.de/images/igallery/resized/401-500/jplenio_DSC02004-430-4000-4000-100.jpg"
      }
    ]
  };

<product-zoomer :base-images="getZoomerImages"></product-zoomer>

document is not defined

Hi,

When i try to import it i got an error document is not defined
Screenshot:

Anyone can help me?

Thanks and Best Regards,
Harry

arrow can not use

when I click Arrow the img is not change

Not working properly with NuxtJs

nuxt.config.js

{src: '~/plugins/ProductZoomer',ssr: false}

plugin config in ProductZoomer.js

import Vue from 'vue'
import ProductZoomer from 'vue-product-zoomer'

Vue.use(ProductZoomer);

in product page

<template>
 <div style="width: 600px">
      <no-ssr>
      <ProductZoomer
      :base-images="images"
      :base-zoomer-options="zoomerOptions"
    />
    </no-ssr>
    </div>
</template>
export default{
data(){
return {
zoomerOptions: {
          zoomFactor: 3,
          pane: "pane",
          hoverDelay: 300,
          namespace: "zoomer-left",
          move_by_click: false,
          scroll_items: 4,
          choosed_thumb_border_color: "#dd2c00",
          scroller_position: "left",
          zoomer_pane_position: "right"
        },
        images: {
          'normal_size':  // required
            [
              {'id': '1', 'url': fanImage},
              {'id': '2', 'url': washingImage},
              {'id': '3', 'url': mobileImage},
            ],
          'thumbs':    // optional, if not present will use normal_size instead
            [
              {'id': '1', 'url': fanImage},
              {'id': '2', 'url': washingImage},
              {'id': '3', 'url': mobileImage},
            ]
        },

        products: [
          {
            id: 1,
            title: 'Наружные вентиляторы Dyson Vision Electronics, 60cm диаметр, черный',
            star: 4.8,
            comments: 23,
            price: '159 567',
            type: 'В КОРЗИНУ',
            img: fanImage
          },
}
}
}
}

Thumblist is not working. If css applied then zoom effect is not working

Font awesome error

I am getting this error when I mount the component

vue-carousel.min.js:6 GET http://localhost:3000/assets/fonts/fontawesome-webfont.af7ae50.woff2 net::ERR_ABORTED
GET http://localhost:3000/assets/fonts/fontawesome-webfont.fee66e7.woff net::ERR_ABORTED
GET http://localhost:3000/assets/fonts/fontawesome-webfont.b06871f.ttf net::ERR_ABORTED

I am using different version of font-awesome.. how can exclude product-zoomer to use the outdated version or how can I get rid of this issue ?

Thnx

Custom icons slots

Hello. First of all, thanks for great project! Is it possible to implement slots for custom arrow icons? It's necessary for styling of the gallery.

UPD: PR created: #22

Unable to load Product Zoomer in data object

If I put the sample data in return object it displays the output but if I dynamically call the image object unable to load data in product zoomer data object

If I place this code it displays the output
images: {
thumbs: [
{
id: 1,
url:
"http://localhost:8000/images/product/thumbs/MICMIMC30651-6.jpg"
},
{
id: 2,
url:
"http://localhost:8000/images/product/thumbs/MICMIMC30651-61.jpg"
}

    ],
    normal_size: [
      {
        id: 1,
        url:
          "http://localhost:8000/images/product/preview/MICMIMC30651-6.jpg"
      },
      {
        id: 2,
        url:
          "http://localhost:8000/images/product/preview/MICMIMC30651-61.jpg"
      }
    
    ],
    large_size: [
      {
        id: 1,
        url:
          "http://localhost:8000/images/product/original/MICMIMC30651-6.jpg"
      },
      {
        id: 2,
        url:
          "http://localhost:8000/images/product/original/MICMIMC30651-61.jpg"
      }
              ]
  },

But when I call dynamically

data(){
return {
images:[],
zoomerOptions: {
zoomFactor: 3,
pane: "pane",
hoverDelay: 300,
namespace: "zoomer-bottom",
move_by_click: false,
scroll_items: 4,
choosed_thumb_border_color: "#dd2c00",
scroller_position: "bottom",
zoomer_pane_position: "right"
}
}
},

error: 1. Invalid prop: type check failed for prop "baseImages". Expected Object, got Array
2. Product Zoomer Need Normal Size Image At Least!!!

Demo doesn't work in Firefox Quantum

Cool product! Unfortunately your demo doesn't work on Firefox Quantum@latest. Didn't dig deeper into the cause.

如何规定图片的大小？

Nuxt.js with Bootstrap Vue Ui

Hello 👋, im using productzoomer with b-modal and it doesn't works below is the code is use

<b-modal ref="my-modal" centered modal-class="wcModal" hide-footer hide-header > <ProductZoomer :base-images="images" :base-zoomer-options="zoomerOptions"></ProductZoomer> </b-modal>

and look how it looks inside of the modal

Loading image Async

They have an option to load images async ?

[Question] Lazy Loading Images

Hey,

Do you plan to support Lazy Loading images?

Thank you!

Error in render: "TypeError: Cannot read property 'desc' of undefined"

If I use <div v-html='product.brand.desc'></div> in the template file，the zoomer can work well but the console will return an error Cannot read property 'desc' of undefined.

if I solve the property problem by some ways，the zoomer will return me "Product Zoomer Need Normal Size Image At Least!!!"，the images collection have the id and url data, but the zoomer don't use the images collection.

the zoomer images were pushed from the product.images。

If I don't solve the property problem ，the vue ssr can't work well。

Anyone can tell my how to solve it？

Doesn't work at all with last 3.0.0 version

Hello!
Here it is the example - https://codesandbox.io/s/vue-template-pu1wy
As you see, there is no thumb-list visibility and zoom feature doesn't work.
If we change version of dependancy on 2.0.11 it's working.

Dynamic Product Zoomer

I have if conditional, if user click variant of a product, product zoomer will use variantImages1 data, but it doesnt work well

<ProductZoomer v-show="variant" :baseImages="variantImages" :baseZoomerOptions="zoomerOptions"></ProductZoomer>
<ProductZoomer v-show="!variant" :baseImages="images" :baseZoomerOptions="zoomerOptions2"></ProductZoomer>

<ProductZoomer v-if="variant" :baseImages="variantImages" :baseZoomerOptions="zoomerOptions"></ProductZoomer>
<ProductZoomer v-else" :baseImages="images" :baseZoomerOptions="zoomerOptions2"></ProductZoomer>

variantImages : { 'thumbs' : [], 'normal_size' : []}

for (let index = 0; index < images.length; index++) {
this.variantImages.thumbs = [{'id' : index+1, 'url' : images[index]}]
this.variantImages.normal_size = [{ 'id' : index+1, 'url' : images[index]}]
}
i'm using vuejs2

and the images doesnt show

details is not clear.

How to use it is not clear. You can write details about the document.

z-index property

Hello, I having the issue when I use the component in a div with z-index > 0, it is showing the zoom but its behind my container because it has a different z index.
I'm using v2.0.11

Vue Product Zoomer not working dynamically.

I am trying to dynamically use the vue product zoomer. I created a hook created that calls an api and gives the images data. The main concern is the vue-product-zoomer component renders before and searches for the normal_size image and throws error.

Error in created hook: "Product Zoomer Need Normal Size Image At Least!!!"

Any Solution !!!!

programmatic method to chooseThumb

Hello, can you provide programmatic method to chooseThumb in example
when parent data changed, the product zoomer also navigate to selected thumb.
sorry if i asking too much

Font Awesome render as <i> not <svg>

can you help me with this issue? it working correctly but the icon not rendering as svg but as
<i aria-hidden="true" class="fa fa-angle-right"></i>

Choosed thumbs not show when component mounted

the fact is that when i load the page where the product zoomer component is there is no default selected thumbs i have to click on thumbs to display normal size image

Image Selection on the side

This is actually a feature request. It would be very cool if we could switch the side where the list of images are displayed. Currently, it is at the bottom. Options to move it to left, right, or top would be helpful.

can not work well with the vuex

the images data comes from the vuex getters, the page can get the data from computed getters, but the zoomer component shows nothing the first time, if I open a new product page, the new page's zoomer product shows the previous product's images, other products like it, it never shows the correct image.

RTL Support

Hi,

Thank you for this amazing plugin.

I'm using this for my website and it works great in LTR.

In RTL the image is shown but the hover magnifier shows black. any idea how i can fix this issue?

Thanks!

Using with Nuxt

Hi!
I'm using ProductZoomer component with Nuxt, but getting error.
That's how I include component in another Vue-component:
const ProductZoomer = typeof window !== "undefined" ? require("vue-product-zoomer") : ""

Error:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

how to hide scroller programmatically ?

is there any chance to hide scroller programmatically?

Does not work properly

Thanks for your great library. there is some problem i have please help me.

as u can see, slider is very big and it is inside of picture. Next problem is zoom.
these are my code. what is the problem with them?

<script>
    export default {
        name: 'app',
        data () {
            return {
                'images': {
                    'thumbs': [
                        {
                            'id': 1,
                            'url': 'https://image.freepik.com/free-vector/geometric-sale-banners-with-text-space_1017-11175.jpg'
                        },
                        {
                            'id': 2,
                            'url': 'https://image.freepik.com/free-vector/geometric-sale-banners-with-text-space_1017-11175.jpg'
                        }
                    ],
                    'normal_size': [
                        {
                            'id': 1,
                            'url': 'https://image.freepik.com/free-vector/geometric-sale-banners-with-text-space_1017-11175.jpg'
                        },
                        {
                            'id': 2,
                            'url': 'https://image.freepik.com/free-vector/geometric-sale-banners-with-text-space_1017-11175.jpg'
                        }
                    ],
                    'large_size': [
                        {
                            'id': 1,
                            'url': 'https://image.freepik.com/free-vector/geometric-sale-banners-with-text-space_1017-11175.jpg'
                        },
                        {
                            'id': 2,
                            'url': 'https://image.freepik.com/free-vector/geometric-sale-banners-with-text-space_1017-11175.jpg'
                        }
                    ]
                },
                 'zoomerOptions': {
                    zoomFactor: 3,
                    pane: "pane",
                    hoverDelay: 300,
                    namespace: "zoomer-top",
                    move_by_click: false,
                    scroll_items: 7,
                    choosed_thumb_border_color: "#dd2c00",
                    scroller_position: "top",
                    zoomer_pane_position: "left"
                }
            }
        }
    }
</script>

html:

<div>
        <v-container>
            <ProductZoomer
                    :base-images="images"
                    :base-zoomer-options="zoomerOptions"
            />
        </v-container>
    </div>

Zoom postition not accurate

there is small issue with the position for zoomed image can anyone give the solution

img zoom is not working correctly

i tried all options, but it did not work

also how i make default img. i want to show img on right side of the image not on the top

Questions

Hi,

Great component you added, im loving it so far. Have 2 questions.

1. Is there a option to disable the thumbnails just have the main image, remove the "control-box" (using CSS to hide it at the moment)
2. Is there a way to dynamically update the image with new image?
3. Is there a destroy? if so how can I call it?

Im not using "gallery" but on single image, and I when user click some other image, I want to update the image in the product zoomer.

Hope I explained myself.

Cheers,
David

dynamic image

how to make dynamic image using v-for , sorry iam still learning

when ssr it returns an error "document is not defined"

Adjust the width and height

Hi there,
Is there a way to change the height and width of the preview? It's really different from your example.... Thanks.

It's not working on touch devices.

abnormal behavior with navigation

I have been working with product zoomer quite a while its great.
Lately after updating i have found a navigation not working when scroller have single image.

add vue-product-zoomer in Nuxt js

problems integrating the component with nuxt:
import ProductZoomer from 'vue-product-zoomer' import readme from '../components/Reame' export default { components: { readme, ProductZoomer },
Error:

I need your help please

您好，点击箭头，图片没有修改

您好，我在引用这个插件的时候，发现点击缩略图的箭头，上面的图片没有根据箭头点击上一页下一页跟着改变，请问这是什么问题呢

There is no way to know which image is chosen currently

Currently there is no way to know which image has been choose from slider by hover or click. It is better to have some sort of event or property to track that.

By the way, thanks for this nice plugin.

Does not work when used with Quasar Framework

Hey

I have tried to use it with Quasar framework but image does not display. Moverover when items/slides are assigned/updated dynamically i.e. via ajax it does not work too

Failed to mount component: template or render function not defined.

[Vue warn]: Failed to mount component: template or render function not defined.

How to fix the size of preview box?

Thanks for this amazing component !!
I am using in one of my important project 🥇

My problem is that the preview box resizes according to image size, but i want it with fixed size, how can i achieve that ?
TIA

chosed thumbs object is undifined on mounted

Plese i really need your help the choosed thumb object is undifined when component mounted