akulubala / vue-product-zoomer

Zoom Prodct Image, useful for e-shop website
http://www.yoohooworld.com/demo.html
MIT License
290 stars 69 forks source link

Does not work properly #52

Closed matinwd closed 4 years ago

matinwd commented 4 years ago

Thanks for your great library. there is some problem i have please help me. 2020-02-20_12-18-28 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>
matinwd commented 4 years ago

Oh i forgot to tell you i am using Vuetify.

akulubala commented 4 years ago

please using the new release version