JavaScript Plugin Help - ContentFlow

Question

I recently downloaded a JavaScript plugin (found here: http://www.jacksasylum.eu/ContentFlow/download.php) and I'm trying to change it up a bit. So far, all the edits that I've made to the code have been done by reading the walkthroughs under the documentation tab on that site. I've searched and searched and I can only find one piece of code that I THINK could be what I need to change. I just don't have enough JavaScript knowledge to do it.

If you have downloaded that plugin before, or you read some of the documentations tab, here's the picture of what's going on.

The icons are spread out way too far. (Ignore the icons, I just used the Facebook and Twitter because they were easy.) I need them to be closer. (They are spreading out over a 960px wide div!)

I found this code that may be what I'm looking for. It's called the StepWidth. I have no clue if that's what I need or not. Can anyone fill me in?

calcStepWidth: function(diff) {
        var vI = this.conf.visibleItems;
        var items = this.items.length;
        items = items == 0 ? 1 : items;
        if (Math.abs(diff) > vI) {
            if (diff > 0) {
                var stepwidth = diff - vI;
            } else {
                var stepwidth = diff + vI;
            }
        } else if (vI >= this.items.length) {
            var stepwidth = diff / items;
        } else {
            var stepwidth = diff * ( vI / items);
            //var stepwidth = diff/absDiff * Math.max(diff * diff,Math.min(absDiff,0.3)) * ( vI / this.items.length);
            //var stepwidth = this.flowSpeedFactor * diff / this.visibleItems;
            //var stepwidth = this.flowSpeedFactor * diff * ( this.visibleItems / this.items.length)
            //var stepwidth = this.flowSpeedFactor * diff / this._millisecondsPerStep * 2; // const. speed
        }
        return stepwidth;

This might be easier if you have the plugin, but any knowledge will help.

Answer 1

First Install ContentFlowAddOn_DEFAULT.js, then search on " calcCoordinates: function (item) " you will find:

---

calcCoordinates: function (item) {
            var rP = item.relativePosition;
            //var rPN = item.relativePositionNormed;
            var vI = this.conf.visibleItems; 

            var f = 1 - 1/Math.exp( Math.abs(rP)*0.75);
            var x =  item.side * vI/(vI+1)* f; 
            var y = 1;

            return {x: x, y: y};
        },

---

try to minimize the value 0.75 (i.e 0.3) or less till you reach the proper distance you are looking for

Answer 2

First, this is not a JQuery plugin. Your issue is both with size of your images and the width of your contentFlow container. The small icons spread out to fill the 960px container. You need to increase the size of your images and/or reduce the width of your the containing div for the contentflow. You can use px or %. As an example, on the contentflow site, you can see that the gallery on the right on the main page has a div width:70%;.