www.dhteumeuleu.com
  Forums · Reply · Sign Up · Search · RSS ·

dhteumeuleu forums / English / ImageFlow - reinvoke imf.create
Author Message
azez
Member

# Posted: 25 Jun 2008 00:14


hello

i have used the Ajax version and worked perfectly ( the demo as is ).

then, trying to re-invoke imf.create() with a different xml file to read from and update the current display.. nothing happens.

my last try was to start the page empty,
and invoke the imf.create() manually (using firefox js console) instead of putting in the code..
nothing happens

is there a way to pop() current images and push() images from the second xml file..
or is the second invoke imf.create() supposed to refill the display?

thx
azez
Member

# Posted: 25 Jun 2008 00:19


edit:

i mentioned above:
different xml

actually it is 2nd xml with different images and is working fine.
now i have
image-flow.xml
image-flow1.xml
image-flow2.xml


the question is regarding to retrieving the new images and reloading only.

having three links so the user can choose which gallery to show,
and onclick=imf.creat( galler_id )
should update the gallery..but nothing happens.

sorry if it is not clear .
azez
Member

# Posted: 25 Jun 2008 23:59


i have added this code to the javascript in oder to
1- null current instance.
2- fill instance with images from xml file.
it should be exactly after the create method inside return(). 

 
, 
		remove: function(){ 
			alert( instances.length); 
			instances.pop(); 
		}, 
		refill: function(div, xmlfile, horizon, size, zoom, border, sta 
rt, interval){ 
			instances.push( 
				new ImageFlow(div, xmlfile, horizon, size, zoom, border, start, i 
nterval) 
			); 
		}



now trying to inspect the DOM object to read the images ..
i found it to be JSON like but not really a JSON object:

using 3 images: 
 
#1={ 
  diapos: 
  [ 
  #2= 
  { 
	parent:#1#, 
	loaded:false, 
	title:"Nothing", 
	text:"...can come between us", 
	url:false, 
	target:"_self", 
	N:0, 
	img:{}, 
	x0:516, 
	x1:516, 
	w0:0, 
	w1:0, 
	z1:1, 
	z2:0 
 }, 
 #3={parent:#1#, loaded:false, title:"Much work", text{ : 
 }"...remains to be done before we can announce our total failure to m 
ake any progress", url:false, target:"_self", N:1, img{ :  
}{}, x0:516, x1:516, w0:0, w1:0, z1:1, z2:0} 
 ], 
 scr:false, 
 size:0.15, 
 zoom:1.8, 
 horizon:0.75, 
 bdw:10, 
 oCont:"imageFlow", 
 oc:{}, 
 scrollbar:{}, 
 text:{}, 
 title:{}, 
 legend:{}, 
 bar:{}, 
 arL:{}, arR:{}, bw:77, alw:20, arw:20, back: 
-1, view:-1, time_start:500, time_inter:250, time_out: 
500, time:1, time_dir:1, wh:516, ht:327, ws:413, N 
F:2 
}



if i try to reach
imf.instances[0].diapos['#2']
or
imf.instances[0].diapos[0]

i get instances[0] has no properties.

someone asked how to clear the stack of images,
and no reply yet.

i would appreciate if there is some clues how to finish this project and have it serving more people with refill.

thx
azez
Member

# Posted: 27 Jun 2008 18:56


i have found the answer.

having more than one gallery, where each has its own xml file..

in index.htm 

 
function cg( id ) 
{ 
 
	// remove current album 
	imf.remove(); 
	// fill new album 
	imf.refill("imageFlow", 'image-flow' + id + '.xml', 0.75, 0.15, 1.8, 
 10, 8, 4); 
}



then links that call the above function

<a href="#" onclick="cg(1)"> 1 </a><br>
<a href="#" onclick="cg(2)"> 2 </a>

-------------------------

in the imf javascript, i changed the return to the following: 

return { 
		/* ==== initialize script ==== */ 
		create : function (div, xmlfile, horizon, size, zoom, border, s 
tart, interval) { 
			/* ---- instanciate imageFlow ---- */ 
			var load = function () { 
				var loaded = false; 
				var i = instances.length; 
				while (i--) 
				{ 
					if (instances[i].oCont == div) loaded = true; 
				} 
				if (!loaded) { 
					/* ---- push new imageFlow instance ---- */ 
					instances.push( 
						new ImageFlow(div, xmlfile, horizon, size, zoom, border, start, 
 interval) 
					); 
					//alert( div +', '+ xmlfile+', '+ horizon+', '+ size+', '+ zoom+ 
', '+ border+', '+ start+', '+ interval); 
					// myWindow = window.open("", "tinyWindow", 'toolbar=0'); 
					// myWindow.document.write( instances[0] ); 
 
					/* ---- init script (once) ---- */ 
					if (!imf.initialized) { 
						imf.initialized = true; 
						/* ---- window resize event ---- */ 
						addEvent(window, 'resize', function () { 
							var i = instances.length; 
							while (i--) instances[i].resize(); 
						}); 
						/* ---- stop drag N drop ---- */ 
						addEvent(document.getElementById(div), 'mouseout', function (e) 
 { 
							if (!e) e = window.event; 
							var tg = e.relatedTarget || e.toElement; 
							if (tg && tg.tagName == 'HTML') { 
								var i = instances.length; 
								while (i--) instances[i].oc.onmousemove = null; 
							} 
							return false; 
						}); 
						/* ---- set interval loop ---- */ 
						setInterval(function () { 
							var i = instances.length; 
							while (i--) instances[i].run(); 
						}, 16); 
					} 
				} 
			} 
			/* ---- window onload event ---- */ 
			addEvent(window, 'load', function () { load(); }); 
		}, 
		remove: function(){ 
 
				/* remove mouse event */ 
				inst_count = instances.length; 
				idx = inst_count-1 ; 
				while( instances.length > 0 ) 
				{ 
					this.rmCanvas(); 
					this.rmThumbs(); 
					while(instances[idx].diapos.length > 0) 
					{ 
						instances[idx].NF--; 
						instances[idx].diapos.pop(); 
					} 
					instances.pop(); 
					idx--; 
					// alert( instances.length); 
				} 
		}, 
		refill: function(div, xmlfile, horizon, size, zoom, border, sta 
rt, interval){ 
			instances.push( 
				new ImageFlow(div, xmlfile, horizon, size, zoom, border, start, i 
nterval) 
			); 
		}, 
		getInstances: function(){ 
			return instances; 
		}, 
		rmCanvas: function(){ 
			x= document.getElementById("imageFlow") 
			arim = getElementsByClass(x, "*", "Canvas"); 
			len = arim.length -1; 
			while(len >=0) 
			{ 
			   x.removeChild( arim[len--]); 
			} 
		}, 
		rmThumbs: function(){ 
			x= document.getElementById("imageFlow") 
			arim = getElementsByClass( x, "img", "diapo") 
			len = arim.length -1; 
			while(len>=0) 
			{ 
			  x.removeChild( arim[len--]); 
			} 
		} 
	}



-----------------

also, i added a line to assign a class name to the canvas of images (reflections) :

line#47: this for firefox like:

flx.setAttribute("class", "Canvas");
line# 58: for ie:
flx.setAttribute("className", "Canvas");

and it should be working fine

thanks for sharing this script.

cheers
bobo
Member

# Posted: 14 Jul 2009 17:54


azez, i've tried your code but it only draws a new instance over a previous one and doesn't remove the old one

any ideas?
bobo
Member

# Posted: 14 Jul 2009 22:07


solved!

flx.setAttribute("class", "canvas");

not

flx.setAttribute("class", "Canvas");
Albyung
Member

# Posted: 11 Aug 2009 16:52


Thanks azez, you make my day!!!
Your answer

 B    I    U   IMG  URL  CODE  DEMO 

...  

 » Name  » Password 
 


Powered by miniBB forum software © 2001-2009