nicht angemeldet
gruss Felix,
Dein angagement verdient unterstuetzung, und weil Du ausdruecklich darum
bittest, folgen nun meinereinige hinweise und kritiken:
1.) Das Script sollte als ein großes Objekt definiert werden, damit
wir alle unsere Variablen nicht als globale Einzelvariablen im Dokument
"herumliegen" haben, ... Deshalb definieren wir eine globale Variable,
nämlich unser großes Objekt. Nennen wir es "FaderFramework", denn es ist
ja eine Rahmenapplikation, die uns individuelle Fader herstellen und
bereitstellen kann.
dem ansatz nach sollen ja eine bis mehrere *eierlegende wollmilch*-slideshows
ueber eine komfortable (moeglichst generische) initialisierung erstellt werden.
eine unter vielen eigenschaften, die eine solche slideshow auszeichnen werden,
ist der fade-effekt beim ueberblendenden bildwechsel. deswegen wuerde ich einen
[SlideshowGenerator] bauen, der instanzen eines [[Slideshow]]-konstruktors
erzeugt. eine *sichtbarkeit* aller objekte in den globalen [window]-namensraum
ist keineswegs notwendig, weshalb ich die gesamte anwendung in eine umgehend
aufzurufende anonyme funktion packen wuerde, die einmalig eine oeffentliche
methode zum importieren von slideshow-daten zur verfuegung stellt, welche sich
wiederum sofort nach ihrem aufruf selbst entsorgt.
2.) Das Script soll sich nach dem Einbinden über ein <script>-Element
selbst initialisieren. Das darf nicht dadurch geschehen, indem wir
<body onload="FaderFramework.onload()">notieren, ...
lösen wir das anders, nämlich über das window-Objekt und dessen onload-
Eigenschaft bzw. -Methode.
das ist keineswegs optimal und fuehrt zum unnoetigen aufwand in 3) ...
3.) ... ff.
.., dessen grundproblem sich auch mit bordmitteln noch kurz genug loesen
laesst, falls man zur umsetzung des gesamten projekts auf bibliotheken wie
»jquery« oder frameworks wie die »YUI-lib« vezichten will/muss, wozu ich
bei umfangreicheren *dom-scripting-tasks* aber nicht raten wuerde.
mein loesungsansatz saehe folgendermassen aus:
html-slideshow-substruktur:
<div class="slideshow">
<img class="slide" src="img/slide02.jpg" alt="bla" title="blub" />
<span class="control" title="Please click yourself through.">
<a class="previous" href = "javascript://" ><span>previous picture</span></a>
<a class="next" href="javascript://"><span>next picture</span></a>
</span>
</div><!-- class="slideshow" //--><!--
...
...
//-->
<div class="slideshow">
<img class="slide" src="img/slide05.jpg" alt="bla" title="blub" />
<span class="control" title="Please click yourself through.">
<a class="previous" href = "javascript://" ><span>previous picture</span></a>
<a class="next" href="javascript://"><span>next picture</span></a>
</span>
</div><!-- class="slideshow" //-->
dazugehoerige css-regeln:
div.slideshow {
position: absolute;
left: 0;
top: 0;
}
div.slideshow img.slide {
display: block;
width: 175px;
height: 103px;
background-color: #cf0;
}
div.slideshow img.slide.blend {
position: relative;
left: 0;
top: -103px;
}
div.slideshow span.control {
position: absolute;
display: none; /* "block" needs to be set by js-controller \*/
left: 59px;
top: 83px;
width: 60px;
height: 15px;
color: #8898a8;
text-align: center;
background: transparent url(../img/elements/elm-slideshow-control.png) scroll no-repeat left top;
}
* html div.slideshow span.control { /* msie 6.x css filter \*/
background-image: url(../img/elements/elm-slideshow-control.gif);
}
div.slideshow span.control span {
position: relative;
top: -2px;
font-size: 80%;
line-height: 96%;
}
div.slideshow span.control a {
position: absolute;
display: block;
top: 0;
width: 19px;
height: 100%; /* 15px \*/
}
div.slideshow span.control a.previous {
left: 0;
}
div.slideshow span.control a.next {
right: 0;
}
div.slideshow span.control a span {
display: none;
}
... to be continued ...
so long - peterS. - pseliger@gmx.net
»Because objects in JavaScript are so flexible, you will want to think differently about class hierarchies.
Deep hierarchies are inappropriate. Shallow hierarchies are efficient and expressive.« - Douglas Crockford
ie:( fl:) br:> va:( ls:& fo:) rl:) n3;} n4:} ss:} de:µ js:} mo:? zu:]
Struppi