ContentFlow Javascript - 使用图像以外的内容成功?

时间:2011-06-01 22:44:22

标签: javascript image slider coverflow

我想使用ContentFlow Javascript工具来显示TEXT和其他类型的HTML而不是图像。文档说it's possible但我还没有发现它是如何工作的。查看my test page,当内容不是图像时,它不会加载。本页的代码如下。有什么想法吗?

<Html>

    <script language="JavaScript" type="text/javascript" src="contentflow.js"></script>


    <div class="ContentFlow">
        <div class="loadIndicator"><div class="indicator"></div></div>
        <div class="flow">
            <div class="item" src="" title="">test content</div>
            <img class="item" src="http://jquery.bassistance.de/plugins/thickbox/images/plant4.jpg" title="Your_Image_Title"/>
    <img class="item" src="http://www.wired.com/images/article/magazine/1705/st_alphageek_f.jpg" title="Your_Image_Title"/>
            <img class="item" src="http://jquery.bassistance.de/plugins/thickbox/images/plant4.jpg" title="Your_Image_Title"/>
    <img class="item" src="http://www.wired.com/images/article/magazine/1705/st_alphageek_f.jpg" title="Your_Image_Title"/>
            <img class="item" src="http://jquery.bassistance.de/plugins/thickbox/images/plant4.jpg" title="Your_Image_Title"/>
        </div>
        <div class="globalCaption"></div>
        <div class="scrollbar"><div class="slider"><div class="position"></div></div></div>
    </div>

2 个答案:

答案 0 :(得分:1)

我遇到了同样的问题。你需要做的是将一个内部div放在“.item”div中,如下所示:

<div class="item"><div class="content">Text content to display</div></div>

作为一个警告,文档说“.item”容器本身将被缩放为特定大小,但文本将不会缩放...如果你不看,有时会导致看起来很滑稽的东西它仔细。

答案 1 :(得分:0)

我认为它应该像以下一样简单:

<div class="ContentFlow">
    <div class="loadIndicator"><div class="indicator"></div></div>
    <div class="flow">
        <div class="item">test content</div>
        <div class="item">test content2</div>
        <div class="item">test content3</div>
        <div class="item">test content4</div>
        <div class="item">
            <a href="http://stackoverflow.com">
              <span>this is also test content</span>
            </a>
        </div>
    </div>
    <div class="globalCaption"></div>
    <div class="scrollbar"><div class="slider"><div class="position"></div></div></div>
</div>