0

我使用这个插件：

http://www.jacksasylum.eu/ContentFlow/

这是我的测试站点：

http://flexbeltsite.info/TestPages/

这是主索引文件，正在加载

http://flexbeltsite.info/TestPages/_Page3.html

1) 包含内容流的页面。正如您在转到索引时所看到的那样，contentFlow dosent 工作。它仅在您单独查看 _Page3.html 时才有效。这对我有很大帮助，因为我需要它在加载该页面时在索引页面上工作。

////////////////////////////////////////

2）我还想当我点击其中一张图片时，它会扩展（增长动画）到包含 div 的全宽和全高，即黑色区域。然后，如果您再次单击它，它会收缩回原来的形状，并与转盘的其余部分一起返回，转盘将正常工作。

////////////////////////////////////////

3) 至于第二页，离开，id 喜欢让两组选项卡和窗格完全独立工作。正如您现在所看到的，如果您尝试使用它们，这些选项卡将控制其他窗格的内容，而不仅仅是它们自己的...我不希望那样。我需要 1 组顶部选项卡和窗格，以及 1 组底部选项卡和窗格。如果你好奇的话，这就是我用来制作选项卡和窗格的方法。

http://flowplayer.org/tools/tabs/index.html

如果我能解决这三个问题，我将不胜感激。提前致谢。

编辑：

这是我正在尝试的最新一批代码，但我仍然无法让它工作。没有什么不同的事情发生。为什么？我究竟做错了什么？

<!--Page Loading Mechanism-->
<script type="text/javascript">
    $( document ).ready( function() {
        $( 'a.dynamicLoad' ).click( function( e ) {
            e.preventDefault();   // prevent the browser from following the link
            e.stopPropagation();  // prevent the browser from following the link


            $( '#MainWrapper' ).load( $( this ).attr( 'href' ) , function() {
            /* Content is now loaded */
            ThumbnailScroller("tsv_container","vertical",10,800,"easeOutCirc",0.4,500);

    /*Newest Recommended Code from curlackhacker*/
        $.ajax({ url: $( this ).attr( 'href' ), 
        success: function() {
                var contentFlow = new ContentFlow('.ContentFlow');
                contentFlow._init();
       }}); 
        });
      });

   });


</script>
4

4 回答 4

2

Jules 2nd answer is correct, just call the init method of the contentflow.

$.ajax({ url: $( this ).attr( 'href' ), 
        success: function() {
                var contentFlow = new ContentFlow('the id of your content flow');
                contentFlow._init();
       }});

Hope this helps.

于 2011-01-20T12:10:37.570 回答
0

您可以通过在 contentflow.js 中进行以下更改将 if(this.Browser.iPhone) 替换为 if(this.Browser.iPhone || this.Browser.WebKit) 在 android webview 中添加对内容流的触摸支持

于 2013-06-24T07:56:05.320 回答
0 
<script type="text/javascript">
$( document ).ready( function() {
    $( 'a.dynamicLoad' ).click( function( e ) {
        e.preventDefault();   // prevent the browser from following the link
        e.stopPropagation();  // prevent the browser from following the link


        $( '#MainWrapper' ).load( $( this ).attr( 'href' ) , function() {
           /* Content is now loaded */
           ThumbnailScroller("tsv_container","vertical",10,800,"easeOutCirc",0.4,500);

           //Initiates your contentflow -Jules.
           var contentFlow = new ContentFlow('.ContentFlow');
           contentFlow._init();
        });
  });

});

于 2011-02-07T16:11:05.403 回答
0

1) 几点说明。当您通过 $( '#MainWrapper' ).load( $( this ).attr( 'href' ) ); 加载 page3 时 您正在将 url 的内容加载到 mainwrapper 中。这样做很好，但您的 page3 实际上是一个包含标签的整个 HTML 页面。所以你最终得到的是你的主页类似于（有点缩短）：

<html>
<body>
<div id="MainWrapper">
    <html>
        <head>
            <script language="JavaScript" type="text/javascript" src="ContentFlow/contentflow.js"></script> 
        </head>
        <body>
             Your page3 content...
        </body>
    </html>
</div> 

<div align="center"></div> 
</body> 
</html>

您可以看到不是正确的 HTML，在另一个 body 标记内有一个 html 和一个 body 标记。因此，如果您计划使用 JQuery 在流上加载内容，我建议您从包含的文件 (_Page3.html) 中删除 <html> 和 <body> 标记。

2）然后，您的内容流不起作用的原因是因为该库是自动的。使用身体负荷功能启动。因此，当您的主页 HTML 已加载时，将调用该函数。但只有在那之后，您才触发 JQuery 加载函数将 _Page3.html 及其脚本加载到您的主页中，因此永远不会调用 contentflow 库中配置您的流程的函数。

解决此问题的一种方法是利用 ajax 调用的“成功”功能。当您的页面完成加载外部页面时，将触发该功能。这意味着您的 _Page3.html 已包含在您的主页中，然后应该配置内容流。

$.ajax({ url: $( this ).attr( 'href' ), 
        success: function() {
                //Not sure about this method name, you should look it up in contentflow.js
                onloadInit();
       }});

3) 最后，您可以使用 contentflow 库的 onclickActiveItem := function(obj item) 方法将图像放入标题的黑色部分。只需在此处添加您自己的函数，通过选择选定的图像并使用 JQuery 修改标题的内容来显示选定的图像。如此处所述：http ://www.jacksasylum.eu/ContentFlow/docu.php

于 2011-01-18T15:40:28.387 回答