Question

我已按照此处的文档：

首先加载资产。

然后创建blueimp-gallery-textFactory.js并在视频文件之前的核心文件之后加载，其中包含以下内容：

blueimp.Gallery.prototype.textFactory = function (obj, callback) {
    var $element = $('<div>')
            .addClass('text-content')
            .attr('title', obj.title);

    var iframe=$('<iframe>', {
      src: obj.href,
      frameborder: 0,
      height: '100%',
      width: '100%',
      scrolling: 'no'
    });

    $element.html(iframe);

    callback({
      type: 'load',
      target: $element[0]
    });

    return $element[0];
};

所以从原始示例的变化是我没有发出ajax请求然后运行回调，而是创建一个iframe然后运行回调。

并且还在样式表中添加了aditional css样式：

.blueimp-gallery > .slides > .slide > .text-content {
    overflow: auto;
    margin: 60px auto;
    padding: 0 60px;
    max-width: 920px;
    text-align: left;
}

我遇到的问题是onLoad / complete事件永远不会触发，而且slideLoading类总是在iframe之上。

Answer 1

我开始研究videoFactory插件，然后看看有什么可能是错的。

所以我从视频插件中偷了一些CSS：

.blueimp-gallery > .slides > .slide > .text-content > iframe {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.blueimp-gallery > .slides > .slide > .text-content > iframe {
  top: 0;
}

这（帮助）但没有解决问题。

解决问题的原因来自blueimp-gallery-video.js，并且正在使用此setTimeout函数运行回调。

blueimp.Gallery.prototype.textFactory = function (obj, callback) {
    var $element = $('<div>')
            .addClass('text-content')
            .attr('title', obj.title);

    var iframe=$('<iframe>', {
      src: obj.href,
      frameborder: 0,
      height: '100%',
      width: '100%',
      scrolling: 'no'
    });

    $element.html(iframe);

//    callback({
//      type: 'load',
//      target: $element[0]
//    });

    this.setTimeout(callback, [
      {
        type: 'load',
        target: $element[0]
      }
    ]);

    return $element[0];
};

这次问题解决了。我想从原始示例中使用$ .get ajax调用时，无需调用setTimeout，但需要使用iframe。

如何使blueimp gallery textFactory与iframe一起使用

1 个答案: