时间戳

首页 > 解决方案 > Fotorama如何嵌入iframe？

fotorama - Fotorama如何嵌入iframe？

问题描述

需要将 iframe 添加到 fotorama 库中。

标签图像可以固定。src 应该是要传入的参数。

请注意，这是在 Magento 2.0 上

标签： fotorama

解决方案

首先访问 dom 元素和 api 对象。

// Get the Dom Element.
var $fotorama = jQuery('div.gallery-placeholder > div.fotorama');

// Get the API object.
var fotorama = $fotorama.data('fotorama');

监听 fotorama:load 事件并用 iframe 替换内容。

// On load handler for fotorama.
$fotorama.on('fotorama:load', function fotorama_onLoad(e, fotorama, extra) {
    if (extra.frame.type === 'iframe') {
        // Replace the contents with the iframe.
        extra.frame.$stageFrame.html('<iframe type="text/html" width="100%" height="100%" src="' + extra.frame.src + '" frameborder="0" scrolling="no" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>');
    }
});

接下来，您可以像这样推送 iframe 的新数据。

fotorama.push({ img: 'iframe.png', thumb: 'iframe.png', 'src': 'http://someurlforiframe', type: 'iframe' });

注意：您希望 iframe.png 或其他一些缩略图大小的图像可以加载。

我用的是 80x80 的。

我能够使用自定义模块中的模板中的此代码成功地将 3dvieweronline 嵌入到图库中，并使用全屏功能。

推荐阅读