问题
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.
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
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>
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; ?>
...
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?
look at the glitch here
PS: CSS can not resolve this problem since Fotorama JS ignore my edits and weird behaviors happen.
by example :
.fotorama__nav--thumbs .fotorama__nav__frame + .fotorama__nav__frame{
margin-top:15px;
}
did create a weird glitch while switching thumbnails.
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.
回答1:
I tried your snippets to add the thumbmargin to my horizontal nav (had issues with the selector on the currently selected thumb). It didnt work at first because you added "thumbmargin" in the template as a string, so i changed:
"thumbmargin": "<?php echo $block->getVar("gallery/thumbmargin"); ?>",
to:
"thumbmargin": <?php echo $block->getVar("gallery/thumbmargin"); ?>,
and it worked for me.
Just wanted to share this since it may fixes your issues too otherwise im probably not the only person who wants his galerie with a bigger margin.
回答2:
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>
回答3:
You just have to add thumbmargin in app/design/frontend/Vendor/Theme/Magento_Catalog/templates/product/view/gallery.phtml
For example: "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>
来源：https://stackoverflow.com/questions/40225579/fotorama-vertical-thumbnails-with-margin-glitch-magento-2