如何使blueimp画廊textFactory工作，一个iframe

Question

我已经在这里遵循的文档：

https://github.com/blueimp/Gallery

首先加载资产separatedly。

然后创建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 /完整的事件将永远不会触发和slideLoading类将总是在iframe的顶部。

Answer 1

我开始研究videoFactory插件和youtube一个，看看有什么可能是错的。

所以，我从视频插件偷了一些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。