search

payalord / xZoom

jQuery Zoom Gallery plugin
https://payalord.github.io/xZoom/
Apache License 2.0
165 stars 65 forks source link

Zoom aspect ratio changes when adding image of the same size as of the demo car images #75

Closed meet1919 closed 2 years ago

meet1919 commented 2 years ago

Screenshot (27) Screenshot (29)

The image is the demo image of size 400x400. The second image is of the same size 400x400, but there is something wrong.

<div class="xzoom-container">
    <img class="xzoom" id="xzoom-default" src="/static/img/hydro1.jpg" xoriginal="/static/img/hydro1.jpg" />
    <div class="xzoom-thumbs">
        <a href="/static/img/hydro1.jpg"><img class="xzoom-gallery" width="80" src="/static/img/hydro1.jpg"
                xpreview="/static/img/hydro1.jpg" title="The description goes here"></a>

        <a
            href="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/original/02_o_car.jpg"><img
                class="xzoom-gallery" width="80"
                src="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/preview/02_o_car.jpg"
                title="The description goes here"></a>

        <a
            href="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/original/03_r_car.jpg"><img
                class="xzoom-gallery" width="80"
                src="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/preview/03_r_car.jpg"
                title="The description goes here"></a>

        <a
            href="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/original/04_g_car.jpg"><img
                class="xzoom-gallery" width="80"
                src="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/preview/04_g_car.jpg"
                title="The description goes here"></a>
    </div>
</div>

I cant think of anything which might create this problem. Both the images have same resolution and pixels/inch still the library affects both the image differently.

payalord commented 2 years ago

Check this example: https://payalord.github.io/xzoom-sandbox/DifferentImageSizes/ (available in sandbox)

Make sure you use proper images for preview and original. Original image must be higher by resolution than preview. While preview image higher by resolution than thumbnail image.

meet1919 commented 2 years ago

Ohh yes, The demo images are coming from different folders: Original & 'Preview'.