Bilder silder

[Jasko]

OK, hier ist der Javascript code mit deutschen kommentaren die ich gemacht habe. Diesen Code muss man in den Header copieren beim eignem Design, oder bei einem nPage design unter Einstellungen ->Homepage-Einstellungen->Header-Bereich->Eigener, zusaetzlicher HTML-Code

Code: Alles auswählen

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<style type="text/css">

#MeineSlideShow{ /*Beispiel CSS und ID-Name fuer die DEMO*/
border:2px solid black;
}

</style>

<script src="translucentslideshow.js" type="text/javascript">

/***********************************************
* Translucent slideshow- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<script type="text/javascript">

var translideshow1=new translideshow({
	wrapperid: "MeineSlideShow", //identifikation des leeren DIV kontainers im HTML Quellcode
	dimensions: [250, 180], //breite/laenge der Slideshow in pixel. Sollte die groesse des groessten Bildes haben.
	//Hier unten kommen die URL der Bilder rein, fuer jedes neue Bild eine neue reihe Setzen 
	//wegen der uebersicht und genau so wie im Beispiel arbeiten
	//Syntax:["Bild_URL", "Hier_bei bedarf_Link_angeben", "Hier_bei_bedarf_zielframe_angeben"]
	imagearray: [
		["http://i26.tinypic.com/11l7ls0.jpg"],  //Einfaches beispiel
		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new"], //Ein beispiel der vollen Syntax
		["http://i30.tinypic.com/531q3n.jpg"],
		["http://i31.tinypic.com/119w28m.jpg"] //<--kein Komma nach dem aller letztem Bild!
	],
	displaymode: {type:'auto', pause:2000, cycles:2, pauseonmouseover:true}, //pause = Bildanzeigedauer (in milisekunden)
	orientation: "h", //Moegliche Werte: "h" oder "v" h=horizontal, v=vertical
	persist: true, //mercken des letzten slides und wiederaufruf des selben beim nechsten oeffnen?
	slideduration: 400 //Wechselgeschwidigkeit der Bilder (in millisekunden)
})

</script>

Die kommentare sin als erklaerung der einzellnen COdezeilen gedacht, fals ihr sie nicht versteht erklaere ich es nochmal Schritt fuer Schritt.

Und so fuehgt man das ganze auf der Textseite ein:

Code: Alles auswählen

<div id="MeineSlideShow"></div>

<a href="javascript:translideshow1.navigate('back')" style="margin-right:190px;">Zur&uuml;ck</a>  <a href="javascript:translideshow1.navigate('forth')">Vor</a>
<br />
<b>Oder benutze den Eintzelaufruf:</b><br />
<a href="javascript:translideshow1.navigate(0)">1st slide</a> | <a href="javascript:translideshow1.navigate(1)">2nd slide</a> | <a href="javascript:translideshow1.navigate(2)">3rd slide</a> |<a href="javascript:translideshow1.navigate(3)">4th slide</a> 

Ich denke dazu muss ich nicht viel schreiben, ausser das der Teil mit dem Einzelaufruf nicht viel nutzt bei groesseren Gallerien und man ihn durchaus weglassen kann, ausserdem kann man die Worte Zurueck und Vor durch schoene Bildchen ersetzen und schon sieht es Top aus.

MFG

[ice]

Sorry,ich bin nun schon ne ganze weile dabei es einzufügen,bekomme es nicht hin
dietmar

[Waltraut]

Ich auch nicht zu dumm zum zum

[Waltraut]

Hab da so was im Internet gefunden auf Deutsch, bei dem gratis Programm steht halt am die Reklame. Aber man kann ohne Anmelden einen Einbindecode bekommen wenn man es erstellt hat versuch mal das. Für Anfänger wie mich ganz brauchbar gibt einige gute Motive.
http://www.photo-flash-maker.com/de/

[Jasko]

OK, damit ich besser helfen kann, sagt doch mal was euch den Probleme macht bei dem Code?

Ist es wie man eigene Bilder einsetzt, oder wie man das ganze auf eine Textseite bekommt? ich will nicht unhoeflich sein, aber "ich bekomme es nicht hin" hilft mir nicht weiter, den dann muss ich raten was ihr den nicht hin bekommt und das kann einiges sein. Darum meine bitte hilft mir damit ich euch helfen kann.

Was ist genau das problem, den eigentlich ist dieser Code relative einfach und mit den kommentaren auch gut zu verstehen, wenn es euch leichter faehlt kann man den Javascript code und den Code zum aufrufen auf die selbe Textseite packen, respektiv. Ich denke so wird es fuer euch einfacher.

MFG

[Waltraut]

Tut mir leid aber, wo in Haeder und ich habe kein eigenes Design, ist nicht bös gemeint , aber für Unwissenden wie mich doch kommpliziert. Wenn ich es in HTLM Seite einfach so einbauen könnte und dann die Bilder vielleicht. Aber welche URL dann oh ich muß noch lernen

[moni]

Tut mir leid aber, wo in Haeder und ich habe kein eigenes Design, ist nicht bös gemeint , aber für Unwissenden wie mich doch kommpliziert. Wenn ich es in HTLM Seite einfach so einbauen könnte und dann die Bilder vielleicht. Aber welche URL dann oh ich muß noch lernen

kannst auch versuchen und alles (skript) in HTML Modus auf deine Text Seite packen ...

hatte etwas anderes Skript angewendet und auch alles auf die Test Seite gepackt
http://www.dynamicdrive.com/dynamicinde ... deshow.htm
http://blicke1.npage.de/sandskulpturen.html

[Waltraut]

Vielen Dank für deine Mühne aber ich bleibe notgedrungen bei der Diaschau ist ja schön von Picasa da bekommt den Einbau Link und fertig.
Aber das Pogramm Fotostory 3 für Winduws ist gut wenn man mehrere Bilder als Fotoalbum verschicken möchte. Man kann aus vielen Motiven für das Album aussuchen und die Bilder werden gleich für Mail kommpremiert man kann Musik abspielen und aufnehmen was man zu den Bilder sagen möchte und gesprochenene Grüße mit schicken.

[Jasko]

Hallo, hier habe ich eine weitere Anleitung wie man das ganze einbauen kann, es handelt sich um eine PN die ich an ice geschickt habe und die hier als ergaenzung auch ihren Platz finden soll:

Das ist kein Problem darum sind wir hier um einander zu helfen. Im grunde ist der Code einfach, man kopiert ihn so wie er ist in eine Textseite rein (dazu kann man eine demoseite nehmen, die nicht gleich jeder sehen kann) Man kopiert erst den Javascript Code und als naechstes den Code zum aufrufen des Javascript.

Das ist der Javascript Code:

Code: Alles auswählen

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<style type="text/css">

#MeineSlideShow{ /*Beispiel CSS und ID-Name fuer die DEMO*/
border:2px solid black;
}

</style>

<script src="translucentslideshow.js" type="text/javascript">

/***********************************************
* Translucent slideshow- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<script type="text/javascript">

var translideshow1=new translideshow({
   wrapperid: "MeineSlideShow", //identifikation des leeren DIV kontainers im HTML Quellcode
   dimensions: [250, 180], //breite/laenge der Slideshow in pixel. Sollte die groesse des groessten Bildes haben.
   //Hier unten kommen die URL der Bilder rein, fuer jedes neue Bild eine neue reihe Setzen
   //wegen der uebersicht und genau so wie im Beispiel arbeiten
   //Syntax:["Bild_URL", "Hier_bei bedarf_Link_angeben", "Hier_bei_bedarf_zielframe_angeben"]
   imagearray: [
      ["http://i26.tinypic.com/11l7ls0.jpg"],  //Einfaches beispiel
      ["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new"], //Ein beispiel der vollen Syntax
      ["http://i30.tinypic.com/531q3n.jpg"],
      ["http://i31.tinypic.com/119w28m.jpg"] //<--kein Komma nach dem aller letztem Bild!
   ],
   displaymode: {type:'auto', pause:2000, cycles:2, pauseonmouseover:true}, //pause = Bildanzeigedauer (in milisekunden)
   orientation: "h", //Moegliche Werte: "h" oder "v" h=horizontal, v=vertical
   persist: true, //mercken des letzten slides und wiederaufruf des selben beim nechsten oeffnen?
   slideduration: 400 //Wechselgeschwidigkeit der Bilder (in millisekunden)
})

</script>

Und das hier gleich darunter auf der Textseite platzieren, bzw. da wo die Slideshow zu sehen sein soll. Das ist der Code zum aufrufen des Javascript bzw der Slideshow (ohne Links Vor und Zurueck, um es einfach zu halten.)

Code: Alles auswählen

<div id="MeineSlideShow"></div>

Zu beachten ist nur, das man das ganze im HTML Modus machen soll/muss.

Desweiteren ist dieser Berreich wichtig:
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg"], //Einfaches beispiel
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new"], //Ein beispiel der vollen Syntax
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg"] //<--kein Komma nach dem aller letztem Bild!
],

So ich habe es jetzt mit farben markiert. Die unterstrichenn Codes sind jeweils ein Bild, also leuft diese Slideshow mit 4 Bildern. Das rote Markiert die URL des Bildes (Die Bilder muessen vorher hochgeladen worden sein, und man muss sich die URLs der Bilder mercken bzw. kopieren, damit man diese dan im Code verwenden kann). Das gruene markiert einen Link (das heisst wenn man auf dieses Bild in der Slideshow klickt kommt man auf die Seite wo hin der Link fuehrt). Das gelbe markiert das Ziel (englisch target), in diesem fall _new, das bedeutet das die neue Seite in einem neuen Fenster geoeffnet wird, welche Werte das Atribut target noch haben kann, kann man sich HIER durchelesen.
Fuer jedes neue Bild wird eine neue Zeile mit Komma gemacht, auser fuer das letzte Bild, hinter dem Code fuer das letzte Bild ist kein Komma.

So ich hoffe ich konnte dir etwas mehr helfen, aber bitte prezisiere etwas mehr das Problem das du hast, damit ich nicht raten muss was ich erklaeren soll .

Wie hier beschrieben und wie moni schon schrieb, kann man die Codes zusammen auf eine Textseite kopieren, damit ist eigentlich die meiste arbeit getan, alles weitere ist Codeanpassung und da koennen wir Schritt fuer Schritt vorgehen, wie oben Beschrieben zuerst mit dem Einbau der eigenen Bilder, spaeter z.B. mit der definition der groesse der Slideshow und so weiter, zusamen und immer eins nach dem anderen kommen wir schon ans Ziel.

MFG

PS: Eine URL ist einfach gesagt die einzigartige Internetadresse auf der das Bild gespeichert ist und mit hilfe derer man es im Browser aufrufen kann.

[Waltraut]

In einer stillen Stunde werde ich es noch mal versuchen