Finn Rudolph

Default

JSvar basic_1 = new ImageFlow();
basic_1.init({ ImageFlowID: 'basic_1' });

No reflections

JSvar basic_2 = new ImageFlow();
basic_2.init({ ImageFlowID: 'basic_2', 
                   reflections: false, 
                   reflectionP: 0.0 });

No reflections and no scrollbar

JSvar basic_3 = new ImageFlow();
basic_3.init({ ImageFlowID: 'basic_3', 
                   reflections: false, 
                   reflectionP: 0.0, 
                   slider: false });

No reflections, no scrollbar and no captions

JSvar basic_4 = new ImageFlow();
basic_4.init({ ImageFlowID: 'basic_4', 
                   reflections: false, 
                   reflectionP: 0.0, 
                   slider: false,
                   captions: false });

Image alignment (reflectionP)

JSvar basic_5 = new ImageFlow();
basic_5.init({ ImageFlowID: 'basic_5', 
                   reflections: false, 
                   reflectionP: 0.4, 
                   slider: false,
                   captions: false });

startID

JSvar behaviour_1 = new ImageFlow();
behaviour_1.init({ ImageFlowID: 'behaviour_1', 
                         startID: 3 });

startAnimation

JSvar behaviour_2 = new ImageFlow();
behaviour_2.init({ ImageFlowID: 'behaviour_2', 
                         startAnimation: true });

imageFocusMax

JSvar behaviour_3 = new ImageFlow();
behaviour_3.init({ ImageFlowID: 'behaviour_3', 
                         imageFocusMax: 1 });

imageFocusM

JSvar behaviour_4 = new ImageFlow();
behaviour_4.init({ ImageFlowID: 'behaviour_4', 
                         imageFocusM: 1.4,
                         startID:  3 });

xStep

JSvar behaviour_5 = new ImageFlow();
behaviour_5.init({ ImageFlowID: 'behaviour_5', 
                          xStep: 300 });

Navigation buttons

JSvar behaviour_6 = new ImageFlow();
behaviour_6.init({ ImageFlowID: 'behaviour_6', 
                                 buttons: true });

Enable image opacity

JSvar opacity_1 = new ImageFlow();
opacity_1.init({ ImageFlowID: 'opacity_1', 
                      opacity: true });

Change opacity strength (opacityArray)

JSvar opacity_2 = new ImageFlow();
opacity_2.init({ ImageFlowID: 'opacity_2', 
                      opacity: true,
                      opacityArray: [4,3,2,1,1] });

New window

JSvar target_1 = new ImageFlow();
target_1.init({ ImageFlowID: 'target_1, 
                    onClick: function() {window.open(this.url, '_blank');} });

New scaled window

JSvar target_2 = new ImageFlow();
target_2.init({ ImageFlowID: 'target_2', 
                    onClick: function() {window.open(this.url, '_blank', 
                                'width=500,height=500,left=200,top=200');} });

Reflection background color

JSvar reflection_1 = new ImageFlow();
reflection_1.init({ ImageFlowID: 'reflection_1', 
                         reflectionGET: '&bgc=009cec' });

CSS#reflection_1 {
	background:#009cec;
}
#reflection_1 .scrollbar {
	border-bottom:1px solid #fff;
}

White background color

JSvar reflection_2 = new ImageFlow();
reflection_2.init({ ImageFlowID: 'reflection_2', 
                         reflectionGET: '&bgc=ffffff&fade_start=20%' });

CSS#reflection_2 {
	background:#fff;
	color:#000;
	border:1px solid #ccc;
}
#reflection_2 .loading {
	border-color:#333;
}
#reflection_2 .loading_bar {
	background:#333;
}
#reflection_2 .slider {
	background:url(slider_dark.png) top left no-repeat;
}
#reflection_2 .scrollbar {
	border-bottom:1px solid #000;
}

Reflection fade start

JSvar reflection_3 = new ImageFlow();
reflection_3.init({ ImageFlowID: 'reflection_3', 
                        reflectionGET: '&fade_start=20%' });

Reflection height

JSvar reflection_4 = new ImageFlow();
reflection_4.init({ ImageFlowID: 'reflection_4', 
                         reflectionGET: '&height=20%',
                         reflectionP: 0.2 });

Transparent reflections

JSvar reflection_5 = new ImageFlow();
reflection_5.init({ ImageFlowID: 'reflection_5', 
                         reflectionPNG: true });

21:9 (Cinemascope)

JSvar proportion_1 = new ImageFlow();
proportion_1.init({ ImageFlowID: 'proportion_1', 
                          aspectRatio: 2.333, 
                          imagesHeight: 0.7 });

Extreme portrait format

JSvar proportion_2 = new ImageFlow();
proportion_2.init({ ImageFlowID: 'proportion_2', 
                          aspectRatio: 3.0, 
                          imagesM: 0.8, 
                          xStep: 70, 
                          percentLandscape: 66, 
                          percentOther: 50, 
                          imageFocusMax: 3 });

Golden ratio

JSvar proportion_3 = new ImageFlow();
proportion_3.init({ ImageFlowID: 'proportion_3', 
                          aspectRatio: 1.618 });

No image scaling

JSvar proportion_4 = new ImageFlow();
proportion_4.init({ ImageFlowID: 'proportion_4', 
                          imageScaling: false, 
                          reflections: false, 
                          xStep: 220, 
                          imageFocusMax: 2 });

Circular

JSvar circular_1 = new ImageFlow();
circular_1.init({ ImageFlowID: 'circular_1',
                      circular: true,
                      glideToStartID: false });

Circular and no scrollbar

JSvar circular_2 = new ImageFlow();
circular_2.init({ ImageFlowID: 'circular_2',
                      circular: true,
                      glideToStartID: false,
                      slider: false });

Combination

JSvar circular_3 = new ImageFlow();
circular_3.init({ ImageFlowID: 'circular_3',
                      circular: true,
                      reflections: false,
                      reflectionP: 0.4,
                      slider: false,
                      captions: false,
                      opacity: true,
                      xStep: 250,
                      imageFocusM: 1.5,
                      startID: 3 });

CSS#circular_3 {
	background-image: url(background.gif);
}

Slideshow

JSvar slideshow_1 = new ImageFlow();
slideshow_1.init({ ImageFlowID: 'slideshow_1', 
                         slideshow: true });

Autoplay

JSvar slideshow_2 = new ImageFlow();
slideshow_2.init({ ImageFlowID: 'slideshow_2',
                         slideshow: true,
                         slideshowAutoplay: true });

Speed, circular and no scrollbar

JSvar slideshow_3 = new ImageFlow();
slideshow_3.init({ ImageFlowID: 'slideshow_3',
                         slideshow: true,
                         slideshowSpeed: 3000,
                         circular: true,
                         slider: false });