Question

以下是使用HTML格式编码的三个静态图像的ContentFlow的工作示例：http://dl.dropbox.com/u/27409695/WB-Browser/example.html

适用于FF，IE8，Safari和Chrome。

我稍微调整了一下这个页面，以便使用jFlickrFeed获取Flickr提要。它在webkit浏览器（Safari，Chrome）中运行良好，但在FF或IE中失败。请参阅下面的具体错误。

http://dl.dropbox.com/u/27409695/WB-Browser/example-jflickrfeed.html

这是我正在使用的document.ready处理程序：

<script>
    jQuery(document).ready(function($) {
        $('.flow').jflickrfeed({
            limit: 3,
            qstrings: {
                id: '60829137@N05'
            },
            itemTemplate: 
                '<img class="item" src="{{image_b}}" />' 
        }, function() {
            var wbFlow = new ContentFlow('wbContainer', { 
                circularFlow:   false,
                startItem:      0
            });
        });
    });
</script>

知道为什么这不起作用吗？

更新：只是想添加一些信息，以防有人帮助我。 Firefox和IE似乎都在contentflow_src.js的1652行上窒息。当我尝试移动滑块时，Firefox抛出以下错误：“this.items [index]未定义”

IE说第1652行：“'this.items [...]。label'为空或不是对象”

此外，IE抱怨第1119行：“'this._activeItem.index'为null或不是对象”

但是，再次，Chrome和Safari不会抛出任何错误，并且脚本在这两个浏览器中完美运行。

Answer 1

我已经做了一段时间了，我找到了一个解决方案。

如上所示，我在jFlickrFeed回调中创建了一个新的CF对象，但这不起作用。

相反，我从文档的头部删除了CF标记。而不是在回调中创建一个新的CF对象，我动态加载整个ContentFlow脚本：

function() {
    var script = document.createElement('script');
    script.setAttribute('src', 'contentflow.js');
    script.setAttribute('type', 'text/javascript');
    document.getElementsByTagName('head')[0].appendChild(script);
});

了解它的工作原理：http://dl.dropbox.com/u/27409695/WB-Browser/example2-jflickrfeed.html

但这种方法存在问题。有一件事，ContentFlow做了很多自己的动态加载（插件，样式表等）。使用上面的方法，一些函数会中断（特别是在Internet Explorer中），需要更改contentflow.js脚本。

如果您有兴趣了解我如何更改脚本，请查看此处：http://dl.dropbox.com/u/27409695/WB-Browser/contentflow_src_modified.js

当我尝试将它与jFlickrFeed结合使用时，为什么在Firefox，IE中ContentFlow失败？

1 个答案: