| JavaScript: Slideshow Beispiel01 |
| Geschrieben von: Andreas Berger |
| Sonntag, den 01. März 2009 um 12:28 Uhr |
|
Das erste Beispiel zeigt die Standardkonfiguration des Scripts. Die Annahme: Auf 1 Seite soll 1 Slideshow dargestellt werden. Die Bezeichnungen "be_slide.html" und "be_slide.js" entsprechen den Dateinamen in dem Beispiel, das im Download des Scripts hier Javascript: Slideshow enthalten ist. Die nachfolgenden Erklärungen beziehen sich auf die Dateien im Beispiel und erläutern nur die Einbindung in eine Webseite und die Konfiguration des heruntergeladenen Scripts be_slide.js. be_slide.html - die WebseiteDer erste Schritt zur Verwendung ist die Einbindung des Scripts in die Webseite. Dazu wird es im HEAD-Bereich der Seite verlinkt:<script type="text/javascript" src="be_slide.js"></script> Das Beispiel geht davon aus, dass das Script im selben Verzeichnis liegt wie die Webseite. <div id="slideshow" style="margin:25px;"> <img src="pics/pic01a.jpg" style="width:400px;height:300px;" /> </div> Damit sind in der Seite selbst alle nötigen Vorbereitungen getroffen. be_slide.js - die ScriptdateiIm heruntergeladenen JavaScript-File "be_slide.js" werden jetzt die einzelnen Parameter entsprechend der gewünschten Verwendung gesetzt. Das oben angezeigte Beispiel verwendet die folgenden Einstellungen:
//*****parameters to set***** var def_imges=new Array ('pics/pic01a.jpg', 'pics/pic01b.jpg', 'pics/pic01c.jpg'); //In diesem Array werden die Bilder angelegt, die die Slideshow verwenden soll. var def_divid="slideshow"; //Das ist die Identity des DIV-Containers, //in dem die Slideshow angezeigt werden soll var def_picwid=400; //Die Breite des breitesten Bildes in Pixel. //Hinweis: Die Bilder werden vom Script nicht skaliert! var def_pichei=300; //Die Höhe des höchsten Bildes in Pixel. //Hinweis: Die Bilder werden vom Script nicht skaliert! var def_backgr="#eeeeee"; //Die Hintergrundfarbe der Slideshow. Sie ist von Bedeutung, wenn Bilder //nicht exakt den - in den beiden vorherigen Parametern angegebenen //Abmessungen entsprechen. var def_sdur=3; //Die Zeit, die ein Bild zwischen zwei Wechseln angezeigt wird in Sekunden var def_fdur=1; //Die Zeit, die der Wechsel dauern soll var def_steps=20; //Die Anzahl der Schritte, in denen von 100-0 überblendet werden soll //Ein Wert von 1 bis 100, je höher desto fließender der Wechsel var def_startwhen="y"; //Soll nach dem Laden automatisch gestartet werden? "y" für Ja, "n" für Nein var def_shuffle="y"; //Soll mit einem zufälligen Bild begonnen werden? "y" für Ja, "n" für Nein var def_showcontr="y"; //Sollen Kontrollelemente angezeigt werden? "y" für Ja, "n" für Nein var def_contr=new Array('bwd.png','start.png','stop.png','fwd.png'); //bei den Kontrollelementen hat man die Wahl zwischen Textlinks und grafischen //Buttons. In diesem Array werden dementsprechend entweder der Text für die //Textlinks oder der Pfad zum Button eingetragen. Findet das Script die Endung //.jpg, .gif oder .png, dann wird der Button angezeigt, ansonsten ein Textlink //die Reihenfolge der Kontrollelemente und damit auch der Elemente in diesem //Array ist: ZURÜCK - START - STOP - VOR //****************************************************************
Das wars. Viel Spass mit dem Script! |
| Zuletzt aktualisiert am Donnerstag, den 26. November 2009 um 18:49 Uhr |


Stimmt, wenn man JavaScript deaktiviert, dann werden die zwei Bilder der Slideshow untereinander angezeigt. Du hattest recht.
Andererseits - auch wenn es unter dem Link nicht nur eine HTML-Seite sondern in dieser gleich auch noch eine zweite (komplettes Dateigerüst im BODY der ersten einfach eingefügt) zu sehen gibt - auf keiner der beiden Seiten ist meine Slideshow im Einsatz.
Hilfestellung wird Dir also vermutlich am ehesten der Entwickler der Slideshow geben können, die Du statt dessen verwendest. :)
Gruß
Andreas
habe die Seite nochmals hochgeladen.
www.danielbuob.ch/gb1.php
Wenn du so nett wärst und dir das nocheinlam anschauen würdest?
Danke und gruss
Vielleicht magst Du Dir ja das oben dargestellte Beispiel noch mal mit mir gemeinsam ansehen: In der HTML-Datei selbst gibt es im HEAD den Aufruf, der das Script lädt. Des weiteren gibt es 1 statisch eingebundenes Bild. Das wars.
Was folgt daraus? Wenn jemand die Seite mit deaktiviertem JavaScript öffnet, dann sieht er ganz genau dieses 1 Bild, und nicht mehr.
Alle anderen Bilder werden ja erst vom Script in den angegebenen Container geladen, sind für Benutzer ohne JavaScript also garnicht existent.
Die Seite, die Du verlinkt hast, ist zzt. leider nur als "Im Wartungsmodus" online, wenn Sie läuft, lade ich Dich gerne ein, nochmals Bescheid zu geben und ich schau mir das an.
Gruß
Andreas
Zuerst einmal danke für deine Antwort. Das unten beschriebene Probelm konnte ich selbst noch lösen. Nun stellt sich mir aber das nächste problem in den weg. Die Seite habe ich mal provisorisch aufgeschaltet.
www.danielbuob.ch
Wenn du im Browser das javascript deaktivierst, werden die Bilder untereinander aufgeschaltet... Was mir dann das ganze Layout der Page zu nichte macht... Hast du da eine Idee, dass wenn bei jemanden die Javascript Option ausgeschaltet ist, dass dann einfach ein Standbild aufgeschaltet wird?
Vielen dank jetzt schon für deine Hilfe.
PS: Das Script ist super :=)
"so wie ich Deine Script verstehe sind diese Links alle im Javascript eingebaut und nicht wie bei meinem Beispiel in HTML!? "
ja
Viel Spass beim Umbauen und Testen - JavaScript ist eine spannende Angelegenheit und bietet enorme Möglichkeiten :)
Gruß
Andreas
vielen Dank für Deine schnellen Antworten!
Bzgl. der Links, wollte ich gerne Javascript verwenden, um nicht andere Seiten laden zu müssen.
Die Seite ist noch nicht Online, sonst hätte ich den Link gerne Online gestellt.
Die Links sehen ungefähr wie folgt aus:
-a- href="/images/seriea/1.jpg" rel="lightbox-seriea" serie a- a-
-a-href="/images/seriea/2.jpg" rel="lightbox-seriea"- a-
-a- href="/images/serieb/1.jpg" rel="lightbox-serieb" serie b -a-
-a- href="/images/serieb/2.jpg" rel="lightbox-serieb"- a-
etc.
Somit alles über das Menü ohne eine neue Seite zu laden... so wie ich Deine Script verstehe sind diese Links alle im Javascript eingebaut und nicht wie bei meinem Beispiel in HTML!?
Viele Grüße
Georg
Stimmt, der HTML-Part Deines Kommentars wurde nicht gespeichert, da die Kommentarfunktion aus Sicherheitsgründen auf Textnachrichten beschränkt ist. Falls Deine Seite irgendwo online ist, wäre ein Link zum besseren Verständnis Deiner Fragen demzufolge kein Fehler.
Zum Ansprechen Deiner Fotoserien: Am einfachsten geht das, indem Sie auf einzelnen Seiten eingebunden sind und die Links die Seite wechseln.
Die Buttons generiert das JavaScript in den Zeilen 199 bis 203. Wie man Sie entfernt kriegst Du sicher raus.
Beim Positionieren der Bilder links unten wird es schon etwas kniffliger, die entsprechenden CSS-Angaben finden sich in den Zeilen 189 und 190.
Prinzipiell: Ja, es wäre kein Problem, Dir einfach zu sagen: ersetze dies durch jenes und das durch das, aber wenn Du Dich seit zwei Wochen mit HTML beschäftigst (und mit CSS und JavaScript wirst Du Dich kurz- bis mittelfristig zwangsläufig auch beschäftigen müssen), dann hast Du wesentlich mehr davon, durch Versuch und Irrtum, durch Suchen von Vergleichsbeispielen, googlen von Befehlsnamen und CSS-Selektoren und durch die Lektüre von selfhtml.org und Konsorten Wissen zu erarbeiten, als wenn ich Dir etwas serviere, wovon Du nicht wirklich profitierst.
Gruß
Andreas
ich glaube der HTML Text für die Links ist bei Dir nicht angekommen, bzw. wird
nicht in der Vorschau gezeigt!?
Viele Grüße
Georg
erst einmal vielen vielen Dank für Dein Script! Ich beschäftige mich seit ungefähr 2 Wochen mit HTML und habe von Javascript keine Ahnung. Deshalb vielleicht ein paar "dumme" Fragen von meiner Seite.
Ich habe momentan 4 verschiedene Fotoserien, die der Besucher per Mouseclick ansehen kann (in meinem Seitenmenü sind somit folgende Links: Serie A, Serie B, etc.)
Beispiel im HTML Text:
serie a
serie b
Die Links haben die Slimbox/Lightbox angesprochen.. welche ich aber nicht mag,
da man sie nicht positionieren kann und sie wie ein PopUp reagiert. Ich finde Deine Lösung
die weitaus elegantere, nach der ich immer gesucht habe!
- Und nun zu meinen Fragen, wie kann ich Dein Script über die verschiedenen Links (mit den unterschiedlichen Serien) ansprechen?
- Ich würde die Slideshow gerne nur mit einem NEXT und BACK versehen, bei der Demo funktioniert allerdings das Faden bei der manuellen Benutzung nicht, was muß ich im Skript ändern?
- Kann ich die Fotos (verschiedene Größen) die in der Slideshow laufen, irgendwie in der linken unteren Ecke im Slideshow DIV ankern?
Ich würde mich sehr über Deine Antworten freuen!
Viele Grüße Georg
Zu Beginn und nur der Ordnung halber - ich bin nur Einer und der Pluralis majestatis muss nicht sein ;)
Zu Deiner Frage, in dem was Du in Deinem Kommentar (aus dem ich die Kommentarzeilen des Quelltextes entfernt habe) anführst sehe ich keinen Fehler, wenn es nicht klappt, dann liegt der also offensichtlich anderswo. Wenn die Seite irgendwo online ist, dann wäre ein Link hilfreich, wenn nicht, dann lade ich Dich ein, Seite + zugehöriger Dateien zu zippen und mir per Email (Kontakt) zu schicken. Ich schau mir das gerne an.
Geht beides nicht, Firefox hat eine sehr gute Error-Konsole. Schau vielleicht mal, was die sagt.
Gruß
Andreas