PictureFlow 4.2 Ajax mode!

Beware: advanced JavaScript knowledges required in this article…
There is a new feature in PictureFlow 4.1 that didn’t come with 4.0: The Ajax mode!
But what is this? Simple, this mode you have to activate in the FlashVars (switching ajaxMode to true), allows to feed and to control PictureFlow all by JavaScript. In this mode, the XML is disabled. the first application is the Prestaflow, a brand new module for prestashop you can see here or here.
Here comes the way to take control over PictureFlow in AJAX mode!
PictureFlow, since 4.1 minor release, has capacity to dialog with 5 JS functions in your html:

1. echo(myText:String) to simply test communication between your JS and PictureFlow: This function add a simple text over the Flow in diag box
2. initFlow(): When PictureFlow is loaded and ready to load content, it says hello to JavaScript calling this function
3. killStack() to clear your set of images (Not very useful alone and automatically called when re feed the stack but exists)
4. go(id:int) to reach a specific picture by its id and make it slide to front.
5. navig(step:int): move the flow to left (negative) or right (positive) /step
6. refeed([myNewSet of object]:array, ShownPicture:Int): This very interesting function allows to feed or refeed the stack with a pre-builded array of Flow object instead of reading an XML. These object just have to have the xml tags as properties to be carried out by PictureFlow.

Example of a flow object:

var flowItem1 = {
	image : 'pictures/notsogood/135/13.jpg',
	action : 'pictures/notsogood/13.jpg',
	title : '13',
	desc : 'flowItem1'
};

But now, a little test will be more significant. So…

Let’s test this!

Here below for example, is the JS source of the example where all these functions are used, I use standard JS syntax but you can adapt it to your favorite JS Framework.

// Vars
var flowArray = [];
var iShow = 1;
var idPictureFlow = "pictureflow";
var flowItem = {};

	// Functions 
	var initFlow = function() {
		
		exempleObj(3,7);
		// Middle item at start
		iShow = Math.floor(flowArray.length/2)+1;
		// Random item at start
		//iShow = Math.floor(Math.random()*flowArray.length+1);
		thisMovie(idPictureFlow).refeed(flowArray,iShow);
		/**/
		// Neutralisation Roulette de la souris sur PictureFlow
		if(document.getElementById("pflow").addEventListener == null){ 
			// Sous IE et consort qui n´implémentent pas ECMA 
			document.getElementById("pflow").onmousewheel = onMouseWheel; 
		}else{ 
			// Safari + Chrome. 
			if (navigator.userAgent.toLowerCase().indexOf("chrome") != -1 || navigator.userAgent.toLowerCase().indexOf("safari") != -1) {
				document.getElementById("pflow").onmousewheel = onMouseWheel;
			}
			// Other (Firefox...)
			else{
				document.getElementById("pflow").addEventListener('DOMMouseScroll', onMouseWheel, false);
				
			}
		}
		
	}
	
	var killStack = function() {
		thisMovie(idPictureFlow).killStack();
	}
	
	var echo = function(txt) {
		thisMovie(idPictureFlow).echo(txt);
		//thisMovie(Id).echo('This page title --> '+document.title);
	}
	
	var navig = function(step) {
		//thisMovie(idPictureFlow).navig(step);
		thisMovie(idPictureFlow).navig(step);
	}
	
	var go = function(id) {
		thisMovie(idPictureFlow).go(id-1);
	}
	
	var goLast = function() {
		thisMovie(idPictureFlow).go(flowArray.length);
	}
	
	// Handler Event 
	var onMouseWheel = function(e){
		// L´objet event passé en paramètre n´est un objet Event qu´en ECMA, sous IE c´est juste le delta ou null 
		if (e != null && e.preventDefault != null)
		{ 
			e.preventDefault(); 
		} 
		return false; 
	} 
	
	// Example function
	var exempleObj = function (start,end){
		flowArray = [];
		for(var i=start;i<=end;i++){
			flowItem = {
			    image : 'pictures/notsogood/240/'+i+'.jpg',
			    action : 'pictures/notsogood/240/'+i+'.jpg',
			    title : 'Picture '+i,
			    title2 : 'flowItem-'+i
			};
			flowArray.push(flowItem);
		}
	}
	
	var reloadMyFlow = function(start,end) {
		exempleObj(start,end);
		// Middle item at start
		iShow = Math.floor(flowArray.length/2)+1;
		// Random item at start
		//iShow = Math.floor(Math.random()*flowArray.length+1);
		thisMovie(idPictureFlow).refeed(flowArray,iShow);
	}
	
	var thisMovie = function(movieName){
		if (navigator.appName.indexOf("Microsoft") != -1) {
			return window[movieName];
		}
		else {
			return document[movieName];
		}
	}