zAccordion Examples
  • Dieser "bold" Text ist Bestandteil eines sog. "div-containers", der hier als "page1" einkopiert ist.

    Im text-editor Dokument "DirectHTML-Data.txt", welches 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. Einfach dieses komplette script in das "Direct-HTML"- Objekt kopieren.

    Textrelevante HTML-Attribute können in der Zeile "Page1" geändert, bzw. eingefügt werden.
  • Zusätzlich zum Text ist hier ein Hintergrund eingefügt, siehe "background" Angabe in der "Page1"-Zeile.

    Um die scroll-Fähigkeit der Seite zu zeigen hier der übliche "Lorem Ipsum" Text.

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.et wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

    Cheers

  • Dieser Text ist nun mittels "opacity", ebenfalls in "Page1" Zeile, dargestellt.

  • Hier sind sowohl Text als auch Hintergrund mit opacity auf .4 dargestellt.

  • Das Ändern der Slider-Bilder erfordert nur deren Austausch im "images" Ordner.

    Am Besten man benennt sie immer wie die auszutauschenden Bilder, sonst muss man eben die src-Angaben entsprechend ändern.

  • Wenn man mit dieser Akkordeon-Show nur Bilder zeigen will, einfach diesen "div-container" löschen. Siehe die folgenden Bildzeilen zwischen "li u. /li".

Start Stop
$("#example3").zAccordion({
	slideWidth: "700px",
	width: "760px",
	height: "200px",
	timeout: 4000
});
$("#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;
});