如何使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。