标签: fotorama

我在Productdetail页面上有一个带有ProdcutSlider的问题.我不知道如何设置容器宽度和高度.

我找到了Fotorama插件的一些配置,但没有关于widht和height的信息.

我的Productimages有另一个方面.

<div class="fotorama__stage" style="width: 581px; height: 581px; line-height: 581px;">

这是插件的尺寸.

我的图像尺寸是530px x 350px,因此有太多的空白区域(顶部/底部).

有任何想法吗？

我正在使用magento 2 porto主题.在产品详细信息页面中,我需要将fotorama滑块的缩略图设置为左侧垂直.可能吗？？请帮忙

如果屏幕宽度小于768px,我需要将产品图库导航缩略图移动到水平位置.

为此,我需要连接一个在完全加载库后触发的回调.

如何通过以下x-magento-init方法初始化图库窗口小部件时执行此操作:

<script type="text/x-magento-init">
    {
        "[data-gallery-role=gallery-placeholder]": {
            "mage/gallery/gallery": {
                ...

            }
        }
    }
</script>

我尝试添加:

<script type="text/javascript">
    require(['jquery', 'mage/gallery/gallery'], function($, gallery){
        console.log($('[data-gallery-role=gallery-placeholder]').data('gallery'));
    });
</script>

它输出undefined.但是当我从控制台调用相同的东西时(在加载库之后)它包含了我可以调用fotorama API方法的库对象.

那么如何.data('gallery')在图库初始化后获取对象？

非常感谢!

我正在使用美丽而优秀的Fotorama滑块,但我有一个问题!

默认情况下,滑块位于左侧顶部!

我只想把它放在页面的中心位置.

我在.css中找到了,但我找不到答案.

你能帮我吗？

我刚刚安装了 Fotorama javascript 脚本。但是，当我使用 data-arrows="true" 启用箭头（您可以在其中设置的属性）时，它们根本不显示。

这是删除图像链接的代码：

<div class="fotorama" data-nav="thumbs" data-width="200;" 
data-height="200" data-arrows="true" data-click="true">

<img src="Image 1" alt="" width="200" height="200" /> 
<img src="Image 2" alt="" width="200" height="200" /> 
<img src="Image 3" alt="" width="200" height="200" />
</div>

用过Fotorama的人有遇到过这个问题吗？或者谁能​​测试一下，看看是不是只有我一个人这样。您可以在以下位置下载脚本： http: //fotorama.io/

这是它如何工作的演示：http://fotorama.io/examples/arrows-click-swipe.html

谢谢。

我需要增加缩略图之间的间距。我该怎么做呢？

我只有 5 张图片，大拇指都聚集在中心看起来很有趣。

许多感谢。

我在我的网站上使用 jquery gallery fotorama ( http://fotorama.io )，我尝试通过将鼠标悬停在缩略图上来实现图像更改，例如http://www.homeaway.co.uk/p3530150#photos画廊。

我阅读了 API 文档并搜索了任何解决方案，但我不知道。

感谢您的帮助

杰华

我在fotorama中使用ajax有两个问题

i)在ajax之前,我的代码是:

<div id="AjaxPhoto" class="fotorama" data-nav="thumbs" data-ratio="4/3"></div>

在ajax之后,我的代码是:

<div id="AjaxPhoto" class="fotorama" data-nav="thumbs" data-ratio="4/3">
  <img src="1.jpg" />
  <img src="2.jpg" />
</div>

在这种情况下,fotorama可能起作用或不起作用

ii)当我清除数据时,假设fotorama"成功"工作

$("#AjaxPhoto").empty();
$(".fotorama--hidden").remove();

然后添加其他图像,fotorama完全不再工作.fotorama支持ajax吗？

如何在fotorama中始终显示缩略图？有一个只有一个图像的图库,我也想显示缩略图,只有当有两个图片或更多时才会显示它们.

我正在使用fotorama js插件作为产品库。单击主图像（而非缩略图）时如何打开全屏模式？我想允许用户通过单击图像而不是右上角的全屏图标来打开全屏模式。

这个答案对我不起作用：https : //stackoverflow.com/a/19064471/4680550