我在 Productdetail 页面上的 ProductSlider 有问题。我不知道如何设置容器的宽度和高度。
我找到了 Fotorama 插件的一些配置，但没有关于宽度和高度的信息。
我的产品图片有另一个维度。
<div class="fotorama__stage" style="width: 581px; height: 581px; line-height: 581px;">
这是插件的尺寸。
我的图片尺寸是530px x 350px，所以有太多的空白（顶部/底部）。
有什么想法吗？
【问题讨论】：
标签： jquery slider magento2 fotorama
您必须编辑以下文件：app/design/vendor/Magento_Catalog/templates/product/view/gallery.phtml
您可以在此处添加您的选项
<script type="text/x-magento-init">
{
"[data-gallery-role=gallery-placeholder]": {
"mage/gallery/gallery": {
"mixins":["magnifier/magnify"],
"magnifierOpts": <?php /* @escapeNotVerified */ echo $block->getMagnifier(); ?>,
"data": <?php /* @escapeNotVerified */ echo $block->getGalleryImagesJson(); ?>,
"options": {
"maxheight": "700", // Add your value here
}
}
}
}
【讨论】：
覆盖vendor\magento\theme-frontend-luma\etc\view.xml
我有以下，例如：app\design\frontend\[CustomTheme]\default\etc\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">
<media>
<images module="Magento_Catalog">
<image id="product_page_image_large" type="image"/>
<image id="product_page_image_medium" type="image">
<width>700</width>
<height>420</height>
</image>
<image id="product_page_main_image" type="image">
<width>700</width>
<height>420</height>
</image>
<image id="product_page_main_image_default" type="image">
<width>700</width>
<height>420</height>
</image>
</images>
</media>
</view>
这将导致fotorama__stage 变小 - 它会根据图像大小进行调整。
【讨论】：
Florin Marin 的解决方案对我有用，但没有改变 fotorama 的宽度，所以我正在挖掘更多，对我来说 - 最好的结果是将它添加到我的 less 主题文件 _theme.less
.page-layout-2columns-right .product.media {
width: 20%
}
.page-layout-2columns-right .product-info-main {
width: 78%;
}
我还更改了 app/design/frontend/[Custom_Vendor]/[CustomTheme]\etc\view.xml 中图像的大小，就像他的回答中的 adpro 一样。
<images module="Magento_Catalog">
<image id="product_page_image_large" type="image"/>
<image id="product_page_image_medium" type="image">
<width>150</width>
<height>150</height>
</image>
<image id="product_page_main_image" type="image">
<width>150</width>
<height>150</height>
</image>
<image id="product_page_main_image_default" type="image">
<width>150</width>
<height>150</height>
</image>
</images>
在开发者模式下删除 pub/static/frontend/* 并在 xml 文件更改后调整图像大小： php bin/magento 目录：图像：调整大小
【讨论】：
将此添加到您的 LESS/CSS 文件并清除缓存。
.product .fotorama__stage__frame .fotorama__img {
top: 0 !important;
transform: none !important;
-webkit-transform: none !important;
position: static;
margin-top: auto !important;
}
【讨论】：
我将展示它是如何正确完成的，但请记住，这并不支持所有选项，因此如果您需要使用它们，您还必须自己扩展块类并添加对缺失选项的支持！
配置保存在
主题前端空白/etc/view.xml：
...
<vars module="Magento_Catalog">
<!-- Gallery and magnifier theme settings. Start -->
<var name="gallery">
<var name="nav">thumbs</var> <!-- Gallery navigation style (false/thumbs/dots) -->
<var name="loop">true</var> <!-- Gallery navigation loop (true/false) -->
<var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false) -->
<var name="arrows">true</var> <!-- Turn on/off arrows on the sides preview (true/false) -->
...
将 view.xml 复制到您自己的主题中并覆盖该部分。
您应该更改这些变量。
您可以在照片documentation 中找到所有可能的选项。
【讨论】：
此解决方案对我有用，希望对其他人也有帮助。
将此代码放在您在 gallery.phtml 文件中的代码之后
<script type="text/javascript">
require(
[
'jquery',
'jquery/ui'
],
function(
$
) {
$(window).load(function(){
console.log("readyyy");
$(".fotorama__stage").height($(".fotorama__img").height());
$( window ).resize(function() {
console.log("resize");
$(".fotorama__stage").height($(".fotorama__img").height());
});
})
});
</script>
【讨论】：