Product image not zooming in properly when hovering on image at product detail pageNeed to reduce the zooming level of the imageAlternative Product image when page loadsProduct Image Not Showing in detail pageMagento2: magnifier not working for product image on product details pageCMS Images Not ResponsiveProduct details page image zoom issue - Magento 2Image resizing not working if height and width values are differentImage sizes in detail pageMagento default zoom for product image is not working properlyProblem with Zooming the product image in Magento 2
Books of scary stories with two or three plots each
Was there a dinosaur-counter in the original Jurassic Park movie?
What is monoid homomorphism exactly?
How is trade in services conducted under the WTO in the absence of the Doha conclusion?
What happens if I accidentally leave an app running and click "Install Now" in Software Updater?
Collision domain question
Is it normal for gliders not to have attitude indicators?
Copper as an adjective to refer to something made of copper
Transistor gain, what if there is not enough current?
Emergency stop in plain TeX, pdfTeX, XeTeX and LuaTeX?
Why is the blank symbol not considered part of the input alphabet of a Turing machine?
Hostile Divisor Numbers
Subnumcases as a part of align
Why would a military not separate its forces into different branches?
Is throwing dice a stochastic or a deterministic process?
Can an Iranian citizen enter the USA on a Dutch passport?
Ab major 9th chord in Bach
HSA - Continue to Invest?
Does Thanos's ship land in the middle of the battlefield in "Avengers: Endgame"?
Is crescere the correct word meaning to to grow or cultivate?
How did the Apollo guidance computer handle parity bit errors?
What does the copyright in a dissertation protect exactly?
Can a good but unremarkable PhD student become an accomplished professor?
TIP120 Transistor + Solenoid Failing Randomly
Product image not zooming in properly when hovering on image at product detail page
Need to reduce the zooming level of the imageAlternative Product image when page loadsProduct Image Not Showing in detail pageMagento2: magnifier not working for product image on product details pageCMS Images Not ResponsiveProduct details page image zoom issue - Magento 2Image resizing not working if height and width values are differentImage sizes in detail pageMagento default zoom for product image is not working properlyProblem with Zooming the product image in Magento 2
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
In my product page detail when i try to hover the product image there's only white box with low opacity overlaying at the top of my image like this :
Usually in Magento 2, when hovering the image it will zoom in the part where the image is hovered like this:
I've tried to edit view.xml in my app/design/frontend/theme, but i can't get it to work, here's the code:
<var name="magnifier">
<var name="fullscreenzoom">5</var> <!-- Zoom for fullscreen (integer)-->
<var name="top"></var> <!-- Top position of magnifier -->
<var name="left"></var> <!-- Left position of magnifier -->
<var name="width"></var> <!-- Width of magnifier block -->
<var name="height"></var> <!-- Height of magnifier block -->
<var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
<var name="enabled">true</var> <!-- Turn on/off magnifier (true/false) -->
</var>
product magento-2.1 product-images zoom
edited Mar 9 '18 at 17:12
Taran
494313
asked May 4 '17 at 3:58
Shell SuiteShell Suite
88211024
add a comment |
In my product page detail when i try to hover the product image there's only white box with low opacity overlaying at the top of my image like this :
Usually in Magento 2, when hovering the image it will zoom in the part where the image is hovered like this:
I've tried to edit view.xml in my app/design/frontend/theme, but i can't get it to work, here's the code:
<var name="magnifier">
<var name="fullscreenzoom">5</var> <!-- Zoom for fullscreen (integer)-->
<var name="top"></var> <!-- Top position of magnifier -->
<var name="left"></var> <!-- Left position of magnifier -->
<var name="width"></var> <!-- Width of magnifier block -->
<var name="height"></var> <!-- Height of magnifier block -->
<var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
<var name="enabled">true</var> <!-- Turn on/off magnifier (true/false) -->
</var>
product magento-2.1 product-images zoom
edited Mar 9 '18 at 17:12
Taran
494313
asked May 4 '17 at 3:58
Shell SuiteShell Suite
88211024
1
Image size should be large. Please check first image size.
– Suresh Chikani
May 4 '17 at 5:14
@SHPatel my image size is 1200x1200
– Shell Suite
May 4 '17 at 6:03
I am facing the same issue. Check the css for class "magnifier-preview" in firebug. The 'left' could be out of page. If you reduce the left margin you will see the zoom is working. However I am not able to figure out how to fix this issue.
– Sejal Shah
Jul 5 '17 at 12:53
do you use a custom theme? Did you make any changes to layout, template or css/js?
– juhanix
Mar 20 '18 at 14:18
How to add this file in custom module ?
– Mano M
Mar 4 at 7:21
add a comment |
In my product page detail when i try to hover the product image there's only white box with low opacity overlaying at the top of my image like this :
Usually in Magento 2, when hovering the image it will zoom in the part where the image is hovered like this:
I've tried to edit view.xml in my app/design/frontend/theme, but i can't get it to work, here's the code:
<var name="magnifier">
<var name="fullscreenzoom">5</var> <!-- Zoom for fullscreen (integer)-->
<var name="top"></var> <!-- Top position of magnifier -->
<var name="left"></var> <!-- Left position of magnifier -->
<var name="width"></var> <!-- Width of magnifier block -->
<var name="height"></var> <!-- Height of magnifier block -->
<var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
<var name="enabled">true</var> <!-- Turn on/off magnifier (true/false) -->
</var>
product magento-2.1 product-images zoom
edited Mar 9 '18 at 17:12
Taran
494313
asked May 4 '17 at 3:58
Shell SuiteShell Suite
88211024
In my product page detail when i try to hover the product image there's only white box with low opacity overlaying at the top of my image like this :
Usually in Magento 2, when hovering the image it will zoom in the part where the image is hovered like this:
I've tried to edit view.xml in my app/design/frontend/theme, but i can't get it to work, here's the code:
<var name="magnifier">
<var name="fullscreenzoom">5</var> <!-- Zoom for fullscreen (integer)-->
<var name="top"></var> <!-- Top position of magnifier -->
<var name="left"></var> <!-- Left position of magnifier -->
<var name="width"></var> <!-- Width of magnifier block -->
<var name="height"></var> <!-- Height of magnifier block -->
<var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
<var name="enabled">true</var> <!-- Turn on/off magnifier (true/false) -->
</var>
product magento-2.1 product-images zoom
product magento-2.1 product-images zoom
edited Mar 9 '18 at 17:12
Taran
494313
asked May 4 '17 at 3:58
Shell SuiteShell Suite
88211024
edited Mar 9 '18 at 17:12
Taran
494313
asked May 4 '17 at 3:58
Shell SuiteShell Suite
88211024
edited Mar 9 '18 at 17:12
Taran
494313
edited Mar 9 '18 at 17:12
Taran
494313
edited Mar 9 '18 at 17:12
Taran
494313
494313
asked May 4 '17 at 3:58
Shell SuiteShell Suite
88211024
asked May 4 '17 at 3:58
Shell SuiteShell Suite
88211024
asked May 4 '17 at 3:58
Shell SuiteShell Suite
88211024
88211024
1
Image size should be large. Please check first image size.
– Suresh Chikani
May 4 '17 at 5:14
@SHPatel my image size is 1200x1200
– Shell Suite
May 4 '17 at 6:03
I am facing the same issue. Check the css for class "magnifier-preview" in firebug. The 'left' could be out of page. If you reduce the left margin you will see the zoom is working. However I am not able to figure out how to fix this issue.
– Sejal Shah
Jul 5 '17 at 12:53
do you use a custom theme? Did you make any changes to layout, template or css/js?
– juhanix
Mar 20 '18 at 14:18
How to add this file in custom module ?
– Mano M
Mar 4 at 7:21
add a comment |
1
Image size should be large. Please check first image size.
– Suresh Chikani
May 4 '17 at 5:14
@SHPatel my image size is 1200x1200
– Shell Suite
May 4 '17 at 6:03
I am facing the same issue. Check the css for class "magnifier-preview" in firebug. The 'left' could be out of page. If you reduce the left margin you will see the zoom is working. However I am not able to figure out how to fix this issue.
– Sejal Shah
Jul 5 '17 at 12:53
do you use a custom theme? Did you make any changes to layout, template or css/js?
– juhanix
Mar 20 '18 at 14:18
How to add this file in custom module ?
– Mano M
Mar 4 at 7:21
1
1
Image size should be large. Please check first image size.
– Suresh Chikani
May 4 '17 at 5:14
Image size should be large. Please check first image size.
– Suresh Chikani
May 4 '17 at 5:14
@SHPatel my image size is 1200x1200
– Shell Suite
May 4 '17 at 6:03
@SHPatel my image size is 1200x1200
– Shell Suite
May 4 '17 at 6:03
I am facing the same issue. Check the css for class "magnifier-preview" in firebug. The 'left' could be out of page. If you reduce the left margin you will see the zoom is working. However I am not able to figure out how to fix this issue.
– Sejal Shah
Jul 5 '17 at 12:53
I am facing the same issue. Check the css for class "magnifier-preview" in firebug. The 'left' could be out of page. If you reduce the left margin you will see the zoom is working. However I am not able to figure out how to fix this issue.
– Sejal Shah
Jul 5 '17 at 12:53
do you use a custom theme? Did you make any changes to layout, template or css/js?
– juhanix
Mar 20 '18 at 14:18
do you use a custom theme? Did you make any changes to layout, template or css/js?
– juhanix
Mar 20 '18 at 14:18
How to add this file in custom module ?
– Mano M
Mar 4 at 7:21
How to add this file in custom module ?
– Mano M
Mar 4 at 7:21
add a comment |
1 Answer
1
active
oldest
votes
Change below var :
<var name="width">1200</var> <!-- Width of magnifier block -->
<var name="height">1200</var> <!-- Height of magnifier block -->
answered Apr 30 '18 at 6:43
hweb87hweb87
6593826
add a comment |
Your Answer
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "479"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f172932%2fproduct-image-not-zooming-in-properly-when-hovering-on-image-at-product-detail-p%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Change below var :
<var name="width">1200</var> <!-- Width of magnifier block -->
<var name="height">1200</var> <!-- Height of magnifier block -->
answered Apr 30 '18 at 6:43
hweb87hweb87
6593826
add a comment |
Change below var :
<var name="width">1200</var> <!-- Width of magnifier block -->
<var name="height">1200</var> <!-- Height of magnifier block -->
answered Apr 30 '18 at 6:43
hweb87hweb87
6593826
add a comment |
Change below var :
<var name="width">1200</var> <!-- Width of magnifier block -->
<var name="height">1200</var> <!-- Height of magnifier block -->
answered Apr 30 '18 at 6:43
hweb87hweb87
6593826
Change below var :
<var name="width">1200</var> <!-- Width of magnifier block -->
<var name="height">1200</var> <!-- Height of magnifier block -->
answered Apr 30 '18 at 6:43
hweb87hweb87
6593826
answered Apr 30 '18 at 6:43
hweb87hweb87
6593826
answered Apr 30 '18 at 6:43
hweb87hweb87
6593826
answered Apr 30 '18 at 6:43
hweb87hweb87
6593826
6593826
add a comment |
add a comment |
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f172932%2fproduct-image-not-zooming-in-properly-when-hovering-on-image-at-product-detail-p%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Image size should be large. Please check first image size.
– Suresh Chikani
May 4 '17 at 5:14
@SHPatel my image size is 1200x1200
– Shell Suite
May 4 '17 at 6:03
I am facing the same issue. Check the css for class "magnifier-preview" in firebug. The 'left' could be out of page. If you reduce the left margin you will see the zoom is working. However I am not able to figure out how to fix this issue.
– Sejal Shah
Jul 5 '17 at 12:53
do you use a custom theme? Did you make any changes to layout, template or css/js?
– juhanix
Mar 20 '18 at 14:18
How to add this file in custom module ?
– Mano M
Mar 4 at 7:21