Javascript Slideshow

[User#221]

Hallo,

seit Wochen versuche ich eine Javascript-Slideshow in eine Website zu implementieren. Sie muss in einem DIV-Container verlaufen an der Stelle des Hintergrundbildes(DIV #Inhalt), das ich entfernen werde. Sie muss OnLoad verlaufen und ein leichtes Fade haben.
Ich habe die Grundinfos über Javascript im Archiv gelesen, fehlt es mir aber noch an Übung und kann nur mithilfe von Editoren wie Dreamweaver(die einen dicken und nicht verständlichen Code erzeugen) solche Objekte einfügen/bearbeiten.

Ich möchte es möglichst schnell haben und schaffe es nicht mit den vorhandenen Kenntnissen selbst zustande zu bringen. Damit bitte ich um eure Hilfe und um Nachsicht. Leider sind nicht alle logisch fit und für Developer/Programmierer geeignet.
URL:
www.immo-leistungen.de

Vielen Dank!

Bran

[hossi]

Hi,

mein Motto: Warum das Rad neue erfinden? ;)

Schau dir doch mal das hier an: klick

Ist das was für dich? Wenn ja. Downloaden, einbauen, spass haben :)

greetz
hossi

[User#221]

Hey Hossi,

danke für deine Rückmeldung.
Ja, ich kenne JQuery z.B. http://nivo.dev7studios.com/ und habe schon mit zwei Beispielen erfolglos versucht. Offensichtlich muss ich da einige Hausaufgaben machen. Das Unangenehme ist das Plug-In, zu dem man referieren muss. Ich werde trotzdem mal mit deinem Beispiel versuchen.

Danke+Gruesse
Bran

[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

[User#221]

Hi Hossi,

danke für deine Hilfe!

Es ist leider alles nicht so einfach, wie es klingt.
Du kannst mein Beispiel unter http://www.immo-leistungen.de/index2.html
sehen. Die Bilder bleiben hängend untereinander, was mir zum 3-4 Mal in den letzten Wochen passiert. Ich bin nur ein Grafikdesigner und kein Developer(verzweifelnd....).
Ich tue mir schwer mit verschiedenen DHTML-Scripten.
Kannst Du bitte angucken, was ich da falsch mache?

Vielleicht fehlt da ein Handler, der die Javascript-Wirkung bestimmen muss( z.B. onLoad etc.)

Dankeee!
Bran

[hossi]

Hi,

als erstes ist mir jetzt schon mal aufgefallen, dass die nivo-slider.css nicht im selben verzeichnis liegt wie die index2.html, gleiches gilt für die jquery.nivo.slider.pack.js Datei. Also mal schnellstens die beiden Dateien ins richtige Verzeichnis schieben ;)

Das ist schon mal Grundvoraussetzung, damit das klappt ;)

Greetz
hossi

[hossi]

als erstes ist mir jetzt schon mal aufgefallen, dass die nivo-slider.css nicht im selben verzeichnis liegt wie die index2.html, gleiches gilt für die jquery.nivo.slider.pack.js Datei. Also mal schnellstens die beiden Dateien ins richtige Verzeichnis schieben ;)

Das ist schon mal Grundvoraussetzung, damit das klappt ;)

Habs mir mal kurz auf den Rechner gezogen (ohne Bilder).
Soweit ich das beurteilen kann, funktionierts dann ;)

Greetz
hossi

[User#221]

Ja,

es funktioniert und das war der Fehler.
Da bleiben die Zahlen 0123456789 lesbar, die als Counter für die Bilder dienen:
www.immo-leistungen.de/index2.html
Sie muss ich wegkriegen.

Mir gefällt dein erstes simpleres Beispiel mit langsamen Swap & Fade ohne kitschige Effekte wie bei Nivo. Vielleicht lässt sich auch Nivo gut anpassen.

Danke!
Bran

[hossi]

hi,

Da bleiben die Zahlen 0123456789 lesbar, die als Counter für die Bilder dienen

Ja, die musst du ausschalten und zwar in dem du

  
<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>  

den Wert:
controlNav:true, //1,2,3... (Ziemlich in der Mitte, Zeile 11)
auf false setzt, also controlNav:false

Denke ich zumindest, habs nicht getestet.

Und wenn der Div noch mittig wäre, würds auch schöner aussehen ;)

greetz

[User#221]

Hi Hossi,

ich habe mit der Finetuning versucht. Parameter "false" gesetzt und neue Bilder hinzugefügt.
http://www.immo-leistungen.de/index2.html

Allerdings habe ich Schwierigkeit mit der Positionierung der Bilder(habe mit dem inline-style:"horizontal-align:middle" versucht. Außerdem weigert sich jetzt das neue Div die zugeweiste graue Hintergrundfarbe vom class=graurosa aus meinen exportierten CSS anzunehmen. Vgl.
http://www.immo-leistungen.de/index.html

Ich freue mich aber riesig, dass es Licht im Tunnel gibt.

Herzliche Grüße,
Bran

[User#221]

Danke Hossi,

ich werde mich jetzt um das gute Aussehen bemühen.

Herzliche Grüße,
Bran

[hossi]

Danke Hossi,

ich werde mich jetzt um das gute Aussehen bemühen.

Herzliche Grüße,
Bran

Hi,

jetzt hab ich dir eh schon so viel Butter aufs Brot geschmiert ;) Ein bisschen Eigeninitiative wäre schon angebracht.

Das Div mit den Bilder kannst du zentrieren, indem du die CSS-Klasse #slider (folgende)

  
#slider {  
	position:absolute;  
	left:56px;  
	top:102px;  
	width:1265px;  
	height:290px;  
	z-index:2;  
}  

in deiner index2.html bearbeitest.

ich würde mal das versuchen:

  
#slider {  
	position:absolute;  
	left:50%;  
        right:50%;  
	width:900px;  
	height:290px;  
	z-index:2;  
}  

greetz
hossi

[User#221]

Hi Hossi,

das Problem habe ich gelöst:

www.immo-leistungen.de

Allerdings habe ich eine andere ganz simplere und schönere Lösung benutzt.

http://snook.ca/archives/javascript/simplest-jquery-slideshow

Die Leute da sind Freunde des ganz schlanken Codes.
Das Skript des Nivo-Sliders war schwer zu verfolgen und zu editieren. Zu viele Verweise, endlose Spalten Code und Bugs.

Mit der Position habe ich nach deinem Ratschlag Varianten getestet und etwas gebastelt.
Danke und schöne Grüße,
Bran

[User#221]

jquery.nivo.slider.pack.js und nivo-slider.css sind dicht am Root neben meinen HTMLs eingefügt.
Ich befürchte, dass die nivo-slider.css mit meinen eigenen CSS in Dissonanz stehen. Solche JQuery fertige Dinge sind gut, wenn man auf ein weißes Blatt anfängt und nicht, um zu versuchen sie in fertige Schachteln laufen zu lassen.
Gruß,
Bran

[hossi]

jquery.nivo.slider.pack.js und nivo-slider.css sind dicht am Root neben meinen HTMLs eingefügt.
Ich befürchte, dass die nivo-slider.css mit meinen eigenen CSS in Dissonanz stehen. Solche JQuery fertige Dinge sind gut, wenn man auf ein weißes Blatt anfängt und nicht, um zu versuchen sie in fertige Schachteln laufen zu lassen.
Gruß,
Bran

Nö, so lange deine Stylesheets und die des querys nicht die selben Bezeichnungen haben, beist sicht da gar nichts ;)

Da wäre jetzt nur noch ein wenig Finetuning angesagt :) Sache auf ein paar Minuten ..

Bis jetzt läufts ja so wie sollte, fast ;)

Greetz
hossi

[User#221]

Hi Hossi,

danke.
Ich war in der letzten Stunde draußen joggen, um den Stress abzubauen.
Jetzt werde ich noch ein mal die Dateien und  die Verbindungen prüfen und mich sofort melden. Die CSS-Datei war leider bei mir falsch im Images und nicht am Root.
Herzlichen Dank!
Bran

[hossi]

Hi Hossi,

danke.
Ich war in der letzten Stunde draußen joggen, um den Stress abzubauen.
Jetzt werde ich noch ein mal die Dateien und  die Verbindungen prüfen und mich sofort melden. Die CSS-Datei war leider bei mir falsch im Images und nicht am Root.
Herzlichen Dank!
Bran

Nicht nur die CSS, vergiss die jquery.nivo.slider.pack.js nicht noch richtig ins Stammverzeichnis zu packen!

[Felix Riesterer]

Lieber User#221,

Ich habe die Grundinfos über Javascript im Archiv gelesen, fehlt es mir aber noch an Übung und kann nur mithilfe von Editoren wie Dreamweaver(die einen dicken und nicht verständlichen Code erzeugen) solche Objekte einfügen/bearbeiten.

ich meide den Dreamweaver, denn ich brauche die volle Kontrolle über meinen Code in allen Aspekten und Bereichen.

Wenn Du "Nachhilfe" in JavaScript benötigst, dann kann ich Dir diesen Feature-Artikel empfehlen, denn er benutzt genau Deine Problemstellung, um sich so nebenbei mit der komplexeren Nutzung von JavaScript auseinander zu setzen:

* Fader-Framework: Ein kleiner Lehrgang zum Vernünftigen Schreiben eines JavaScripts
* jetzt auch im SELFHTML Wiki zu finden (fast voll nutzbar)

Liebe Grüße,

Felix Riesterer.