Question

我使用Magento 2 Blank默认主题中包含的Fotorama Library遇到了一些问题，首先我会告诉你我为了制作我的画廊而添加的一些设置。

我的缩略图设置为使用“ navdir ”设置在magento 2中的垂直位置显示 应用/设计/ frontent /＆LT; -vendor-＆GT; /＆LT; -theme-＆GT; /etc/view.xml

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

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

然后我在我的gallery.phml中添加了可以找到的调整 应用/设计/前端/＆LT; -vendor-＆GT; /＆LT; -theme-＆GT; /Magento_Catalog/templates/product/view/gallery.phtml

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

很抱歉很长的介绍。话虽这么说，当我添加 thumbmargin 设置时，“活动”图像会在导航栏下溢出，如此屏幕截图所示，我似乎无法阻止这种情况。我试图摆弄' fit '设置，但没有任何效果。我怎样才能解决这个问题呢？

look at the glitch here

PS：CSS无法解决此问题，因为Fotorama JS忽略了我的编辑并且发生了奇怪的行为。

通过示例：

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

在切换缩略图时确实产生了一个奇怪的故障。

编辑2016-10-31 我只使用css和禁用效果（例如'放大镜'）解决了这个问题。你看到Fotorama的问题是用javascript生成的大多数效果并且不跟踪CSS中的任何编辑，所以如果你在缩略图或主图像上放置填充或边距，就会出现故障。如果有人持久解决这个问题，请告诉我。在我的下一个magento 2.x项目中，我可能会完全取代画廊。

Answer 1

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

<?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>

Answer 2

我尝试使用你的片段将thumbmargin添加到我的水平导航中（当前所选拇指上的选择器出现问题）。它起初没有用，因为你在模板中添加了“thumbmargin”作为字符串，所以我改变了：

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

为：

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

它对我有用。

只是想分享这个，因为它可能会解决你的问题，否则我可能不是唯一一个想要更大利润的人。

Answer 3

您只需要在app / design / frontend / Vendor / Theme / Magento_Catalog / templates / product / view / gallery.phtml中添加thumbmargin 例如："thumbmargin":10

<script type="text/x-magento-init">
    {
        "[data-gallery-role=gallery-placeholder]": {
            "mage/gallery/gallery": {
                "mixins":["magnifier/magnify"],
                "magnifierOpts": <?= /* @escapeNotVerified */ $block->getMagnifier() ?>,
                "data": <?= /* @escapeNotVerified */ $block->getGalleryImagesJson() ?>,
                "options": {
                    "thumbmargin":10,
                    "nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/nav") ?>",
                    "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/loop") ? 'true' : 'false' ?>,
                    "keyboard": <?= /* @escapeNotVerified */ $block->getVar("gallery/keyboard") ? 'true' : 'false' ?>,
                    "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/arrows") ? 'true' : 'false' ?>,
                    "allowfullscreen": <?= /* @escapeNotVerified */ $block->getVar("gallery/allowfullscreen") ? 'true' : 'false' ?>,
                    "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/caption") ? 'true' : 'false' ?>,
                    "width": "<?= /* @escapeNotVerified */ $block->getImageAttribute('product_page_image_medium', 'width') ?>",
                    "thumbwidth": "<?= /* @escapeNotVerified */ $block->getImageAttribute('product_page_image_small', 'width') ?>",
                    <?php if ($block->getImageAttribute('product_page_image_small', 'height') || $block->getImageAttribute('product_page_image_small', 'width')): ?>
                        "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height')
                        ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>,
                    <?php endif; ?>
                    <?php if ($block->getImageAttribute('product_page_image_medium', 'height') || $block->getImageAttribute('product_page_image_medium', 'width')): ?>
                        "height": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'height')
                        ?: $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
                    <?php endif; ?>
                    <?php if ($block->getVar("gallery/transition/duration")): ?>
                        "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/transition/duration") ?>,
                    <?php endif; ?>
                    "transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/transition/effect") ?>",
                    "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/navarrows") ? 'true' : 'false' ?>,
                    "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/navtype") ?>",
                    "navdir": "<?= /* @escapeNotVerified */ $block->getVar("gallery/navdir") ?>"
                },
                "fullscreen": {
                    "nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/nav") ?>",
                    "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/loop") ? 'true' : 'false' ?>,
                    "navdir": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navdir") ?>",
                    "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navarrows") ? 'true' : 'false' ?>,
                    "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navtype") ?>",
                    "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/arrows") ? 'true' : 'false' ?>,
                    "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/caption") ? 'true' : 'false' ?>,
                    <?php if ($block->getVar("gallery/fullscreen/transition/duration")): ?>
                        "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/duration") ?>,
                    <?php endif; ?>
                    "transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/effect") ?>"
                },
                "breakpoints": <?= /* @escapeNotVerified */ $block->getBreakpoints() ?>
            }
        }
    }
</script>

带有边距故障的Fotorama垂直缩略图（Magento 2）

3 个答案: