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.

(Kann nicht zum Einbinden in DirektHTML verwendet werden)

<!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 definiert die Navigationszeile unter der Show)

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 Nr.“3“ muss, damit die javascripts funktionieren, erhalten bleiben.)

<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 sollte am Besten immer vor „</li>“ stehen und natürlich der Slider-Bildgröße angepasst werden. Sollte so 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 slide 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 ein Label, welches als Hintergrund für die Textzeile 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>

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" />(hier wird, wenn nötig, ein „div-container“ eingefügt)</li>

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

Im Bedarfsfall können die Nummern auch gegen Text ausgetauscht werden.

</ul>

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

</ul>

Hier zu guter letzt die Werte für die Abmessungen der slides sowie des Anzeigebereichs. „slideWidth“ sollte, wenn Bilder hinterlegt sind, der Bildbreite entsprechen. Man kann auch Farb-gifs für unifarbenen Slide-Hintergrund verwenden.

$("#example3").zAccordion({

slideWidth: "700px",

width: "760px", (Diese Angabe muss mind.1px größer sein als eine slider-Breite (hier +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>