Startseite Javascript Slideshow - Slideshow Beispiel 01
2010-09-07
Hauptmenü
externe Links
Meist gelesen
Support

Wenn Sie die Erweiterungen und Scripts auf diesen Seiten nützlich finden, freue ich mich über Ihre Unterstützung. Danke!

Betrag: 

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 Webseite

Der 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.
Andernfalls ist der Pfad entsprechend anzupassen.

Im zweiten Schritt wird im BODY-Bereich der Seite an der gewünschten Stelle ein DIV-Container eingefügt, der die Slideshow enthalten wird. Wichtig dabei ist die IDENTITY, in diesem Fall "slideshow" (id="slideshow"). Sie kann frei gewählt werden, im Script werden wir sie dann als Parameter setzen. Der Container kann beliebig positioniert und formatiert werden.
In diesem Beispiel ist bereits jetzt eines der - im Beispiel in einem Unterordner namens "pics" abgelegten - Bilder eingebunden, mit denen das Script dann arbeitet. Das hat den Vorteil, dass Besuchern mit deaktiviertem JavaScript zumindest das statische Bild angezeigt wird.
Für Besucher mit aktiviertem JavaScript hat der statische Inhalt des DIV-Containers keine Relevanz, da er beim Laden der Seite vom Script ersetzt wird.

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

Im 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
 
Kommentare (80)
@Dominic
30 Dienstag, den 07. Juli 2009 um 21:00 Uhr
A. Berger
Hallo Dominic!

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
Anzeigeproblem
29 Dienstag, den 07. Juli 2009 um 20:23 Uhr
Dominic
Hi 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
@Dominik
28 Dienstag, den 07. Juli 2009 um 18:52 Uhr
A. Berger
Hallo Dominik!

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
Javascript im Browser eingeschaltet/ausgeschaltet
27 Dienstag, den 07. Juli 2009 um 13:27 Uhr
Dominic
Hi 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 :=)
@Georg
26 Dienstag, den 23. Juni 2009 um 19:03 Uhr
A. Berger
Hallo Georg!

"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
Danke
25 Montag, den 22. Juni 2009 um 20:47 Uhr
Georg
Hallo 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
@Georg
24 Montag, den 22. Juni 2009 um 18:41 Uhr
A. Berger
Hallo 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
Nachtrag zu meiner Frage
23 Sonntag, den 21. Juni 2009 um 20:22 Uhr
Georg
Hallo 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
Einfügen von verschiedenen Serien
22 Sonntag, den 21. Juni 2009 um 20:03 Uhr
Georg
Hallo Andreas,

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
@Dominic
21 Sonntag, den 21. Juni 2009 um 12:27 Uhr
A. Berger
Hallo Dominic!

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