How can i force ContentFlow to show all items when there are not enough items to fill all spaces?

Question

Hello everyone who reads this..

i'm experimenting with ContentFlow.js

i have 5 image items in the flow. Content flow is configured to show 7 on both sides. Instead of showing at least all 5 items it shows only 3 of them. Functionality is okay but i want ALL items to be showed:

<link rel="stylesheet" type="text/css" href="/js/ContentFlow/contentflow.css" media="screen" />
<script type="text/javascript" src="/js/ContentFlow/contentflow.js"></script>
<script tyle="text/javascript">
    var cf = new ContentFlow('contentFlow', {reflectionColor: "#ffffff",visibleItems:7,scaleFactor:1.3,circularFlow: false});
</script>

...

<div class="item">
    <img class="content" src="image.png" />
</div>

(this code is simplified as a showing example)

Answer 1

You can fix this in the source code of contentflow directly. I just ran into the same problem and tracked it down.

So just open the contentflow_src.js and look for the "_positionItems"-function. You'll find the following line of code:

for (var i=1; i <= this.conf.visibleItems && 2*i < this.items.length ; i++) {

Just replace it with:

for (var i=1; i <= this.conf.visibleItems && i < this.items.length ; i++) {

For me this is working just fine, but I have not tested this any further, and so this "dirty" fix might cause bugs in other cases. Use at your own risk :p

Answer 2

If the number of images you're going to show is dynamic, can you check to see the count before you load the ContentFlow? If it's below 7, then set visibleItems to that value...otherwise use 7.