Javascript Slideshow

[hossi]

Hi,

... z.B. http://nivo.dev7studios.com/ und habe schon mit zwei Beispielen erfolglos versucht. ...

Der sieht ja auch ganz nett aus :)

Eigentlich ist so ein Einbau ganz simple.

Lade dir zuerst das Stylpack von der Seite: klick

und das Nivoslider-pack: hier

In dem Style-Pack befinden sich 4 Dateien, 3 Bilder und eine CSS. Die CSS kannst du löschen.

Danach fügst du folgenden Code in den Head deiner HTML-Datei:

  
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>  
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>  
<script type="text/javascript">  
$(window).load(function() {  
	$('#slider').nivoSlider();  
});  
</script>  
<script type="text/javascript">  
$(window).load(function() {  
	$('#slider').nivoSlider({  
		effect:'random', //Specify sets like: 'fold,fade,sliceDown'  
		slices:15,  
		animSpeed:500,  
		pauseTime:3000,  
		startSlide:0, //Set starting Slide (0 index)  
		directionNav:true, //Next & Prev  
		directionNavHide:true, //Only show on hover  
		controlNav:true, //1,2,3...  
		controlNavThumbs:false, //Use thumbnails for Control Nav  
      controlNavThumbsFromRel:false, //Use image rel for thumbs  
		controlNavThumbsSearch: '.jpg', //Replace this with...  
		controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src  
		keyboardNav:true, //Use left & right arrows  
		pauseOnHover:true, //Stop animation while hovering  
		manualAdvance:false, //Force manual transitions  
		captionOpacity:0.8, //Universal caption opacity  
		beforeChange: function(){},  
		afterChange: function(){},  
		slideshowEnd: function(){} //Triggers after all slides have been shown  
	});  
});  
</script>  

und dahin, wo der Slider soll, fügst du diesen Code ein:

  
<div id="slider">  
	<img src="images/slide1.jpg" alt="" />  
	<a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" /></a>  
	<img src="images/slide3.jpg" alt="" title="This is an example of a caption" />  
	<img src="images/slide4.jpg" alt="" />  
</div>  

Die Pfade zu den Bildern etc. musst du natürlich selbst anpassen bzw. erweitern ...

Alle Dateien in ein Verzeichnis schmeisen (inkl. der index.html oder wie auch immer).

Das wars (denke ich) ;)
Sollte funktionieren, ich habs jetzt allerdings selbst nicht getestet.

Greetz
hossi