zoom enables left side of main image

Hello,

the zoom seems to be working alright on the linked website. I’ve tried on Firefox and Chrome, tried resizing the browser, open the full view and close it, go through all the thumbnail images; nothing helps me create the issue you’re describing.

But the thumbnails are right next to the main image. Maybe, if you create a bit of space between the thumbnails and the main image, then it might fix the issue you’re experiencing. You can do that by adding the following CSS rule to your website:

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
    padding-right: 1em !important;
}

Hello,

Thank you so much for your response and support.

I already have tried this css with more margin but zoom sometimes works normal but sometimes runs out(left side) kindly take a look at this screenshot https://snipboard.io/JMmNDy.jpg

Kind Regards
Vipul Arora

Another possible cause could be that the main image loads first and the zoom window gets built on the main image, then the thumbnails load and push the main image to the right, but the zoom window remains where it was first built.

If you manage to fix the main image’s and thumbnails’ position with CSS before they load, then the zoom window will be built on the right spot.

Right now the thumbnails (“ol.flex-control-nav.flex-control-thumbs”) are set to 12% width. Could you try giving them a fixed width and a max-width of 12%? Let me know if that helps.

Hello,

Thank you so much for your response.
I have tried all the way but it seems impossible I am sharing css codes that I am using with a php snippet you may suggest better way correcting it.

snippet:

add_filter( ‘storefront_product_thumbnail_columns’, ‘dk_single_gallery_columns_storefront’, 99 );
function dk_single_gallery_columns_storefront() {
return 1;
}

CSS:

@media (min-width: 0px) {
/* Make image width smaller to make room to its right */
.single-product div.product .images .woocommerce-main-image, .flex-viewport {
width: 85%;
float: right;
}

/* Make Gallery smaller width and place it beside the image */
.single-product div.product .images .thumbnails, ol.flex-control-nav.flex-control-thumbs {
width: 12%;
float: right;
margin-top: 0px !important;
}

/* Style each Thumbnail with width and margins */
.single-product div.product .images .thumbnails a.zoom, ol.flex-control-nav.flex-control-thumbs a.zoom {
width: 90%;
float: none;
margin: 0 0 10% 10%;
}
.woocommerce .flex-control-thumbs img:hover {
border: solid 2px black;
margin: -2px;
}

/* Move the zoom tool to the left side to accommodate the gallery thumbs (otherwise it covers the first thumbnail */
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
right: .875em !important;

}

That’s all what I am using to create vertical gallery kindly take a look and suggest next step.

Kind Regards
Vipul Arora

I still cannot see the issue on your website, which makes it harder to debug.

The image zoom plugin works alright with the default horizontal Flexslider. Maybe you can contact the developer that customized the Flexslider for you as a vertical gallery in order to look into this issue.

Hi,
This is an awesome plugin. But the problem is it is not working with entrance animations in elementor. After page loading the image animation works and the image goes to the speciffied position but the zoom windows remain at the starting location. Please help to fix this issue.
Thanks