Question

我正在尝试使用ContentFlow javascript（http://www.jacksasylum.eu/ContentFlow/index.php）设置一个简单的幻灯片放映，我知道我遗漏了一些非常简单的东西 - 我似乎无法控制幻灯片中图像的大小。它会自动将它们缩放到我正在查看它们的设备上，但是在更高分辨率的显示器上它看起来太小了。

以下是设置的部分：

<link rel="stylesheet" type="text/css" href="ContentFlow/contentflow.css" /> 
<script type="text/javascript" src="ContentFlow/contentflow.js" load="slideshow"></script>  

<script> 
ContentFlowGlobal.setAddOnConf('slideshow', {startOnLoad: true, duration: 4000});
    </script> 

<script> 
{
        duration : 2000,   //ms
        startOnLoad : true,
        showControlls : true
    }
    </script>

这是幻灯片的正文部分：

    <div class="addon"> 
        <div class="flowBox" style=""> 
            <div id="ContentFlow_slideshow" class="ContentFlow" useAddOns="slideshow"> 
                    <!-- should be place before flow so that contained images will be loaded first --> 
<div class="loadIndicator"><div class="indicator"></div></div> 


    <div class="flow"> 

        <div class="item"> 
            <img class="content" src="images/1.jpg"/> 
            <div class="caption">Something<br/><a href="#">by Test</a></div> 
        </div> 
        <div class="item"> 
            <img class="content" src="images/2.jpg"/> 
            <div class="caption">Something<br/><a href="#">by Test</a></div> 
        </div> 
        <div class="item"> 
            <img class="content" src="images/3.jpg"/> 
            <div class="caption">Something<br/><a href="#">by Test</a></div> 
        </div> 
        <div class="item"> 
            <img class="content" src="images/4.jpg"/> 
            <div class="caption">Something<br/><a href="#">by Test</a></div> 
        </div> 
        <div class="item"> 
            <img class="content" src="images/5.jpg"/> 
            <div class="caption">Something<br/><a href="#">by Test</a></div> 
        </div> 

    </div> 
    <div class="globalCaption"></div>

如果有人能指出我的代码控制幻灯片大小的代码，或提供一些代码示例，我真的很感激！

Answer 1

查看options（然后是项目），看起来您可以将scaleFactor:添加到初始化中。

如果您希望首先计算窗口大小并得出比例公式（1 = 100％），那么您必须在开始流程之前执行此操作：

<script type="text/javascript"> 
var scale = 2 // or some formula based on window size
ContentFlowGlobal.setAddOnConf('slideshow', {startOnLoad: true, duration: 4000}, scaleFactor:scale);
</script>

Answer 2

<script tyle="text/javascript">
    var cf = new ContentFlow('contentFlow', {reflectionColor: "#000000", maxItemHeight: "100"});
</script>

我尝试了Mike提到的内容，它对我有用。如果不明显，配置列在上面。

Answer 3

您可以使用

maxItemHeight: 150,

其中150是图像的像素大小，当然可以设置为您想要的大小。

配置ContentFlow时出现问题

3 个答案: