Diese ist die gekürzte Kopie des Original-scripts, bei der ich die notwendigen Zeilen für die persönliche Anpassung hervorhebe

Hier eine gekürzte Kopie des Original-scripts (No.3), mittels derer ich die notwendigen Zeilen für die persönliche Anpassung hervorheben und erklären will, damit man sie leichter im eigentlichen script wiederfindet.

(Nicht zum Einbinden in DirectHTML verwenden)

<!DOCTYPE html>

<head>

<title>zAccordion Examples</title>

* {margin:0;padding:0;font-family:Arial, Verdana, sans-serif;}

body {padding:0px;}

a {font-size:12px;text-decoration:none;color:#000;}

(Diese Zeile beschreibt die Navigationszeile unter der eigentlichen AccordionShow)

pre {font-family:"Courier New", Courier, monospace;font-size:10px;margin:20px 10px;}

</style>

$(document).ready(function() {

$("pre.js").each(function(index) {

eval($(this).text());

});

</script>

</head>

<body>

#thumbs {list-style:none;float:left;}

#thumbs li {display:inline;}

#thumbs a {margin-left:5px;float:left;}

#start {display:none;float:left;}

#stop {float:left;}

</style>

<ul id="example3">

(die Bezeichnung „example3“ muss, damit die javascripts funktionieren, übernommen werden.)

<li><img src="images/Pic1.jpg" width="700" height="200" />

(diese Zeile definiert das anzuzeigende Bild im „images“-Ordner)

Nachfolgend der rot markierte „div-container“, der die Angaben für den textuellen Inhalt eines slider-Bildes enthält.

Dieser muss immer unmittelbar vor „</li>“ stehen und natürlich der Slider-Bildgröße angepasst werden. Sollte so auch für HTML-Unkundige einigermaßen selbsterklärend sein....

<div id="Page1" style="overflow:auto; width:655px; height:180px; position:absolute; top:10px; left:35px; color:#fff; font-size:14px">(Diese Zeile beschreibt die Seite, die auf DIESEM bestimmten slider erscheinen soll.)

<div class="Label1_nm" id="Label1" style="width:625px; position:absolute; overflow:hidden; top:5px; left:0px; right:0px; margin-left:auto; margin-right:auto; ">(Diese Zeile beschreibt das Label, welches als Hintergrund für den Text gedacht ist. Braucht man sowas nicht, einfach löschen.)

<b>Dieser Text ist Bestandteil eines sog. "div-containers", der hier als "page1" einkopiert ist. </b><br/><br/>

Im text-editor Dokument "DirectHTML-Data.txt", welches auch in der ZIP enthalten ist, können ALLE Änderungen vorgenommen werden. Wenn man die HTML-Codierung im Auge behält, ist das auch für HTML-Laien kein großes Problem....<br/><br/>(Andere textrelevante HTML-Attribute können noch in der Zeile "Page1" geändert, bzw. eingefügt werden.)

</div>

</li>

Hier folgen weitere Slider-Zeilen, die beliebig dupliziert werden können, je nachdem, wieviele man anzeigen möchte.

<li><img src="images/Pic2.jpg" width="700" height="200" />(wenn nötig hier, wie oben beschrieben, im Bedarfsfall einen „div-container“ einfügen. Siehe script und u.s. show für weitere Beispiele.)</li>

Nun folgen die Einträge der Navigationszeile, die unterhalb der show angezeigt werden kann.

Im Bedarfsfall können die Nummern auch gegen Text ausgetauscht werden. Falls diese Zeile nicht erscheinen soll, ist es am einfachsten die iframe-Höhe im dfm-Dokument entsprechend zu begrenzen.

</ul>

<a id="start" href="#"><b>Start</b></a>

</ul>

Hier zu guter letzt die Werte für die Abmessungen der sliders sowie des Anzeigebereichs.

„slideWidth“ sollte idealerweise, wenn Bilder hinterlegt sind, der Bildbreite entsprechen.

Man kann auch Farb-gifs für unifarbenen Slider-Hintergrund verwenden.

$("#example3").zAccordion({

slideWidth: "700px",

width: "760px", (Diese Angabe muss mind.1px größer sein als die „sliderWidth“ (hier also +60px).

Es sind 10 sliders konfiguriert, sodass in diesem Beispiel für jedes ein sichtbarer Versatz von 6px errechnet wird.)

height: "200px", („Akkordeonhöhe“)

timeout: 4000 (Anzeigedauer eines slides – hier 4Sek.)

Das ist schon alles, was man ggfls. nach eigenem Gusto anpassen muss. Gute Verrichtung!

});

$("#start").click(function() {

$("#example3").zAccordion("start");

$(this).css("display", "none");

$("#stop").css("display", "block");

return false;

});

$("#stop").click(function() {

$("#example3").zAccordion("stop");

$(this).css("display", "none");

$("#start").css("display", "block");

return false;

});

$("#thumbs a").click(function() {

$("#example3").zAccordion("trigger", $(this).parent().index());

return false;

});

</pre>

</div>

</body>

</html>