<!DOCTYPE html>
<html lang="en-US">
	<head>
		<title>zAccordion Examples</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="jquery-1.6.1.min.js"></script>		
		<script type="text/javascript" src="jquery.zaccordion.min.js"></script>
		<style type="text/css">
			
			* {margin:0;padding:0;font-family:Arial, Verdana, sans-serif;}

			body {padding:0px;}			
			
			a {font-size:12px;text-decoration:none;color:#000;}			
			
	pre {font-family:"Courier New", Courier, monospace;font-size:10px;margin:20px  10px;}			
			
		</style>
		<script type="text/javascript">
			$(document).ready(function() {
				$("pre.js").each(function(index) {
					eval($(this).text());
				});
			});
		</script>
	</head>
	<body>
		<div id="container">



			<style type="text/css">
				#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">
				
				<li><img src="images/Pic10.jpg" width="700" height="200" />

<div id="Page1" style="overflow:auto; width:655px; height:180px; position:absolute; top:10px; left:35px; 
color:#fff; font-size:14px">
<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;  ">

<b>Dieser "bold" Text ist Bestandteil eines sog. "div-containers", der hier als "page1" einkopiert ist.
</b><br/><br/>
Im text-editor Dokument "DirectHTML-Data.txt", welches in der ZIP enthalten ist, knnen ALLE nderungen 
vorgenommen werden. Wenn man die HTML-Codierung im Auge behlt, ist das auch fr HTML-Laien kein groes Problem. 
Einfach dieses komplette script in das "Direct-HTML"- Objekt kopieren.<br/><br/>
Textrelevante HTML-Attribute knnen in der Zeile "Page1" gendert, bzw. eingefgt werden.


	</div>
    </div>

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

<div id="Page1" style="overflow:auto; width:655px; height:180px; position:absolute; top:10px; left:35px; 
color:#fff; background:#000; font-size:14px">
<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;  ">

<b>Zustzlich zum Text ist hier ein Hintergrund eingefgt, siehe "background" Angabe in der 
"Page1"-Zeile.</b><br/><br/>
Um die scroll-Fhigkeit der Seite zu zeigen hier der bliche "Lorem Ipsum" Text.<br/><br/>
<i>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.</i><br/><br/>
Cheers <br/><br/>

	</div>
    </div>

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

<div id="Page1" style="overflow:auto; width:655px; height:180px; position:absolute; top:10px; left:35px; 
color:#000; opacity:.4; font-size:14px">
<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;  ">

<b>Dieser Text ist nun mittels "opacity", ebenfalls in "Page1" Zeile, dargestellt.</b><br/><br/>



	</div>
    </div>

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

<div id="Page1" style="overflow:auto; width:655px; height:180px; position:absolute; top:10px; left:35px; 
color:#fff; background:#000; opacity:.4; font-size:14px ">
<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;  ">

<b>Hier sind sowohl Text als auch Hintergrund mit opacity auf .4 dargestellt.</b><br/><br/>



	</div>
    </div>

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

<div id="Page1" style="overflow:auto; width:655px; height:180px; position:absolute; top:10px; left:35px; 
color:#000; background:#fff; opacity:.4; font-size:14px ">
<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;  ">

<b>Das ndern der Slider-Bilder erfordert nur deren Austausch im "images" Ordner.</b><br/><br/>
Am Besten man benennt sie immer wie die auszutauschenden Bilder, sonst muss man eben die src-Angaben 
entsprechend ndern.<br/><br/> 


	</div>
    </div>

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

<div id="Page1" style="overflow:auto; width:655px; height:180px; position:absolute; top:10px; left:35px; 
color:#000; background:#fff; opacity:.4; font-size:14px ">
<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;  ">

Wenn man mit dieser Akkordeon-Show nur Bilder zeigen will, einfach diesen "div-container" lschen. Siehe die 
folgenden Bildzeilen zwischen "li u. /li".<br/><br/> 


	</div>
    </div>

</li>
				<li><img src="images/Pic6.jpg" width="700" height="200" /></li>
				<li><img src="images/Pic7.jpg" width="700" height="200" /></li>
				<li><img src="images/Pic8.jpg" width="700" height="200" /></li>
				<li><img src="images/Pic9.jpg" width="700" height="200" /></li>
			</ul>
			<a id="start" href="#"><b>Start</b></a>
			<a id="stop" href="#"><b>Stop</b></a>
			<ul id="thumbs">
				
				<li><a href="#"><b>1</b></a></li>
				<li><a href="#"><b>2</b></a></li>
				<li><a href="#"><b>3</b></a></li>
				<li><a href="#"><b>4</b></a></li>
				<li><a href="#"><b>5</b></a></li>
				<li><a href="#"><b>6</b></a></li>
				<li><a href="#"><b>7</b></a></li>
				<li><a href="#"><b>8</b></a></li>
				<li><a href="#"><b>9</b></a></li>
				<li><a href="#"><b>10</b></a></li>

			</ul>


			
			
<pre class="js">
$("#example3").zAccordion({
	slideWidth: "700px",
	width: "860px",
	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;
});
</pre>			

			</div>
		</div>
	</body>
</html>