Question

我正在使用这个插件：

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

这是我的测试网站：

http://flexbeltsite.info/TestPages/

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

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

1）包含contentFlow的页面。正如您在转到索引时所看到的那样，contentFlow dosent可以正常工作。它仅在您单独查看_Page3.html时才有效。这个剂量帮助了我很多，因为我需要它在加载该页面时在索引页面上工作。

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

2）我还想说，当我点击其中一个图像时，它会扩展（增长动画）到包含div的整个宽度和高度，即黑色区域。然后，如果再次单击它，它会缩小回原来的形状，然后返回到旋转木马的其余部分，旋转木马正常工作。

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

3）对于第2页，离开，id喜欢使两组标签和窗格完全相互独立。正如您现在可以看到的，如果您尝试使用它们，选项卡将控制其他窗格的内容，而不仅仅是他们自己...我不想要那样。我需要1个顶部选项卡和窗格，以及1个底部选项卡和窗格。如果你好奇的话，这就是我用来制作标签和窗格的内容。

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

如果我能解决这3个问题，我们非常感激。提前谢谢。

修改的

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

<!--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>

Answer 1

Jules第二个答案是正确的，只需调用contentflow的init方法。

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

希望这有帮助。

Answer 2

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在流上加载内容，我建议您删除＆lt; html＆gt;和＆lt; body＆gt;包含文件中的标签（_Page3.html）。

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

解决此问题的方法是使用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

Answer 3

<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();
        });
  });

}）;

Answer 4

您可以通过在contentflow.js中进行以下更改，在android webview中添加对contentflow的触摸支持更换 if（this.Browser.iPhone）用 if（this.Browser.iPhone || this.Browser.WebKit）

ContentFlow（coverflow） - 需要使它工作+ Tabs和窗格

4 个答案: