具有边缘故障的Fotorama垂直缩略图(Magento 2) [英] Fotorama vertical thumbnails with margin glitch (Magento 2)

问题描述

使用Magento 2 Blank默认主题中包含的Fotorama库时，我遇到了一个小问题，首先，我将告诉您为添加我的画廊而添加的一些设置.

I got a little problem using Fotorama Library included in Magento 2 Blank default theme, first I will tell you some settings that I added to make my gallery.

使用设置为" navdir "的设置将我的缩略图设置为在magento 2的垂直位置显示. app/design/frontent/< -vendor->/< -theme->/etc/view.xml

my thumbnails are set to be shown in the vertical position in magento 2 using the setting "navdir" that can be found in app/design/frontent/<-vendor->/<-theme->/etc/view.xml

问题是我想在这些缩略图的周围添加边距，以便使用可在此处找到的fotorama官方文档: http://fotorama.io/customize/options/我添加了一个名为" thumbmargin "的新设置.我是在/etc 主题文件夹

The problem is that I wanted to add margins around theses thumbnail so using fotorama official documentation that can be found here : http://fotorama.io/customize/options/ I added a new setting called "thumbmargin". I did it this way in my view.xml of the /etc theme folder

<var name="gallery">
    ...
    <var name=""thumbmargin>20</var> <!-- Size of thumbnail margins. -->
    ...
</var>

然后我在我的gallery.phml中添加了可以在以下位置找到的调整 app/design/frontend/< -vendor->/< -theme->/Magento_Catalog/templates/product/view/gallery.phtml

Then I added the adjustment in my gallery.phml that can be found in app/design/frontend/<-vendor->/<-theme->/Magento_Catalog/templates/product/view/gallery.phtml

...
<?php if (($block->getVar("gallery/thumbmargin"))): ?>
    "thumbmargin": "<?php echo $block->getVar("gallery/thumbmargin"); ?>",
<?php endif; ?>
...

很抱歉，介绍很长.就是说，当我添加 thumbmargin 设置时，此屏幕截图显示活动"图像确实在导航栏下溢出，我似乎无法防止这种情况.我试图摆弄"适合"设置，但没有任何效果.我该如何解决这个问题?

Sorry for the long Introduction. That being said, when I add the thumbmargin setting, the 'active' image do overflow under the navigation bar as this screenshot show and I can not seem to be able to prevent this. I tried to fiddle with the 'fit' setting but nothing worked. How can I get around this problem?

在此处查看故障

PS:由于Fotorama JS忽略了我的编辑，并且发生了怪异的行为，因此CSS无法解决此问题.

例如:

.fotorama__nav--thumbs .fotorama__nav__frame + .fotorama__nav__frame{
    margin-top:15px;
}

在切换缩略图时造成了奇怪的故障.

did create a weird glitch while switching thumbnails.

编辑2016-10-31 我仅使用css和禁用的效果(例如放大镜")来解决此问题.您会看到Fotorama的问题在于，大多数效果都是使用javascript生成的，并且不会跟踪CSS所做的任何编辑，因此，如果在缩略图或主图像上放置填充或边距，则会出现毛刺.如果有人对此有持久的解决方案，请告诉我.在我的下一个magento 2.x项目中，我可能会完全替换图库.

EDIT 2016-10-31 I worked around this problem using only css and disabled effects such as 'magnifier'. You see the problem with Fotorama is that most of the effects a generated with javascript and do not track any edits made in CSS so if you put paddings or margins on a thumbnail or main image, there will be glitches. If someone have durable solution for this, please, tell me. On my next magento 2.x projects I will probably completely replace the gallery.

推荐答案

如果您的主题包含view.xml文件，则可以添加此XML来更改图库缩略图周围的间距(请注意，这只是以下内容的摘录更大的view.xml文件):

If your theme contains a view.xml file, you can add this XML to change the spacing around the gallery thumbnails (please note that this is only an excerpt of the much larger view.xml file):

<?xml version="1.0"?>
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    …
    <vars module="Magento_Catalog">
        <var name="gallery">
            …
            <var name="thumbmargin">6</var>
        </var>
    </vars>
</view>

这篇关于具有边缘故障的Fotorama垂直缩略图(Magento 2)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！