Problem configuring ContentFlow

Question

I'm trying to setup a simple slide show using ContentFlow javascript (http://www.jacksasylum.eu/ContentFlow/index.php), and I know I'm missing something very simple - I can't seem to control the size of the images in the slideshow. It automatically scales them to the device I'm viewing them on, but on a higher res monitor it just looks way too small.

Here's the portion of the setup:

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

And here's the body part of the slideshow:

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

If someone could point me to a sample that has code controlling the size of the slideshow, or provide some code samples, I would really appreciate it!

Answer 1

Looking through the options (then items) it looks like you can add scaleFactor: to the initialization.

If you want it to calc the window size first and come up with a formula for the scale (1 = 100%) then you'd have to do it before starting the flow:

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