[Résolu] carousel en JavaScript - script complet (il y a une erreur, mais je trouve pas où) par Webmaster_chrysalide - page 1

Bonjour et merci de ta réponse, je comencais à désespérer

Oui c'est magnigiquement fait. j'avais vu ce travail en flash.. du coup j'avais essayer avec mes moyens à moi de le fair. Mais le bricolage de png et de gif en rollover et tout..au bout d'un moment, on a envi de passer à un site mieux fait qu'avec du bidouillage

Après de longues recherches, j'ai été heureux de voir ce travail là. malheureusement comme je l'ai dit ça beug un peut. le résultat que j'obtient maintenant après d'autres test sur ce script, est presque le bon, sauf que malgré tout mes efforts, les images ne s'affichent pas.

voici donc les codages et les scripts comme demandé:

1 (tout d'bord la page "index.html":

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ImageFlow</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" />

<!-- This includes the ImageFlow CSS and JavaScript -->
<link rel="stylesheet" href="imageflow.css" type="text/css" />
<script type="text/javascript" src="imageflow.packed.js"></script>

</head>
<body>
<h1>ImageFlow</h1>

<!-- This is all the XHTML ImageFlow needs -->
<div id="myImageFlow" class="imageflow">
	<img src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 1" />
	<img src="img/img2.png" longdesc="img/img2.png" width="300" height="400" alt="Image 2" />
	<img src="img/img3.png" longdesc="img/img3.png" width="400" height="400" alt="Image 3" />
	<img src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 4" />
	<img src="img/img2.png" longdesc="img/img2.png" width="300" height="400" alt="Image 5" />
	<img src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 6" />
	<img src="img/img2.png" longdesc="img/img2.png" width="300" height="400" alt="Image 7" />
	<img src="img/img3.png" longdesc="img/img3.png" width="400" height="400" alt="Image 8" />
	<img src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 9" />
	<img src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 10" />
	<img src="img/img2.png" longdesc="img/img2.png" width="300" height="400" alt="Image 11" />
	<img src="img/img3.png" longdesc="img/img3.png" width="400" height="400" alt="Image 12" />
	<img src="img/img2.png" longdesc="img/img2.png" width="300" height="400" alt="Image 13" />
	<img src="img/img3.png" longdesc="img/img3.png" width="400" height="400" alt="Image 14" />
	<img src="img/img3.png" longdesc="img/img3.png" width="400" height="400" alt="Image 15" />
</div>

</body>
</html>

2 le Design (CSS)(style.css):

@charset "utf-8";

/* These are just the general site styles. 
   It has nothing to do with ImageFlow
========================================== */
@media screen, projection, print {
	* { 
		font-family:verdana, arial, helvetica, sans-serif;
		font-size:100.01%;
	}
	html {
		height:100%;
		width:100%;
	}
	body {
		color:#fff;
		background-color:#000;
		font-size:0.8em;
		line-height:1.4em;
		padding:1em 0;
		margin:0;
	}
	a {
		color:#fff;
	}
	h1 {
		font-size:2.2em;
		text-align:center;
		margin:0.4em 0 1.3em 0;
	}
}

2 bis le Design (CSS)(imageflow.css):

@charset "utf-8";

/* ImageFlow Settings - CSS 2.1
==================================== */
@media screen, projection {
	.imageflow {
		visibility:hidden;
		position:relative; 
		text-align:left;
		width:100%;
		overflow:hidden;
	}
	.imageflow img {
		visibility:hidden;
		position:absolute; 
		top:0px;
		border:none;
		-ms-interpolation-mode:bicubic; /* Enables bicubic image resampling for the IE7 */
	}
	.imageflow p{
		text-align:center;
		margin:0 auto;
	}
	.imageflow .loading {
		position:relative;
		left:50%;
		margin-left:-106px;
		width:200px;
		height:15px;
		padding:5px;
		visibility:visible;
		border:1px solid white;
	}
	.imageflow .loading_bar {
		height:15px;
		width:1%;
		background:#fff;
		visibility:visible;
	}
	.imageflow .caption {
		font-weight:bold;
		position:relative; 
		text-align:center;
		z-index:10000;
	}
	.imageflow .scrollbar {
		visibility:hidden;
		position:relative; 
		border-bottom:1px solid #b3b3b3;
		z-index:10001;
	}
	.imageflow .slider {
		position:absolute;
		margin-top:-7px;
		margin-left:-7px;
		z-index:10002;
		background-image:url(slider.png);
		background-repeat:no-repeat;
		width:14px;
		height:14px;
	}
}

3 Les documents JS:
3.1=imageflow.packed.js:

/*
Name:       ImageFlow
Version:    1.1 (March 13 2008)
Author:     Finn Rudolph
Support:    http://finnrudolph.de/ImageFlow

Licence:    ImageFlow is licensed under a Creative Commons
            Attribution-Noncommercial 3.0 Unported License
            (http://creativecommons.org/licenses/by-nc/3.0/).

            You are free:
                + to Share - to copy, distribute and transmit the work
                + to Remix - to adapt the work

            Under the following conditions:
                + Attribution. You must attribute the work in the manner specified by the author or licensor
                  (but not in any way that suggests that they endorse you or your use of the work).
                + Noncommercial. You may not use this work for commercial purposes.

            + For any reuse or distribution, you must make clear to others the license terms of this work.
            + Any of the above conditions can be waived if you get permission from the copyright holder.
            + Nothing in this license impairs or restricts the author's moral rights.

Credits:    This script is based on Michael L. Perrys Cover flow in Javascript [1].
            The reflections are generated server-sided by a slightly hacked version
            of Richard Daveys easyreflections [2] written in PHP. The mouse wheel
            support is an implementation of Adomas Paltanavicius JavaScript mouse
            wheel code [3]. It also uses the domReadyEvent from Tanny O'Haley [4].

            [1] http://www.adventuresinsoftware.com/blog/?p=104#comment-1981
            [2] http://reflection.corephp.co.uk/v2.php
            [3] http://adomas.org/javascript-mouse-wheel/
            [4] http://tanny.ica.com/ICA/TKO/tkoblog.nsf/dx/domcontentloaded-for-browsers-part-v
*/

/* Packed ImageFlow constructor and DOMContentLoaded event handler */
eval(function(p,a,c,k,e,r){e=function(c){return(c<62?'':e(parseInt(c/62)))+((c=c%62)>35?String.fromCharCode(c+29):c.toString(36))};if('0'.replace(0,e)==0){while(c--)r[e(c)]=k[c];k=[function(e){return r[e]||e}];e=function(){return'([79q-vx-zA-Z]|[1-3]\\w)'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('r ImageFlow(){7.25={1A:1.964,26:t,27:\'1o\',y:\'imageflow\',1p:1.0,1B:4,28:0.67,29:1.0,2a:r(){s.location=7.2b},1d:v,1e:[10,8,6,4,2],1C:118,1D:S,2c:t,1E:t,2d:\'\',1f:0.5,2e:v,2f:0.6,1q:t,2g:\'e-resize\',T:14,2h:1,2i:v,12:150};q a=7;7.13=r(b){q c=new Array(\'1A\',\'26\',\'27\',\'29\',\'y\',\'1p\',\'1B\',\'28\',\'2a\',\'1d\',\'1e\',\'1C\',\'1D\',\'2c\',\'1E\',\'2d\',\'1f\',\'2e\',\'2f\',\'1q\',\'2g\',\'T\',\'2h\',\'2i\',\'12\');q d=c.1g;U(q e=0;e<d;e++){q f=c[e];7[f]=(b!==1F&&b[f]!==1F)?b[f]:a.25[f]}q h=s.G(a.y);9(h){h.u.1G=\'2j\';7.D=h;9(7.2A()){7.B=s.G(a.y+\'_2\');7.1H=s.G(a.y+\'_3\');7.1r=s.G(a.y+\'_1\');7.1I=s.G(a.y+\'_4\');7.1J=[];7.15=0;7.L=0;7.1s=0;7.1K=0;7.1L=t;7.1M=t;7.I=v;9(7.1q===v){7.1r.u.1t=\'1N\'}q i=7.D.2E;q g=J.M(i/a.1A);s.G(a.y+\'_0\').u.paddingTop=((g*0.5)-22)+\'F\';h.u.16=g+\'F\';7.1P()}}};7.2A=r(){q b=s.17(\'1h\');b.z(\'V\',a.y+\'_2\');b.z(\'1i\',\'2l\');b.z(\'1j\',\'2l\');q c=H;q d=7.D.C.1g;U(q e=0;e<d;e++){c=7.D.C[e];9(c&&c.1Q==1&&c.1R==\'1S\'){9(a.1E===t){q f=\'2\';9(a.2e===t){f=\'3\'}q h=c.18(\'2m\',2);h=\'reflect\'+f+\'.php?img=\'+h+a.2d;c.z(\'2m\',h)}q i=c.cloneNode(t);b.N(i)}}q g=s.17(\'p\');q j=s.2F(\' \');g.z(\'V\',a.y+\'_0\');g.N(j);q k=s.17(\'1h\');k.z(\'V\',a.y+\'_5\');k.z(\'1i\',\'2n\');k.z(\'1j\',\'2n\');q m=s.17(\'1h\');m.z(\'V\',a.y+\'_6\');m.z(\'1i\',\'2I\');m.z(\'1j\',\'2I\');k.N(m);q n=s.17(\'1h\');n.z(\'V\',a.y+\'_3\');n.z(\'1i\',\'2J\');n.z(\'1j\',\'2J\');q l=s.17(\'1h\');l.z(\'V\',a.y+\'_1\');l.z(\'1i\',\'2K\');l.z(\'1j\',\'2K\');q o=s.17(\'1h\');o.z(\'V\',a.y+\'_4\');o.z(\'1i\',\'1q\');o.z(\'1j\',\'1q\');l.N(o);q p=v;9(a.D.N(b)&&a.D.N(g)&&a.D.N(k)&&a.D.N(n)&&a.D.N(l)){U(e=0;e<d;e++){c=7.D.C[e];9(c&&c.1Q==1&&c.1R==\'1S\'){7.D.removeChild(c)}}p=t}O p};7.1P=r(){q b=a.2L();9(b<S||a.1M===t&&a.2c===t){9(a.1M===t&&b==S){a.1M=v;A.W(a.1P,S)}E{A.W(a.1P,40)}}E{s.G(a.y+\'_0\').u.1t=\'1N\';s.G(a.y+\'_5\').u.1t=\'1N\';A.W(a.2M,1000);a.2N();a.x.13();a.1T.13();a.1U(t);s.G(a.y+\'_1\').u.1G=\'2j\';q c=a.2h-1;9(c<0){c=0}9(c>a.P){c=a.P-1}a.1k(c);9(a.2i===t){a.1V(5000)}}};7.2L=r(){q b=a.B.C.1g;q c=0,d=0;q e=H;U(q f=0;f<b;f++){e=a.B.C[f];9(e&&e.1Q==1&&e.1R==\'1S\'){9(e.2o===t){d++}c++}}q h=J.M((d/c)*S);q i=s.G(a.y+\'_6\');i.u.19=h+\'%\';q g=s.G(a.y+\'_0\');q j=s.2F(\'2n 2l \'+d+\'/\'+c);g.replaceChild(j,g.firstChild);O h};7.1U=r(){7.X=a.B.2E;7.1u=J.M(a.X/a.1A);7.2p=a.1B*a.12;7.1l=a.X*0.5;7.T=a.T*0.5;7.1a=(a.X-(J.M(a.T)*2))*a.2f;7.2q=J.M(a.1u*a.28);a.D.u.16=a.1u+\'F\';a.B.u.16=a.2q+\'F\';a.1H.u.19=a.X+\'F\';a.1H.u.2O=J.M(a.X*0.02)+\'F\';a.1r.u.19=a.1a+\'F\';a.1r.u.2O=J.M(a.X*0.02)+\'F\';a.1r.u.2Q=J.M(a.T+((a.X-a.1a)/2))+\'F\';a.1I.u.2R=a.2g;a.1I.onmousedown=r(){a.x.2S(7);O v};q b=(a.1E===t)?a.1f+1:1;q c=a.B.C.1g;q d=0;q e=H;U(q f=0;f<c;f++){e=a.B.C[f];9(e!==H&&e.1Q==1&&e.1R==\'1S\'){7.1J[d]=f;e.2b=e.18(\'longdesc\');e.xPosition=(-d*a.12);e.i=d;9(a.1L){9(e.18(\'19\')!==H&&e.18(\'16\')!==H){e.w=e.18(\'19\');e.h=e.18(\'16\')*b}E{e.w=e.19;e.h=e.16}}9((e.w)>(e.h/(a.1f+1))){e.Q=a.1C;e.1W=a.1C}E{e.Q=a.1D;e.1W=a.1D}e.u.2R=a.27;d++}}7.P=a.1J.1g;9(a.1L){a.1L=v}a.1k(a.L);a.1V(a.15)};7.1V=r(b){7.15=b;7.Y=a.P;U(q c=0;c<a.P;c++){q d=a.B.C[a.1J[c]];q e=c*-a.12;9((e+a.2p)<a.1K||(e-a.2p)>a.1K){d.u.1G=\'hidden\';d.u.1t=\'1N\'}E{q f=(J.sqrt(10000+b*b)+S)*a.29;q h=b/f*a.1l+a.1l;d.u.1t=\'block\';q i=(d.h/d.w*d.Q)/f*a.1l;q g=0;1v(i>a.1u){1m v:g=d.Q/f*a.1l;K;1o:i=a.1u;g=d.w*i/d.h;K}q j=(a.2q-i)+((i/(a.1f+1))*a.1f);d.u.2T=h-(d.Q/2)/f*a.1l+\'F\';9(g&&i){d.u.16=i+\'F\';d.u.19=g+\'F\';d.u.top=j+\'F\'}d.u.1G=\'2j\';1v(b<0){1m t:7.Y++;K;1o:7.Y=a.Y-1;K}1v(d.i==a.L){1m v:d.2U=r(){a.1k(7.i)};K;1o:7.Y=a.Y+1;9(d.2b!==\'\'){d.2U=a.2a}K}d.u.Y=a.Y}b+=a.12}};7.1k=r(b){q c=-b*a.12;7.1s=c;7.1K=c;7.L=b;q d=a.B.C[b].18(\'alt\');9(d===\'\'||a.26===v){d=\'&nbsp;\'}a.1H.innerHTML=d;9(a.x.I===v){7.Z=(b*a.1a)/(a.P-1)-a.x.2r;a.1I.u.2Q=(a.Z-a.T)+\'F\'}9(a.1d===t||a.1p!==a.25.1p){a.1X(a.B.C[b],a.1e[0]);a.B.C[b].Q=a.B.C[b].Q*a.1p;q e=0;q f=0;q h=0;q i=a.1e.1g;U(q g=1;g<(a.1B+1);g++){9((g+1)>i){e=a.1e[i-1]}E{e=a.1e[g]}f=b+g;h=b-g;9(f<a.P){a.1X(a.B.C[f],e);a.B.C[f].Q=a.B.C[f].1W}9(h>=0){a.1X(a.B.C[h],e);a.B.C[h].Q=a.B.C[h].1W}}}9(a.I===v){A.W(a.2s,50);a.I=t}};7.2s=r(){1v(a.1s<a.15-1||a.1s>a.15+1){1m t:a.1V(a.15+(a.1s-a.15)/3);A.W(a.2s,50);a.I=t;K;1o:a.I=v;K}};7.1X=r(b,c){9(a.1d===t){b.u.1d=c/10;b.u.filter=\'alpha(1d=\'+c*10+\')\'}};7.2N=r(){9(A.11){a.D.11(\'DOMMouseScroll\',a.2t,v)}a.D.onmousewheel=a.2t};7.2t=r(b){q c=0;9(!b){b=A.1Y}9(b.2W){c=b.2W/120}E 9(b.2X){c=-b.2X/3}9(c){a.1Z(c)}9(b.2Y){b.2Y()}b.returnValue=v};7.1Z=r(b){q c=v;q d=0;9(b>0){9(a.L>=1){d=a.L-1;c=t}}E{9(a.L<(a.P-1)){d=a.L+1;c=t}}9(c===t){a.1k(d)}};7.x={1w:H,2u:0,20:0,2r:0,I:v,13:r(){a.1n(a.D,\'mousemove\',a.x.2Z);a.1n(a.D,\'30\',a.x.2v);a.1n(s,\'30\',a.x.2v);a.D.onselectstart=r(){q b=t;9(a.x.I===t){b=v}O b}},2S:r(b){a.x.1w=b;a.x.2u=a.x.20-b.offsetLeft+a.Z},2v:r(){a.x.1w=H;a.x.I=v},2Z:r(b){q c=0;9(!b){b=A.1Y}9(b.31){c=b.31}E 9(b.32){c=b.32+s.2w.33+s.documentElement.33}a.x.20=c;9(a.x.1w!==H){q d=(a.x.20-a.x.2u)+a.T;9(d<(-a.Z)){d=-a.Z}9(d>(a.1a-a.Z)){d=a.1a-a.Z}q e=(d+a.Z)/(a.1a/(a.P-1));q f=J.M(e);a.x.2r=d;a.x.1w.u.2T=d+\'F\';9(a.L!==f){a.1k(f)}a.x.I=t}}};7.1T={13:r(){s.onkeydown=r(b){a.1T.34(b)}},34:r(b){q c=a.1T.35(b);1v(c){1m 39:a.1Z(-1);K;1m 37:a.1Z(1);K}},35:r(b){b=b||A.1Y;O b.keyCode}};7.1n=r(b,c,d){9(b.11){b.11(c,d,v)}E 9(b.36){b["e"+c+d]=d;b[c+d]=r(){b["e"+c+d](A.1Y)};b.36("on"+c,b[c+d])}};7.2M=r(){q b=A.21;9(1x A.21!=\'r\'){A.21=r(){a.1U()}}E{A.21=r(){9(b){b()}a.1U()}}}}q R={2x:"R",1y:{},1b:1,1z:v,2y:H,38:r(b){9(!b.$$1b){b.$$1b=7.1b++;9(7.1z){b()}7.1y[b.$$1b]=b}},remove:r(b){9(b.$$1b){delete 7.1y[b.$$1b]}},1c:r(){9(7.1z){O}7.1z=t;U(q b in 7.1y){7.1y[b]()}},23:r(){9(7.1z){O}9(/KHTML|WebKit/i.3a(navigator.userAgent)){9(/loaded|2o/.3a(s.3b)){7.1c()}E{W(7.2x+".23()",S)}}E 9(s.G("2z")){O t}9(1x 7.2y==="r"){9(1x s.3c!==\'1F\'&&(s.3c(\'2w\')[0]!==H||s.2w!==H)){9(7.2y()){7.1c()}E{W(7.2x+".23()",250)}}}O t},13:r(){9(s.11){s.11("DOMContentLoaded",r(){R.1c()},v)}W("R.23()",S);r b(){R.1c()}9(1x 1n!=="1F"){1n(A,"3d",b)}E 9(s.11){s.11("3d",b,v)}E 9(1x A.24==="r"){q c=A.24;A.24=r(){R.1c();c()}}E{A.24=b}/*@cc_on @9(@_win32||@_win64)s.write("<3e V=2z defer 2m=\\"//:\\"><\\/3e>");q d=s.G("2z");d.onreadystatechange=r(){9(7.3b=="2o"){R.1c()}};@end @*/}};q domReady=r(b){R.38(b)};R.13();',[],201,'|||||||this||if|||||||||||||||||var|function|document|true|style|false||MouseDrag|ImageFlowID|setAttribute|window|imagesDiv|childNodes|ImageFlowDiv|else|px|getElementById|null|busy|Math|break|imageID|round|appendChild|return|max|pc|domReadyEvent|100|sliderWidth|for|id|setTimeout|iWidth|zIndex|newSliderX||addEventListener|xStep|init||current|height|createElement|getAttribute|width|scrollbarWidth|domReadyID|run|opacity|opacityArray|reflectionP|length|div|class|className|glideTo|size|case|addEvent|default|imageFocusM|slider|scrollbarDiv|target|display|maxHeight|switch|object|typeof|events|bDone|aspectRatio|imageFocusMax|percentLandscape|percentOther|reflections|undefined|visibility|captionDiv|sliderDiv|indexArray|memTarget|firstRefresh|firstCheck|none||loadingProgress|nodeType|nodeName|IMG|Key|refresh|moveTo|pcMem|setOpacity|event|handleMouseWheel|mouseX|onresize||schedule|onload|defaults|captions|imageCursor|imagesHeight|imagesM|onClick|url|preloadImages|reflectionGET|reflectionPNG|scrollbarP|sliderCursor|startID|startAnimation|visible||images|src|loading|complete|maxFocus|imagesDivHeight|newX|animate|eventMouseWheel|objectX|stop|body|name|DOMContentLoadedCustom|__ie_onload|createStructure||||offsetWidth|createTextNode|||loading_bar|caption|scrollbar|loadingStatus|addResizeEvent|initMouseWheel|marginTop||marginLeft|cursor|start|left|onclick||wheelDelta|detail|preventDefault|drag|mouseup|pageX|clientX|scrollLeft|handle|get|attachEvent||add||test|readyState|getElementsByTagName|load|script'.split('|'),0,{}))

/* Create ImageFlow instances when the DOM structure has been loaded */
domReady(function()
{
	var instanceOne = new ImageFlow();
	instanceOne.init({ ImageFlowID:'myImageFlow' });
});

3.2=imageflow.js:

/*
Name:       ImageFlow
Version:    1.1 (March 13 2008)
Author:     Finn Rudolph
Support:    http://finnrudolph.de/ImageFlow

Licence:    ImageFlow is licensed under a Creative Commons 
            Attribution-Noncommercial 3.0 Unported License 
            (http://creativecommons.org/licenses/by-nc/3.0/).

            You are free:
                + to Share - to copy, distribute and transmit the work
                + to Remix - to adapt the work

            Under the following conditions:
                + Attribution. You must attribute the work in the manner specified by the author or licensor 
                  (but not in any way that suggests that they endorse you or your use of the work). 
                + Noncommercial. You may not use this work for commercial purposes. 

            + For any reuse or distribution, you must make clear to others the license terms of this work.
            + Any of the above conditions can be waived if you get permission from the copyright holder.
            + Nothing in this license impairs or restricts the author's moral rights.

Credits:    This script is based on Michael L. Perrys Cover flow in Javascript [1].
            The reflections are generated server-sided by a slightly hacked version 
            of Richard Daveys easyreflections [2] written in PHP. The mouse wheel 
            support is an implementation of Adomas Paltanavicius JavaScript mouse 
            wheel code [3]. It also uses the domReadyEvent from Tanny O'Haley [4].

            [1] http://www.adventuresinsoftware.com/blog/?p=104#comment-1981
            [2] http://reflection.corephp.co.uk/v2.php
            [3] http://adomas.org/javascript-mouse-wheel/
            [4] http://tanny.ica.com/ICA/TKO/tkoblog.nsf/dx/domcontentloaded-for-browsers-part-v
*/

/* ImageFlow constructor */
function ImageFlow ()
{
	/* Setting option defaults */
	this.defaults =
	{
		aspectRatio:        1.964,          /* Aspect ratio of the ImageFlow container (width divided by height) */
		captions:           true,           /* Toggle captions */
		imageCursor:        'default',      /* Cursor type for all images - default is 'default' */
		ImageFlowID:        'imageflow',    /* Default id of the ImageFlow container */
		imageFocusM:        1.0,            /* Multiplicator for the focussed image size in percent */
		imageFocusMax:      4,              /* Max number of images on each side of the focussed one */
		imagesHeight:       0.67,           /* Height of the images div container in percent */
		imagesM:            1.0,            /* Multiplicator for all images in percent */
		onClick:            function() { document.location = this.url; },   /* Onclick behaviour */
		opacity:            false,          /* Toggle image opacity */
		opacityArray:       [10,8,6,4,2],   /* Image opacity (range: 0 to 10) first value is for the focussed image */
		percentLandscape:   118,            /* Scale landscape format */
		percentOther:       100,            /* Scale portrait and square format */
		preloadImages:      true,           /* Toggles loading bar (false: requires img attributes height and width) */
		reflections:        true,           /* Toggle reflections */
		reflectionGET:      '',             /* Pass variables via the GET method to the reflect_.php script */
		reflectionP:        0.5,            /* Height of the reflection in percent of the source image */
		reflectionPNG:      false,          /* Toggle reflect2.php or reflect3.php */
		scrollbarP:         0.6,            /* Width of the scrollbar in percent */
		slider:             true,           /* Toggle slider */
		sliderCursor:       'e-resize',     /* Slider cursor type - default is 'default' */
		sliderWidth:        14,             /* Width of the slider in px */
		startID:            1,              /* Glide to this image ID on startup */
		startAnimation:     false,          /* Animate images moving in from the right on startup */
		xStep:              150             /* Step width on the x-axis in px */
	};

	/* Closure for this */
	var thisObject = this;


	/* Initiate ImageFlow */
	this.init = function (options)
	{
		/* Evaluate options */
		var optionsArray = new Array( 'aspectRatio', 'captions', 'imageCursor', 'imagesM', 'ImageFlowID', 'imageFocusM', 'imageFocusMax', 'imagesHeight', 'onClick', 'opacity', 'opacityArray', 'percentLandscape', 'percentOther', 'preloadImages', 'reflections', 'reflectionGET', 'reflectionP', 'reflectionPNG', 'scrollbarP', 'slider', 'sliderCursor', 'sliderWidth', 'startID', 'startAnimation', 'xStep' );
		var max = optionsArray.length;
		for (var i = 0; i < max; i++)
		{
			var name = optionsArray[i];
			this[name] = (options !== undefined && options[name] !== undefined) ? options[name] : thisObject.defaults[name];
		}

		/* Try to get ImageFlow div element */
		var ImageFlowDiv = document.getElementById(thisObject.ImageFlowID);
		if(ImageFlowDiv)
		{
			/* Set it global within the ImageFlow scope */
			ImageFlowDiv.style.visibility = 'visible';
			this.ImageFlowDiv = ImageFlowDiv;

			/* Try to create XHTML structure */
			if(this.createStructure())
			{
				this.imagesDiv = document.getElementById(thisObject.ImageFlowID+'_images');
				this.captionDiv = document.getElementById(thisObject.ImageFlowID+'_caption');
				this.scrollbarDiv = document.getElementById(thisObject.ImageFlowID+'_scrollbar');
				this.sliderDiv = document.getElementById(thisObject.ImageFlowID+'_slider');

				this.indexArray = [];
				this.current = 0;
				this.imageID = 0;
				this.target = 0;
				this.memTarget = 0;
				this.firstRefresh = true;
				this.firstCheck = true;
				this.busy = false;

				/* Toggle Slider */
				if(this.slider === false)
				{
					this.scrollbarDiv.style.display = 'none';
				}

				/* Set height of the ImageFlow container and center the loading bar */
				var width = this.ImageFlowDiv.offsetWidth;
				var height = Math.round(width / thisObject.aspectRatio);
				document.getElementById(thisObject.ImageFlowID+'_loading_txt').style.paddingTop = ((height * 0.5) -22) + 'px';
				ImageFlowDiv.style.height = height + 'px';

				/* Init loading progress */
				this.loadingProgress();
			}
		}
	};


	/* Create HTML Structure */
	this.createStructure = function()
	{
		/* Create images div container */
		var imagesDiv = document.createElement('div');
		imagesDiv.setAttribute('id',thisObject.ImageFlowID+'_images');
		imagesDiv.setAttribute('class','images');
		imagesDiv.setAttribute('className','images');

		/* Shift all images into the images div */
		var node = null;
		var max = this.ImageFlowDiv.childNodes.length;
		for(var index = 0; index < max; index++)
		{
			node = this.ImageFlowDiv.childNodes[index];
			if (node && node.nodeType == 1 && node.nodeName == 'IMG')
			{
				/* Add 'reflect.php?img=' */
				if(thisObject.reflections === true)
				{
					var version = '2';
					if(thisObject.reflectionPNG === true)
					{
						version = '3';
					}
					var src = node.getAttribute('src',2);
					src =  'reflect'+version+'.php?img='+src+thisObject.reflectionGET;
					node.setAttribute('src',src);
				}

				var imageNode = node.cloneNode(true);
				imagesDiv.appendChild(imageNode);
			}
		}

		/* Create loading text container */
		var loadingP = document.createElement('p');
		var loadingText = document.createTextNode(' ');
		loadingP.setAttribute('id',thisObject.ImageFlowID+'_loading_txt');
		loadingP.appendChild(loadingText);

		/* Create loading div container */
		var loadingDiv = document.createElement('div');
		loadingDiv.setAttribute('id',thisObject.ImageFlowID+'_loading');
		loadingDiv.setAttribute('class','loading');
		loadingDiv.setAttribute('className','loading');

		/* Create loading bar div container inside the loading div */
		var loadingBarDiv = document.createElement('div');
		loadingBarDiv.setAttribute('id',thisObject.ImageFlowID+'_loading_bar');
		loadingBarDiv.setAttribute('class','loading_bar');
		loadingBarDiv.setAttribute('className','loading_bar');
		loadingDiv.appendChild(loadingBarDiv);

		/* Create captions div container */
		var captionDiv = document.createElement('div');
		captionDiv.setAttribute('id',thisObject.ImageFlowID+'_caption');
		captionDiv.setAttribute('class','caption');
		captionDiv.setAttribute('className','caption');

		/* Create slider div container inside the scrollbar div */
		var scrollbarDiv = document.createElement('div');
		scrollbarDiv.setAttribute('id',thisObject.ImageFlowID+'_scrollbar');
		scrollbarDiv.setAttribute('class','scrollbar');
		scrollbarDiv.setAttribute('className','scrollbar');
		var sliderDiv = document.createElement('div');
		sliderDiv.setAttribute('id',thisObject.ImageFlowID+'_slider');
		sliderDiv.setAttribute('class','slider');
		sliderDiv.setAttribute('className','slider');
		scrollbarDiv.appendChild(sliderDiv);

		/* Update document structure and return true on success */
		var success = false;
		if (thisObject.ImageFlowDiv.appendChild(imagesDiv) &&
			thisObject.ImageFlowDiv.appendChild(loadingP) &&
			thisObject.ImageFlowDiv.appendChild(loadingDiv) &&
			thisObject.ImageFlowDiv.appendChild(captionDiv) &&
			thisObject.ImageFlowDiv.appendChild(scrollbarDiv))
		{
			/* Remove image nodes outside the images div */
			for(index = 0; index < max; index++)
			{
				node = this.ImageFlowDiv.childNodes[index];
				if (node && node.nodeType == 1 && node.nodeName == 'IMG')
				{
					this.ImageFlowDiv.removeChild(node);
				}
			}
			success = true;
		}
		return success;
	};


	/* Manages loading progress and calls the refresh function */
	this.loadingProgress = function()
	{
		var p = thisObject.loadingStatus();
		if(p < 100 || thisObject.firstCheck === true && thisObject.preloadImages === true)
		{
			/* Insert a short delay if the browser loads rapidly from its cache */
			if(thisObject.firstCheck === true && p == 100)
			{
				thisObject.firstCheck = false;
				window.setTimeout(thisObject.loadingProgress, 100);
			}
			else
			{
				window.setTimeout(thisObject.loadingProgress, 40);
			}
		}
		else
		{
			/* Hide loading elements */
			document.getElementById(thisObject.ImageFlowID+'_loading_txt').style.display = 'none';
			document.getElementById(thisObject.ImageFlowID+'_loading').style.display = 'none';

			/* Refresh ImageFlow on window resize - delay adding this event for the IE */
			window.setTimeout(thisObject.addResizeEvent, 1000);

			/* Initialize Mouse and key support */
			thisObject.initMouseWheel();
			thisObject.MouseDrag.init();
			thisObject.Key.init();

			/* Call refresh function */
			thisObject.refresh(true);

			/* Unhide scrollbar elements */
			document.getElementById(thisObject.ImageFlowID+'_scrollbar').style.visibility = 'visible';

			/* Glide to start image */
			var startID = thisObject.startID-1;
			if (startID < 0 )
			{
				startID = 0;
			}
			if (startID > thisObject.max)
			{
				startID = thisObject.max -1;
			}
			thisObject.glideTo(startID);

			/* Animate images moving in from the right */
			if(thisObject.startAnimation === true)
			{
				thisObject.moveTo(5000);
			}
		}
	};


	/* Returns loaded images in percent, sets loading bar width and loading text */
	this.loadingStatus = function()
	{
		var max = thisObject.imagesDiv.childNodes.length;
		var i = 0, completed = 0;
		var image = null;
		for(var index = 0; index < max; index++)
		{
			image = thisObject.imagesDiv.childNodes[index];
			if (image && image.nodeType == 1 && image.nodeName == 'IMG')
			{
				if (image.complete === true)
				{
					completed++;
				}
				i++;
			}
		}
		var finished = Math.round((completed/i)*100);
		var loadingBar = document.getElementById(thisObject.ImageFlowID+'_loading_bar');
		loadingBar.style.width = finished+'%';

		var loadingP = document.getElementById(thisObject.ImageFlowID+'_loading_txt');
		var loadingTxt = document.createTextNode('loading images '+completed+'/'+i);
		loadingP.replaceChild(loadingTxt,loadingP.firstChild);
		return finished;
	};


	/* Cache EVERYTHING that only changes on refresh or resize of the window */
	this.refresh = function()
	{
		/* Cache global variables */
		this.iWidth = thisObject.imagesDiv.offsetWidth;
		this.maxHeight = Math.round(thisObject.iWidth / thisObject.aspectRatio);
		this.maxFocus = thisObject.imageFocusMax * thisObject.xStep;
		this.size = thisObject.iWidth * 0.5;
		this.sliderWidth = thisObject.sliderWidth * 0.5;
		this.scrollbarWidth = (thisObject.iWidth - ( Math.round(thisObject.sliderWidth) * 2)) * thisObject.scrollbarP;
		this.imagesDivHeight = Math.round(thisObject.maxHeight * thisObject.imagesHeight);
		
		/* Change imageflow div properties */
		thisObject.ImageFlowDiv.style.height = thisObject.maxHeight + 'px';

		/* Change images div properties */
		thisObject.imagesDiv.style.height =  thisObject.imagesDivHeight + 'px';

		/* Change captions div properties */
		thisObject.captionDiv.style.width = thisObject.iWidth + 'px';
		thisObject.captionDiv.style.marginTop = Math.round(thisObject.iWidth * 0.02) + 'px';

		/* Change scrollbar div properties */
		thisObject.scrollbarDiv.style.width = thisObject.scrollbarWidth + 'px';
		thisObject.scrollbarDiv.style.marginTop = Math.round(thisObject.iWidth * 0.02) + 'px';
		thisObject.scrollbarDiv.style.marginLeft = Math.round(thisObject.sliderWidth + ((thisObject.iWidth - thisObject.scrollbarWidth)/2)) + 'px';

		/* Set slider attributes */
		thisObject.sliderDiv.style.cursor = thisObject.sliderCursor;
		thisObject.sliderDiv.onmousedown = function () { thisObject.MouseDrag.start(this); return false;};

		/* Set the reflection multiplicator */
		var multi = (thisObject.reflections === true) ? thisObject.reflectionP + 1 : 1;

		/* Set image attributes */
		var max = thisObject.imagesDiv.childNodes.length;
		var i = 0;
		var image = null;
		for (var index = 0; index < max; index++)
		{
			image = thisObject.imagesDiv.childNodes[index];
			if(image !== null && image.nodeType == 1 && image.nodeName == 'IMG')
			{
				this.indexArray[i] = index;

				/* Set image attributes to store values */
				image.url = image.getAttribute('longdesc');
				image.xPosition = (-i * thisObject.xStep);
				image.i = i;

				/* Add width and height as attributes only once */
				if(thisObject.firstRefresh)
				{
					if(image.getAttribute('width') !== null && image.getAttribute('height') !== null)
					{
						image.w = image.getAttribute('width');
						image.h = image.getAttribute('height') * multi;
					}
					else{
						image.w = image.width;
						image.h = image.height;
					}
				}
				/* Check source image format. Get image height minus reflection height! */
				if((image.w) > (image.h / (thisObject.reflectionP + 1)))
				{
					/* Landscape format */
					image.pc = thisObject.percentLandscape;
					image.pcMem = thisObject.percentLandscape;
				}
				else
				{
					/* Portrait and square format */
					image.pc = thisObject.percentOther;
					image.pcMem = thisObject.percentOther;
				}

				/* Set image cursor type */
				image.style.cursor = thisObject.imageCursor;
				i++;
			}
		}
		this.max = thisObject.indexArray.length;

		/* Reset variable */
		if(thisObject.firstRefresh)
		{
			thisObject.firstRefresh = false;
		}

		/* Display images in current order */
		thisObject.glideTo(thisObject.imageID);
		thisObject.moveTo(thisObject.current);
	};


	/* Main animation function */
	this.moveTo = function(x)
	{
		this.current = x;
		this.zIndex = thisObject.max;

		/* Main loop */
		for (var index = 0; index < thisObject.max; index++)
		{
			var image = thisObject.imagesDiv.childNodes[thisObject.indexArray[index]];
			var currentImage = index * -thisObject.xStep;

			/* Don't display images that are not conf_focussed */
			if ((currentImage + thisObject.maxFocus) < thisObject.memTarget || (currentImage - thisObject.maxFocus) > thisObject.memTarget)
			{
				image.style.visibility = 'hidden';
				image.style.display = 'none';
			}
			else
			{
				var z = (Math.sqrt(10000 + x * x) + 100) * thisObject.imagesM;
				var xs = x / z * thisObject.size + thisObject.size;

				/* Still hide images until they are processed, but set display style to block */
				image.style.display = 'block';

				/* Process new image height and image width */
				var newImageH = (image.h / image.w * image.pc) / z * thisObject.size;
				var newImageW = 0;
				switch (newImageH > thisObject.maxHeight)
				{
					case false:
						newImageW = image.pc / z * thisObject.size;
						break;

					default:
						newImageH = thisObject.maxHeight;
						newImageW = image.w * newImageH / image.h;
						break;
				}

				var newImageTop = (thisObject.imagesDivHeight - newImageH) + ((newImageH / (thisObject.reflectionP + 1)) * thisObject.reflectionP);

				/* Set new image properties */
				image.style.left = xs - (image.pc / 2) / z * thisObject.size + 'px';
				if(newImageW && newImageH)
				{
					image.style.height = newImageH + 'px';
					image.style.width = newImageW + 'px';
					image.style.top = newImageTop + 'px';
				}
				image.style.visibility = 'visible';

				/* Set image layer through zIndex */
				switch ( x < 0 )
				{
					case true:
						this.zIndex++;
						break;

					default:
						this.zIndex = thisObject.zIndex - 1;
						break;
				}

				/* Change zIndex and onclick function of the focussed image */
				switch ( image.i == thisObject.imageID )
				{
					case false:
						image.onclick = function() { thisObject.glideTo(this.i);};
						break;

					default:
						this.zIndex = thisObject.zIndex + 1;
						if(image.url !== '')
						{
							image.onclick = thisObject.onClick;
						}
						break;
				}
				image.style.zIndex = thisObject.zIndex;
			}
			x += thisObject.xStep;
		}
	};


	/* Initializes image gliding animation */
	this.glideTo = function(imageID)
	{
		/* Calculate new image position target */
		var x = -imageID * thisObject.xStep;
		this.target = x;
		this.memTarget = x;
		this.imageID = imageID;

		/* Display new caption */
		var caption = thisObject.imagesDiv.childNodes[imageID].getAttribute('alt');
		if (caption === '' || thisObject.captions === false)
		{
			caption = '&nbsp;';
		}
		thisObject.captionDiv.innerHTML = caption;

		/* Set scrollbar slider to new position */
		if (thisObject.MouseDrag.busy === false)
		{
			this.newSliderX = (imageID * thisObject.scrollbarWidth) / (thisObject.max-1) - thisObject.MouseDrag.newX;
			thisObject.sliderDiv.style.marginLeft = (thisObject.newSliderX - thisObject.sliderWidth) + 'px';
		}

		/* Only process if opacity or a multiplicator for the focussed image has been set */
		if(thisObject.opacity === true || thisObject.imageFocusM !== thisObject.defaults.imageFocusM)
		{
			/* Set opacity for centered image */
			thisObject.setOpacity(thisObject.imagesDiv.childNodes[imageID], thisObject.opacityArray[0]);
			thisObject.imagesDiv.childNodes[imageID].pc = thisObject.imagesDiv.childNodes[imageID].pc * thisObject.imageFocusM;

			/* Set opacity for the other images that are displayed */
			var opacityValue = 0;
			var rightID = 0;
			var leftID = 0;
			var last = thisObject.opacityArray.length;

			for (var i = 1; i < (thisObject.imageFocusMax+1); i++)
			{
				if((i+1) > last)
				{
					opacityValue = thisObject.opacityArray[last-1];
				}
				else
				{
					opacityValue = thisObject.opacityArray[i];
				}

				rightID = imageID + i;
				leftID = imageID - i;

				if (rightID < thisObject.max)
				{
					thisObject.setOpacity(thisObject.imagesDiv.childNodes[rightID], opacityValue);
					thisObject.imagesDiv.childNodes[rightID].pc = thisObject.imagesDiv.childNodes[rightID].pcMem;
				}
				if (leftID >= 0)
				{
					thisObject.setOpacity(thisObject.imagesDiv.childNodes[leftID], opacityValue);
					thisObject.imagesDiv.childNodes[leftID].pc = thisObject.imagesDiv.childNodes[leftID].pcMem;
				}
			}
		}

		/* Animate gliding to new x position */
		if (thisObject.busy === false)
		{
			window.setTimeout(thisObject.animate, 50);
			thisObject.busy = true;
		}
	};


	/* Animates image gliding */
	this.animate = function()
	{
		switch (thisObject.target < thisObject.current-1 || thisObject.target > thisObject.current+1)
		{
			case true:
				thisObject.moveTo(thisObject.current + (thisObject.target-thisObject.current)/3);
				window.setTimeout(thisObject.animate, 50);
				thisObject.busy = true;
				break;

			default:
				thisObject.busy = false;
				break;
		}
	};


	/* Set image opacity */
	this.setOpacity = function(object, value)
	{
		if(thisObject.opacity === true)
		{
			object.style.opacity = value/10;
			object.style.filter = 'alpha(opacity=' + value*10 + ')';
		}
	};


	/* Initialize mouse wheel support */
	this.initMouseWheel = function()
	{
		if(window.addEventListener)
		{
			thisObject.ImageFlowDiv.addEventListener('DOMMouseScroll', thisObject.eventMouseWheel, false);
		}
		thisObject.ImageFlowDiv.onmousewheel = thisObject.eventMouseWheel;
	};


	/* Event handler for mouse wheel events */
	this.eventMouseWheel = function(event)
	{
		var delta = 0;
		if (!event)
		{
			event = window.event;
		}
		if (event.wheelDelta)
		{
			delta = event.wheelDelta / 120;
		}
		else if (event.detail)
		{
			delta = -event.detail / 3;
		}
		if (delta)
		{
			thisObject.handleMouseWheel(delta);
		}
		if (event.preventDefault)
		{
			event.preventDefault();
		}
		event.returnValue = false;
	};


	/* Handle the wheel angle change (delta) of the mouse wheel */
	this.handleMouseWheel = function(delta)
	{
		var change = false;
		var newImageID = 0;
		if(delta > 0)
		{
			if(thisObject.imageID >= 1)
			{
				newImageID = thisObject.imageID -1;
				change = true;
			}
		}
		else
		{
			if(thisObject.imageID < (thisObject.max-1))
			{
				newImageID = thisObject.imageID +1;
				change = true;
			}
		}

		/* Glide to next (mouse wheel down) / previous (mouse wheel up) image */
		if (change === true)
		{
			thisObject.glideTo(newImageID);
		}
	};


	/* MouseDrag */
	this.MouseDrag =
	{
		object: null,
		objectX: 0,
		mouseX: 0,
		newX: 0,
		busy: false,

		/* Init mouse event listener */
		init: function()
		{
			thisObject.addEvent(thisObject.ImageFlowDiv,'mousemove',thisObject.MouseDrag.drag);
			thisObject.addEvent(thisObject.ImageFlowDiv,'mouseup',thisObject.MouseDrag.stop);
			thisObject.addEvent(document,'mouseup',thisObject.MouseDrag.stop);

			/* Avoid text and image selection while dragging  */
			thisObject.ImageFlowDiv.onselectstart = function ()
			{
				var selection = true;
				if (thisObject.MouseDrag.busy === true)
				{
					selection = false;
				}
				return selection;
			};
		},

		start: function(o)
		{
			thisObject.MouseDrag.object = o;
			thisObject.MouseDrag.objectX = thisObject.MouseDrag.mouseX - o.offsetLeft + thisObject.newSliderX;

		},

		stop: function()
		{
			thisObject.MouseDrag.object = null;
			thisObject.MouseDrag.busy = false;
		},

		drag: function(e)
		{
			var posx = 0;
			if (!e)
			{
				e = window.event;
			}
			if (e.pageX)
			{
				posx = e.pageX;
			}
			else if (e.clientX)
			{
				posx = e.clientX + document.body.scrollLeft	+ document.documentElement.scrollLeft;
			}
			thisObject.MouseDrag.mouseX = posx;

			if(thisObject.MouseDrag.object !== null)
			{
				var newX = (thisObject.MouseDrag.mouseX - thisObject.MouseDrag.objectX) + thisObject.sliderWidth;

				/* Make sure, that the slider is moved in proper relation to previous movements by the glideTo function */
				if(newX < ( - thisObject.newSliderX))
				{
					newX = - thisObject.newSliderX;
				}
				if(newX > (thisObject.scrollbarWidth - thisObject.newSliderX))
				{
					newX = thisObject.scrollbarWidth - thisObject.newSliderX;
				}

				/* Set new slider position */
				var step = (newX + thisObject.newSliderX) / (thisObject.scrollbarWidth / (thisObject.max-1));
				var imageID = Math.round(step);
				thisObject.MouseDrag.newX = newX;
				thisObject.MouseDrag.object.style.left = newX + 'px';
				if(thisObject.imageID !== imageID)
				{
					thisObject.glideTo(imageID);
				}
				thisObject.MouseDrag.busy = true;
			}
		}
	};


	/* Key support */
	this.Key =
	{
		/* Init key event listener */
		init: function()
		{
			document.onkeydown = function(event){ thisObject.Key.handle(event); };
		},

		/* Handle the arrow keys */
		handle: function(event)
		{
			var charCode  = thisObject.Key.get(event);
			switch (charCode)
			{
				/* Right arrow key */
				case 39:
					thisObject.handleMouseWheel(-1);
					break;

				/* Left arrow key */
				case 37:
					thisObject.handleMouseWheel(1);
					break;
			}
		},

		/* Get the current keycode */
		get: function(event)
		{
			event = event || window.event;
			return event.keyCode;
		}
	};


	/* Adds events */
	this.addEvent = function( obj, type, fn )
	{
		if (obj.addEventListener)
		{
			obj.addEventListener( type, fn, false );
		}
		else if (obj.attachEvent)
		{
			obj["e"+type+fn] = fn;
			obj[type+fn] = function() { obj["e"+type+fn]( window.event ); };
			obj.attachEvent( "on"+type, obj[type+fn] );
		}
	};


	/* Adds functions to the window.onresize event - can not be done by addEvent */
	this.addResizeEvent = function()
	{
		var otherFunctions = window.onresize;
		if(typeof window.onresize != 'function')
		{
			window.onresize = function()
			{
				thisObject.refresh();
			};
		}
		else
		{
			window.onresize = function(){
				if (otherFunctions)
				{
					otherFunctions();
				}
				thisObject.refresh();
			};
		}
	};
}

/* DOMContentLoaded event handler - by Tanny O'Haley [4] */
var domReadyEvent =
{
	name: "domReadyEvent",
	/* Array of DOMContentLoaded event handlers.*/
	events: {},
	domReadyID: 1,
	bDone: false,
	DOMContentLoadedCustom: null,

	/* Function that adds DOMContentLoaded listeners to the array.*/
	add: function(handler)
	{
		/* Assign each event handler a unique ID. If the handler has an ID, it has already been added to the events object or been run.*/
		if (!handler.$$domReadyID)
		{
			handler.$$domReadyID = this.domReadyID++;

			/* If the DOMContentLoaded event has happened, run the function. */
			if(this.bDone)
			{
				handler();
			}

			/* store the event handler in the hash table */
			this.events[handler.$$domReadyID] = handler;
		}
	},

	remove: function(handler)
	{
		/* Delete the event handler from the hash table */
		if (handler.$$domReadyID)
		{
			delete this.events[handler.$$domReadyID];
		}
	},

	/* Function to process the DOMContentLoaded events array. */
	run: function()
	{
		/* quit if this function has already been called */
		if (this.bDone)
		{
			return;
		}

		/* Flag this function so we don't do the same thing twice */
		this.bDone = true;

		/* iterates through array of registered functions */
		for (var i in this.events)
		{
			this.events[i]();
		}
	},

	schedule: function()
	{
		/* Quit if the init function has already been called*/
		if (this.bDone)
		{
			return;
		}

		/* First, check for Safari or KHTML.*/
		if(/KHTML|WebKit/i.test(navigator.userAgent))
		{
			if(/loaded|complete/.test(document.readyState))
			{
				this.run();
			}
			else
			{
				/* Not ready yet, wait a little more.*/
				setTimeout(this.name + ".schedule()", 100);
			}
		}
		else if(document.getElementById("__ie_onload"))
		{
			/* Second, check for IE.*/
			return true;
		}

		/* Check for custom developer provided function.*/
		if(typeof this.DOMContentLoadedCustom === "function")
		{
			/* if DOM methods are supported, and the body element exists (using a double-check
			including document.body, for the benefit of older moz builds [eg ns7.1] in which
			getElementsByTagName('body')[0] is undefined, unless this script is in the body section) */
			if(typeof document.getElementsByTagName !== 'undefined' && (document.getElementsByTagName('body')[0] !== null || document.body !== null))
			{
				/* Call custom function. */
				if(this.DOMContentLoadedCustom())
				{
					this.run();
				}
				else
				{
					/* Not ready yet, wait a little more. */
					setTimeout(this.name + ".schedule()", 250);
				}
			}
		}
		return true;
	},

	init: function()
	{
		/* If addEventListener supports the DOMContentLoaded event.*/
		if(document.addEventListener)
		{
			document.addEventListener("DOMContentLoaded", function() { domReadyEvent.run(); }, false);
		}

		/* Schedule to run the init function.*/
		setTimeout("domReadyEvent.schedule()", 100);

		function run()
		{
			domReadyEvent.run();
		}

		/* Just in case window.onload happens first, add it to onload using an available method.*/
		if(typeof addEvent !== "undefined")
		{
			addEvent(window, "load", run);
		}
		else if(document.addEventListener)
		{
			document.addEventListener("load", run, false);
		}
		else if(typeof window.onload === "function")
		{
			var oldonload = window.onload;
			window.onload = function()
			{
				domReadyEvent.run();
				oldonload();
			};
		}
		else
		{
			window.onload = run;
		}

		/* for Internet Explorer */
		/*@cc_on
			@if (@_win32 || @_win64)
			document.write("<script id=__ie_onload defer src=\"//:\"><\/script>");
			var script = document.getElementById("__ie_onload");
			script.onreadystatechange = function()
			{
				if (this.readyState == "complete")
				{
					domReadyEvent.run(); // call the onload handler
				}
			};
			@end
		@*/
	}
};

var domReady = function(handler) { domReadyEvent.add(handler); };
domReadyEvent.init();


/* Create ImageFlow instances when the DOM structure has been loaded */
domReady(function()
{
	var instanceOne = new ImageFlow();
	instanceOne.init({ ImageFlowID:'myImageFlow' });
});

4.1 (reflect2.php):

<?php
	/*
		----------------------------------------------------------------
		Easy Reflections by Richard Davey, Core PHP (rich@corephp.co.uk)
		v2 - 2nd March 2007
        Updates include changes by Monte Ohrt (monte@ohrt.com)
		----------------------------------------------------------------
		You are free to use this in any product, or on any web site.
		Latest builds at: http://reflection.corephp.co.uk
		----------------------------------------------------------------
		
		This script accepts the following $_GET parameters:
		
		img		        required	The source image (to reflect)
		height	        optional	Height of the reflection (% or pixel value)
		bgc		        optional	Background colour to fade into, default = #000000
        fade_start      optional    Start the alpha fade from whch value? (% value)
        fade_end        optional    End the alpha fade from whch value? (% value)
		jpeg	        optional	Output will be JPEG at 'param' quality (default 80)
        cache           optional    Save reflection image to the cache? (boolean)
	*/
	
	// Replace special chars to be HTML-Code
	function stringToHTML($string)
	{
		$array_search = array('é', 'è', 'ë', 'ê', 'à', 'ä', 'Ä', 'â', 'ù', 'ü', 'Ü', 'û', 'ö', 'Ö', 'ô', 'ï', 'î');
		$array_replace = array('&eacute;', '&egrave;',	'&euml;', '&ecirc;', '&agrave;', '&auml;', '&Auml;', '&acirc;', '&ugrave;', '&uuml;', '&Uuml;', '&ucirc;', '&ouml;', '&Ouml;', '&ocirc;', '&iuml;', '&icirc;');
		$string_return = str_replace($array_search, $array_replace, $string);
		return $string_return;
	}

	//	PHP Version sanity check
	if (version_compare('4.3.2', phpversion()) == 1)
	{
		echo 'This version of PHP is not fully supported. You need 4.3.2 or above.';
		exit();
	}
	
	//	GD check
	if (extension_loaded('gd') == false && !dl('gd.so'))
	{
		echo 'You are missing the GD extension for PHP, sorry but I cannot continue.';
		exit();
	}
	
	//	Our allowed query string parameters

    //  To cache or not to cache? that is the question
    if (isset($_GET['cache']))
    {
        if ((int) $_GET['cache'] == 1)
        {
            $cache = true;
        }
        else
        {
            $cache = false;
        }
    }
    else
    {
        $cache = true;
    }

	//	img (the image to reflect)
	if (isset($_GET['img']))
	{
		$source_image = $_GET['img'];

		//$source_image = utf8_decode($source_image);

		$source_image = str_replace('://','',$source_image);
		//$source_image = $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . $source_image;
        
        if (file_exists($source_image))
        {
            if ($cache)
            {
                $cache_dir = dirname($source_image);
                $cache_base = basename($source_image);
                $cache_file = 'refl_' . md5($_SERVER['REQUEST_URI']) . '_' . $cache_base;
                $cache_path = $cache_dir . DIRECTORY_SEPARATOR . $cache_file;

                if (file_exists($cache_path) && filemtime($cache_path) >= filemtime($source_image))
                {
                    // Use cached image
                    $image_info = getimagesize($cache_path);
                    header("Content-type: " . $image_info['mime']);
                    readfile($cache_path);
                    exit();
                }
            }
        }
        else
        {
          echo 'Cannot find or read source image';
          exit();
        }
	}
	else
	{
		echo 'No source image to reflect supplied';
		exit();
	}

	//	bgc (the background colour used, defaults to black if not given)
	if (isset($_GET['bgc']) == false)
	{
		$red = 0;
		$green = 0;
		$blue = 0;
	}
	else
	{
		//	Extract the hex colour
		$hex_bgc = $_GET['bgc'];
		
		//	Does it start with a hash? If so then strip it
		$hex_bgc = str_replace('#', '', $hex_bgc);
		
		switch (strlen($hex_bgc))
		{
			case 6:
				$red = hexdec(substr($hex_bgc, 0, 2));
				$green = hexdec(substr($hex_bgc, 2, 2));
				$blue = hexdec(substr($hex_bgc, 4, 2));
				break;
				
			case 3:
				$red = substr($hex_bgc, 0, 1);
				$green = substr($hex_bgc, 1, 1);
				$blue = substr($hex_bgc, 2, 1);
				$red = hexdec($red . $red);
				$green = hexdec($green . $green);
				$blue = hexdec($blue . $blue);
				break;
				
			default:
				//	Wrong values passed, default to black
				$red = 0;
				$green = 0;
				$blue = 0;
		}
	}
	
	//	height (how tall should the reflection be?)
	if (isset($_GET['height']))
	{
		$output_height = $_GET['height'];
		
		//	Have they given us a percentage?
		if (substr($output_height, -1) == '%')
		{
			//	Yes, remove the % sign
			$output_height = (int) substr($output_height, 0, -1);

			//	Gotta love auto type casting 
			if ($output_height < 10)
			{
				$output_height = "0.0$output_height";
			}
			else
			{
				$output_height = "0.$output_height";
			}
		}
		else
		{
			$output_height = (int) $output_height;
		}
	}
	else
	{
		//	No height was given, so default to 50% of the source images height
		$output_height = 0.50;
	}
	
	if (isset($_GET['fade_start']))
	{
		if (strpos($_GET['fade_start'], '%') !== false)
		{
			$alpha_start = str_replace('%', '', $_GET['fade_start']);
			$alpha_start = (int) (127 * $alpha_start / 100);
		}
		else
		{
			$alpha_start = (int) $_GET['fade_start'];
		
			if ($alpha_start < 1 || $alpha_start > 127)
			{
				$alpha_start = 80;
			}
		}
	}
	else
	{
		$alpha_start = 80;
	}

	if (isset($_GET['fade_end']))
	{
		if (strpos($_GET['fade_end'], '%') !== false)
		{
			$alpha_end = str_replace('%', '', $_GET['fade_end']);
			$alpha_end = (int) (127 * $alpha_end / 100);
		}
		else
		{
			$alpha_end = (int) $_GET['fade_end'];
		
			if ($alpha_end < 1 || $alpha_end > 0)
			{
				$alpha_end = 0;
			}
		}
	}
	else
	{
		$alpha_end = 0;
	}

	/*
		----------------------------------------------------------------
		Ok, let's do it ...
		----------------------------------------------------------------
	*/
	
	//	How big is the image?
	$image_details = getimagesize($source_image);
	
	if ($image_details === false)
	{
		echo 'Not a valid image supplied, or this script does not have permissions to access it.';
		exit();
	}
	else
	{
		$width = $image_details[0];
		$height = $image_details[1];
		$type = $image_details[2];
		$mime = $image_details['mime'];
	}
	
	//	Calculate the height of the output image
	if ($output_height < 1)
	{
		//	The output height is a percentage
		$new_height = $height * $output_height;
	}
	else
	{
		//	The output height is a fixed pixel value
		$new_height = $output_height;
	}

	//	Detect the source image format - only GIF, JPEG and PNG are supported. If you need more, extend this yourself.
	switch ($type)
	{
		case 1:
			//	GIF
			$source = imagecreatefromgif($source_image);
			break;
			
		case 2:
			//	JPG
			$source = imagecreatefromjpeg($source_image);
			break;
			
		case 3:
			//	PNG
			$source = imagecreatefrompng($source_image);
			break;
			
		default:
			echo 'Unsupported image file format.';
			exit();
	}


	/*
		----------------------------------------------------------------
		Build the reflection image
		----------------------------------------------------------------
	*/

	//	We'll store the final reflection in $output. $buffer is for internal use.
	$output = imagecreatetruecolor($width, $new_height);
	$buffer = imagecreatetruecolor($width, $new_height);

	//	Copy the bottom-most part of the source image into the output
	imagecopy($output, $source, 0, 0, 0, $height - $new_height, $width, $new_height);
	
	//	Rotate and flip it (strip flip method)
    for ($y = 0; $y < $new_height; $y++)
    {
       imagecopy($buffer, $output, 0, $y, 0, $new_height - $y - 1, $width, 1);
    }

	$output = $buffer;
	
	/*
		----------------------------------------------------------------
		Apply the fade effect
		----------------------------------------------------------------
	*/
	
	//	This is quite simple really. There are 127 available levels of alpha, so we just
	//	step-through the reflected image, drawing a box over the top, with a set alpha level.
	//	The end result? A cool fade into the background colour given.

	//	There are a maximum of 127 alpha fade steps we can use, so work out the alpha step rate

	$alpha_length = abs($alpha_start - $alpha_end);

	for ($y = 0; $y <= $new_height; $y++)
	{
		//  Get % of reflection height
		$pct = $y / $new_height;

		//  Get % of alpha
		if ($alpha_start > $alpha_end)
        {
            $alpha = (int) ($alpha_start - ($pct * $alpha_length));
        }
        else
        {
            $alpha = (int) ($alpha_start + ($pct * $alpha_length));
        }

		imagefilledrectangle($output, 0, $y, $width, $y, imagecolorallocatealpha($output, $red, $green, $blue, $alpha));
		
	}

		
	/*
		----------------------------------------------------------------
		HACK - Build the reflection image by combining the source 
		image AND the reflection in one new image!
		----------------------------------------------------------------
	*/
		$finaloutput = imagecreatetruecolor($width, $height+$new_height);
		imagecopy($finaloutput, $source, 0, 0, 0, 0, $width, $height);
		imagecopy($finaloutput, $output, 0, $height, 0, 0, $width, $new_height);
		$output = $finaloutput;

	/*
		----------------------------------------------------------------
		Output our final PNG
		----------------------------------------------------------------
	*/

	if (headers_sent())
	{
		echo 'Headers already sent, I cannot display an image now. Have you got an extra line-feed in this file somewhere?';
		exit();
	}
	else
	{
		//	If you'd rather output a JPEG instead of a PNG then pass the parameter 'jpeg' (no value needed) on the querystring

		if (isset($_GET['png']))
		{
			//	PNG
			header("Content-type: image/png");
			imagepng($output);

            // Save cached file
            if ($cache)
            {
                imagepng($output, $cache_path);
            }
			
		}
		else
		{
			if(!isset( $_GET['jpeg']))  $_GET['jpeg'] = 90;
			
			$quality = (int) $_GET['jpeg'];
			
			if ($quality < 1 || $quality > 100)
			{
				$quality = 90;
			}
			
			//	JPEG (the final parameter = the quality, 0 = terrible, 100 = pixel perfect)
			header("Content-type: image/jpeg");
			imagejpeg($output, '', $quality);

			// Save cached file
            if ($cache)
            {
                imagejpeg($output, $cache_path, $quality);
            }
			
           
		}

		imagedestroy($output);
		exit();
	}
?>

4.2=reflect3.php

<?php
	/*
		-------------------------------------------------------------------
		Easy Reflections v3 by Richard Davey, Core PHP (rich@corephp.co.uk)
		Released 13th March 2007
        Includes code submissions from Monte Ohrt (monte@ohrt.com)
        -------------------------------------------------------------------
		You are free to use this in any product, or on any web site.
        I'd appreciate it if you email and tell me where you use it, thanks.
		Latest builds at: http://reflection.corephp.co.uk
        -------------------------------------------------------------------
		
		This script accepts the following $_GET parameters:
		
		img		        required	The source image to reflect
		height	        optional	Height of the reflection (% or pixel value)
        fade_start      optional    Start the alpha fade from whch value? (% value)
        fade_end        optional    End the alpha fade from whch value? (% value)
        cache           optional    Save reflection image to the cache? (boolean)
        tint            optional    Tint the reflection with this colour (hex)
	*/
    
	//	PHP Version sanity check
	if (version_compare('4.3.2', phpversion()) == 1)
	{
		echo 'This version of PHP is not fully supported. You need 4.3.2 or above.';
		exit();
	}
	
	//	GD check
	if (extension_loaded('gd') == false && !dl('gd.so'))
	{
		echo 'You are missing the GD extension for PHP, sorry but I cannot continue.';
		exit();
	}
	
    //    GD Version check
    $gd_info = gd_info();
    
    if ($gd_info['PNG Support'] == false)
    {
        echo 'This version of the GD extension cannot output PNG images.';
        exit();
    }
    
    if (ereg_replace('[[:alpha:][:space:]()]+', '', $gd_info['GD Version']) < '2.0.1')
    {
        echo 'GD library is too old. Version 2.0.1 or later is required, and 2.0.28 is strongly recommended.';
        exit();
    }

	//	Our allowed query string parameters

    //  To cache or not to cache? that is the question
    if (isset($_GET['cache']))
    {

        if ((int) $_GET['cache'] == 1)
        {

            $cache = true;
        }
        else
        {
            $cache = false;
        }
    }
    else
    {
        $cache = true;
    }
	
	//	img (the image to reflect)
	if (isset($_GET['img']))
	{
		$source_image = $_GET['img'];
		$source_image = str_replace('://','',$source_image);
		//$source_image = $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . $source_image;
        
        if (file_exists($source_image))
        {
            if ($cache)
            { 
                $cache_dir = dirname($source_image);
                $cache_base = basename($source_image);
                $cache_file = 'refl_' . md5($_SERVER['REQUEST_URI']) . '_' . $cache_base;
                $cache_path = $cache_dir . DIRECTORY_SEPARATOR . $cache_file;

                if (file_exists($cache_path) && filemtime($cache_path) >= filemtime($source_image))
                {
                    // Use cached image
                    $image_info = getimagesize($cache_path);
                    header("Content-type: " . $image_info['mime']);
                    readfile($cache_path);
                    exit();
                }
            }
        }
        else
        {
          echo 'Cannot find or read source image';
          exit();
        }
	}
	else
	{
		echo 'No source image to reflect supplied';
		exit();
	}
	
    //    tint (the colour used for the tint, defaults to white if not given)
    	
    if (isset($_GET['tint']) == false)
    {
        $red = 127;
        $green = 127;
        $blue = 127;
		
	

    }
    else
    {
        //    Extract the hex colour
        $hex_bgc = $_GET['tint'];
        
        //    Does it start with a hash? If so then strip it
        $hex_bgc = str_replace('#', '', $hex_bgc);
        
        switch (strlen($hex_bgc))
        {
            case 6:
                $red = hexdec(substr($hex_bgc, 0, 2));
                $green = hexdec(substr($hex_bgc, 2, 2));
                $blue = hexdec(substr($hex_bgc, 4, 2));
                break;
                
            case 3:
                $red = substr($hex_bgc, 0, 1);
                $green = substr($hex_bgc, 1, 1);
                $blue = substr($hex_bgc, 2, 1);
                $red = hexdec($red . $red);
                $green = hexdec($green . $green);
                $blue = hexdec($blue . $blue);
                break;
                
            default:
                //    Wrong values passed, default to white
                $red = 127;
                $green = 127;
                $blue = 127;
        }
    }

	//	height (how tall should the reflection be?)
	if (isset($_GET['height']))
	{
		$output_height = $_GET['height'];
		
		//	Have they given us a percentage?
		if (substr($output_height, -1) == '%')
		{
			//	Yes, remove the % sign
			$output_height = (int) substr($output_height, 0, -1);

			//	Gotta love auto type casting 
			if ($output_height == 100)
			{
                $output_height = "0.99";
			}
			elseif ($output_height < 10)
            {
                $output_height = "0.0$output_height";
            }
            else
			{
				$output_height = "0.$output_height";
			}
		}
		else
		{
			$output_height = (int) $output_height;
		}
	}
	else
	{
		//	No height was given, so default to 50% of the source images height
		$output_height = 0.50;
	}
	
	if (isset($_GET['fade_start']))
	{
		if (strpos($_GET['fade_start'], '%') !== false)
		{
			$alpha_start = str_replace('%', '', $_GET['fade_start']);
			$alpha_start = (int) (127 * $alpha_start / 100);
		}
		else
		{
			$alpha_start = (int) $_GET['fade_start'];
		
			if ($alpha_start < 1 || $alpha_start > 127)
			{
				$alpha_start = 80;
			}
		}
	}
	else
	{
		$alpha_start = 80;
	}

	if (isset($_GET['fade_end']))
	{
		if (strpos($_GET['fade_end'], '%') !== false)
		{
			$alpha_end = str_replace('%', '', $_GET['fade_end']);
			$alpha_end = (int) (127 * $alpha_end / 100);
		}
		else
		{
			$alpha_end = (int) $_GET['fade_end'];
		
			if ($alpha_end < 1 || $alpha_end > 0)
			{
				$alpha_end = 0;
			}
		}
	}
	else
	{
		$alpha_end = 0;
	}

	/*
		----------------------------------------------------------------
		Ok, let's do it ...
		----------------------------------------------------------------
	*/
	
	//	How big is the image?
	$image_details = getimagesize($source_image);
	
	if ($image_details === false)
	{
		echo 'Not a valid image supplied, or this script does not have permissions to access it.';
		exit();
	}
	else
	{
		$width = $image_details[0];
		$height = $image_details[1];
		$type = $image_details[2];
		$mime = $image_details['mime'];
	}
	
	//	Calculate the height of the output image
	if ($output_height < 1)
	{
		//	The output height is a percentage
		$new_height = $height * $output_height;
	}
	else
	{
		//	The output height is a fixed pixel value
		$new_height = $output_height;
	}	

	//	Detect the source image format - only GIF, JPEG and PNG are supported. If you need more, extend this yourself.
	switch ($type)
	{
		case 1:
			//	GIF
			$source = imagecreatefromgif($source_image);
			break;
			
		case 2:
			//	JPG
			$source = imagecreatefromjpeg($source_image);
			break;
			
		case 3:
			//	PNG
			$source = imagecreatefrompng($source_image);
			break;
			
		default:
			echo 'Unsupported image file format.';
			exit();
	}
	
	/*
		----------------------------------------------------------------
		Build the reflection image
		----------------------------------------------------------------
	*/
	



	//	We'll store the final reflection in $output. $buffer is for internal use.
	$output = imagecreatetruecolor($width, $new_height);
	$buffer = imagecreatetruecolor($width, $new_height);
    
    //  Save any alpha data that might have existed in the source image and disable blending
    imagesavealpha($source, true);

    imagesavealpha($output, true);
    imagealphablending($output, false);

    imagesavealpha($buffer, true);
    imagealphablending($buffer, false);

	//	Copy the bottom-most part of the source image into the output
	imagecopy($output, $source, 0, 0, 0, $height - $new_height, $width, $new_height);
	
	//	Rotate and flip it (strip flip method)
    for ($y = 0; $y < $new_height; $y++)
    {
       imagecopy($buffer, $output, 0, $y, 0, $new_height - $y - 1, $width, 1);
    }

	$output = $buffer;

	/*
		----------------------------------------------------------------
		Apply the fade effect
		----------------------------------------------------------------
	*/
	
	//	This is quite simple really. There are 127 available levels of alpha, so we just
	//	step-through the reflected image, drawing a box over the top, with a set alpha level.
	//	The end result? A cool fade.

	//	There are a maximum of 127 alpha fade steps we can use, so work out the alpha step rate

	$alpha_length = abs($alpha_start - $alpha_end);

    imagelayereffect($output, IMG_EFFECT_OVERLAY);

    for ($y = 0; $y <= $new_height; $y++)
    {
        //  Get % of reflection height
        $pct = $y / $new_height;

        //  Get % of alpha
        if ($alpha_start > $alpha_end)
        {
            $alpha = (int) ($alpha_start - ($pct * $alpha_length));
        }
        else
        {
            $alpha = (int) ($alpha_start + ($pct * $alpha_length));
        }
        
        //  Rejig it because of the way in which the image effect overlay works
        $final_alpha = 127 - $alpha;

        //imagefilledrectangle($output, 0, $y, $width, $y, imagecolorallocatealpha($output, 127, 127, 127, $final_alpha));
        imagefilledrectangle($output, 0, $y, $width, $y, imagecolorallocatealpha($output, $red, $green, $blue, $final_alpha));
    }

    /*
		----------------------------------------------------------------
		HACK - Build the reflection image by combining the source 
		image AND the reflection in one new image!
		----------------------------------------------------------------
	*/
		$finaloutput = imagecreatetruecolor($width, $height+$new_height);
		imagesavealpha($finaloutput, true);

		$trans_colour = imagecolorallocatealpha($finaloutput, 0, 0, 0, 127);
		imagefill($finaloutput, 0, 0, $trans_colour);

		imagecopy($finaloutput, $source, 0, 0, 0, 0, $width, $height);
		imagecopy($finaloutput, $output, 0, $height, 0, 0, $width, $new_height);
		$output = $finaloutput;

	/*
		----------------------------------------------------------------
		Output our final PNG
		----------------------------------------------------------------
	*/
	if (headers_sent())
	{
		echo 'Headers already sent, I cannot display an image now. Have you got an extra line-feed in this file somewhere?';
		exit();
	}
	else
	{
	    //	PNG
	    header("Content-type: image/png");
	    imagepng($output);

        // Save cached file
        if ($cache)
        {
            imagepng($output, $cache_path);
        }

		imagedestroy($output);
		exit();
	}
?>

Voila... ensuite ya les images, mais bon... je crois ce n'est pas utile.. en ce qui concerne les codes, je croi qu'il ne manque rien :

En vous remerciant encore pour l'attention que vous me portez...

Je précise bien que le code n'est pas le mien, je ne susi pas assez callé poru cela

Pour info voici un "schéma" de l'arborescence des documents et dossiers:

- Index
- style.css
- imageflow.css
- imageflow.packed.js
- imageflow.js
- reflect2.php
- reflect3.php
- img (dossier image)
--------- img1.png
--------- img2.png
--------- img3.png
- slider_dark.png (image pour la barre de défilement)
- slider.png (curseur de la barre de défilement)

Je re-précise que le résultat donné n'est pas celui désiré, en effet mes images ne s'affichent pas... j'ai vérifié l'arborescence des documents ça à l'air d'être juste à moins que je me soit mélangé les pinceaux... donc je ne sais pas d'où ça viens :/

Merci de me préter un cerveaux neuf et surtout plus rempli

Webmaster_chrysalide

7 avril 2009 à 23:02:55

Bonjour
Après plusieurs semaine de recherches et de travaux, de test et te copiage... j'ai enfin trouvé "LE" script que je cherchais. Malheurusement quand je décompresse le zip et que je teste le script... Erf! gros soucis, ça ne fonctionne pas :'(

j'ai donc essayer d'examiner le site, de copier les propres scripts du site et de vérifier le script téléchargé... de bidouiller, d'essayer de comprendre d'où pouvait venir l'erreur... mais je ne trouve pas. C'est pourquoi je me tourne vers vous pour savoir si une âme charitable et qui en sache plus que moi sur le sujet veuille bien me renseigner.

alors je ne pose pas les codages de la page html, ni ceux des css, ni ceux des documents JS, sinon ça va pas être très lisible ... c'est pourquoi je n'ai pas d'autres solution que de donner le lien de la démo du script, avec dans cette page le zip.

(au pir si quelq'un a une solution pour faire un quelque chose similaire en plus simple je suis bien sur preneur.)

Demo ici .

Voila, j'éspère que quelqu'un pourra me renseigner, me dire pourquoi sur ma page il n'y a rien, que du blanc. ou alors pourquoi je ne peux pas programmer mes images.

Merci par avance pour votre aide, parceque là... je bloque à fond :s
Cordialement,

Golmote

8 avril 2009 à 0:19:23

Et bien ma foi, le résultat est très joli...

Mais je ne vois pas en quoi on peut t'aider là...

Il va bien falloir que tu nous donnes tes différents codes, parce qu'avec une version qui fonctionne, on va avoir du mal à trouver les bugs ! xD

Si tes codes sont trop longs, utilise la balise <secret> en plus des balises <code>

8 avril 2009 à 0:43:22

8 avril 2009 à 1:17:57

Ah oui en effet c'est... conséquent ! xD

Bon, j'ai pas le temps de voir ça ce soir (dodo !).

N'hésite pas à faire un up si j'oublie de revenir. Mais j'essaierai de penser à jeter un coup d'oeil plus approfondi.

Darkodam

8 avril 2009 à 3:52:42

Salut chrysalide,

J'ai mis ton code en ligne (voir ici, je n'ai fait aucune modification), et il fonctionne très bien sur la plupart des navigateurs, malgré quelques lenteurs sur IE7 et Chrome. Donc je me pose la question : Testes-tu ton code en local, et si oui, as-tu bien lancé un interpréteur PHP et regardé ta page via http://localhost ?
Je te pose cette question car le fichier utilisé pour créer l'effet de reflet est écrit en php.

8 avril 2009 à 9:35:33

+1 Darkodam !

9 avril 2009 à 19:15:41

Bonjour, pour donner des nouvelles, je me suis rendu compte de certaines erreurs (de ma part :$). En effet ayant l'habitude de travailer en local avant de publier mes pages et de les tester par WampServer (en localhost) je ne comprend même pas comment j'ai pu négliger ce "détail".
En effet les nerfs qui m'ont emportés à cause du codage du script dont je ne comprennais pas tout a fait que j'ai du passer directement par le documen index.html sans fare attention que cette page appelait des fonctions d'une page php.
La solution comme vous devez donc le comprendre est bien celle proposée par Darkodam.
Maintenant "l'erreur" me semble très logique, et j'en ais même honte... :

Je vous remercie donc pour votre attention et votre aide, et n'aurai plus qu'un mot à ajouter... ou plutôt une note : Darkodam +10
(Darkodam= +10 ; Webmaster_chrysalide = -10

)

merci à vous pour votre aide.. moi de mon côté je n'ai plus qu'à essayer d'adapter mon script Js par dessus (ce qui n'est pas gagné du tout... :s)

sur ce, bonne continuation à vous

cordialement,

carousel en JavaScript

script complet (il y a une erreur, mais je trouve pas où)

carousel en JavaScript

Supprimer

Modérer

Signaler le message aux modérateurs