Startseite Javascript Slideshow - Slideshow Beispiel 01
2010-08-01
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)
Navigationselemente im Vordergrund
80 Mittwoch, den 21. Juli 2010 um 11:46 Uhr
Christian

Hallo zusammen,

erstmal, SUPER Script! Danke!

Frage, ist es möglich die Navigationselemente irgendwie über die Bild zu legen? Also nicht das sie immer unter dem Bild erscheinen.

Über die beiden Anweisungen:
var def_picwid=1020; //set this to the width of your widest pic
var def_pichei=230; //... and this to the height of your highest pic
Kann ich ja die Position bestimmen. Wenn ich jedoch die Höhe etwas niedriger angebe, versteckt sich die Navi hinter den Bildern.

1000 Dank vorab und liebe Grüße
Christian

@Christian
Mittwoch, den 21. Juli 2010 um 15:15 Uhr
A. Berger

Hallo Christian!

Die HTML-Elemente der Slideshow werden im Script ab Zeile 181 erzeugt. Da das Script unter der GPL lizensiert ist, kannst Du das ganz so umbauen, wie Du es haben möchtest.

Gruß
Andreas

Slideshow läuft nur im Stammordner
79 Donnerstag, den 24. Juni 2010 um 21:31 Uhr
Mani

Da ist alles bestens.

Kreiere ich baer einen neuen Ordner, der im Stammverzeichnis liegt (in meinem Fall "slide", packe alles da rein, außer die html-Datei, ändere die Pfade, auf der html-Seite also:


und

img src="/slide/pics/pic01a.jpg" border="0" style="width: 200px; height: 200px;" /

Und im Javascript dann:
//*****parameters to set*****
//into this array insert the paths of your pics.
var def_imges=new Array ('slide/pics/pic01.jpg', 'slide/pics/pic02.jpg', 'slide/pics/pic03.jpg', 'slide/pics/pic04.jpg', 'slide/pics/pic05.jpg');
var def_divid="slideshow"; //the id of the div container that will hold the slideshow
var def_picwid=200; //set this to the width of your widest pic
var def_pichei=200; //... and this to the height of your highest pic
var def_backgr="#eeeeee"; //set this to the background color you want to use for the slide-area
//(for example the body-background-color) if your pics are of different size
var def_sdur=3; //time to show a pic between fades in seconds
var def_fdur=1; //duration of the complete fade in seconds
var def_steps=20; //steps to fade from on pic to the next
var def_startwhen="n"; //start automatically at pageload? set it to "y" for on and to "n" for off
var def_shuffle="y"; //start with random image? set it to "y" for on and to "n" for off
var def_showcontr="y"; //do you want to show controls? set it to "y" for on and to "n" for off
//into this array insert the paths of your control-buttons or the text to display e.g. back,start,stop,fwrd.
var def_contr=new Array ('slide/bwd.png', 'slide/start.png', 'slide/stop.png', 'slide/fwd.png');//****************************************************************

... werden die Bilder nicht erkannt, nur das erste aufgerufene zeigt sich, die Abspieltasten sind auch nicht zu sehen.
Cache habe ich im Browser gelöscht, klappt dennoch nicht.
Wo habe ich was übersehen, nicht angepasst?

Danke und herzliche Grüße

@Mani
Montag, den 28. Juni 2010 um 19:40 Uhr
A. Berger

Hallo Mani!

"Relativ zum Script" bedeutet, dass der Pfad zu den Bildern statt 'slide/pics/pic01.jpg' eben 'pics/pic01.jpg' zu lauten hat, weil im Ordner "slide das Script liegt. Für die Pfade zu den Buttons, die Du auch geändert hast, gilt das analog.

Betreffend Deiner Testseite, der Grund dafür, dass die Sldieshwos nicht funktionieren ist, dass Du im öffnenden BODY-Tag den JavaScript onload-Event gnadenlos überschreibst und damit die Slideshows aushebelst.
Die Slideshow verwendet mit der Funktion "daisychain" einen Möglichkeit, diesen Event zu benutzen OHNE andere Scripts zu behindern. Das Script das Du verwendest tut das nicht. Wende Dich bitte an den Entwickler und ersuche um Lösung des Problems oder überprüfe - falls vorhanden - den Supportbereich des Entwicklers auf diesbezüglich bereits vorhandene Lösungsansätze.

Gruß
Andreas

Immernoch rätselhaft
Freitag, den 25. Juni 2010 um 21:49 Uhr
Mani

Habe nun mich an Beispiel 3 rangemacht, alles nochmal neu konzipiert.
Ich habe die Dateien auch nicht in einen neuen Ordner getan, sondern die sind alle im Stammverzeichnis und ich habe dadurch die Pfade ja so lassen können wie im Beispiel.
Die 2. Schaltfläche bekam von mir auch die Tasten, sie sind aber nicht zu sehen.
ALLES DAS FUNKTIONIERT wie beschrieben nur in Opera!
FF und Safari zeigen lediglich das Startbild an, Tasten sind auch nicht zu sehen. das ist doch merkwürdig, oder?
WO liegt denn da der Fehler?

Codeausschnitte aus

HEAD: [...]

BODY: [...]

Bei Interesse kannst Du gerne mal auf meine Testseite gehen:
http://s314378231.online.de/

Falls Du mir da noch helfen kannst würde ich mich freuen.
Auf jeden Fall danke!

Was genau mit Pfad zum Scriptund nicht zur Seite?
Donnerstag, den 24. Juni 2010 um 22:58 Uhr
Mani

Pfad relativ zum Script? Heißt das, nurim Head:
Und sonst alles so lassen?
Hat bei mir aber auch kein Resultat. :-(
Hmm...
Wenn das dann gelöst wurde möchte ich zwei Diashows von denen auf eine Seite stellen. Geht das einfach?

@Mani
Donnerstag, den 24. Juni 2010 um 22:10 Uhr
A. Berger

Hallo Mani!

Die Pfade zu Bildern und Buttons relativ zum Script, nicht relativ zur Seite, dann sollte alles klappen.

Gruß
Andreas

Button zentrieren?
78 Freitag, den 18. Juni 2010 um 21:09 Uhr
Will

Hallo Andreas,

es läuft alles super und sehr schön!

Wegen verschiedener Bildformate (quer, hochkant usw.) hätte ich den Wunsch nach einer kleinen 'Schönheits-OP'.
Wo muss ich was und wie ändern, um die Button unter der Show zu zentrieren? - Ich gehe davon aus, dass das möglich ist, denn so hängen die Button bei schmalen Hochkantbildern rechts außen - weit neben dem Bild.

Danke
Will


 


 

Button zentrieren
Samstag, den 26. Juni 2010 um 23:07 Uhr
Will

Hallo Andreas,

danke !
Das mit den zentrierten Buttons ist super. Bei verschiedenen Bildformaten hat das Ganze jetzt richtig "Gesicht".

Gruß Will


 


 

@Will
Donnerstag, den 24. Juni 2010 um 22:13 Uhr
A. Berger

Hallo Will!

Sorry für die späte Antwort. Deine Frage hatte sich versteckt :)

Um die Buttons zu zentrieren einfach in der Datei be_slide.js in Zeile 200 "text-align:right;" zu "text-align:center;" ändern.

Gruß
Andreas

displaying text
77 Mittwoch, den 16. Juni 2010 um 19:32 Uhr
Dennis S

Andrea,

Thank you for the very useful script! 

I have a question about labeling the individual slides.  I followed the instructions for showing the controls and then created a new array that contained the text I would like displayed for each picture thinking that the text for each item in the new array would somehow be displayed in the same order as the order of the pictures.  Instead all I got was a list of all 3 items in the text array and the slide show stopped (here's how I set it up:)

var text1= new Array ('Picture1 text', 'Picture2 text', 'Picture3 text');
var pics0 = new Array('pic1.jpg', 'pic2.jpg', 'pic3.jpg');

var be_0 = new be_slideshow("0", pics0, "slideshow1", 250, 188, "#ccc", 3, 2, 20, "y", "n", "y",text1);

Is there a way to show just the text associated with a given picture?  In other words, when picture 1 shows I want just the text description for picture 1.

Thanks in advance for any help you can provide,

Dennis S

Thanks for your prompt reply
Mittwoch, den 16. Juni 2010 um 22:47 Uhr
Dennis S

I misunderstood the use of the final 2 parameters.  Thanks for the clarification.

@Dennis S
Mittwoch, den 16. Juni 2010 um 20:47 Uhr
A. Berger

Hi Dennis!

Up till now there is no such feature and therefore what you tried had to fail. There is no use in submitting an additional parameter to a script that is not developed to handle this parameter.
There has to be the functionality first, than it makes sense to use it.

Best regards
Andreas

Slideshow läuft nicht
76 Dienstag, den 15. Juni 2010 um 12:39 Uhr
Will

Hallo,
eigentlich ein Super-Script! Endlich das, was ich suche.
Aber:
Irgendwie läuft das Script nicht. Das statische Bild ist OK, aber das wars dann auch.
Habe vom Scripten nicht viel Ahnung....Habe ich da irgendwo Mist gebaut?
Wer mal reinschauen möchte:
www.fix-reiseauktion.de/fix-test
Wäre nett, wenn mir jemand helfen kann.
Danke
Will


 

Slideshow läuft nicht
Mittwoch, den 16. Juni 2010 um 09:35 Uhr
Will

Hallo Andreas,

wie brede oder gestresst muss man im Kopf sein, um so einen Klops zu landen.
Danke für die Info.
Die Slideshow ist einfach super.

Will

@Will
Dienstag, den 15. Juni 2010 um 20:42 Uhr
A. Berger

Hallo Will!

Das Script kann nicht funktionieren, weil Du nicht - wie bei jedem Beispiel beschrieben - das Script auf der Seite Slideshow heruntergeladen und anahnd des Beispiels konfiguriert hast ("Im heruntergeladenen JavaScript-File "be_slide.js" werden jetzt die einzelnen Parameter entsprechend der gewünschten Verwendung gesetzt. ").
Du hast statt dessen nur die Konfiguration kopiert und als be_slide.js gespeichert. Es fehlt nach den Parametern also das eigentliche Script.

Im Download ist übrigens auch ein funktionierendes Beispiel enthalten.

Gruß
Andreas

Script Slideshow1 positionieren
75 Freitag, den 21. Mai 2010 um 07:29 Uhr
Jürgen P.

Hallo,

habe durch Zufall den Script für die Slideshow gefunden und finde ihn hervorragend. Er wurde testweise eingefügt und funktioniert auch sehr gut. Ich würde die Slideshow gerne auf der Seite mittig positionieren, welche Angaben müssen dann noch wo und wie gesetzt werden?

Vielen Dank für die Hilfe
Jürgen


 

@Jürgen
Samstag, den 22. Mai 2010 um 11:11 Uhr
A. Berger

Hallo Jürgen!

Auf diese Frage gibt es keine Antwort. Das Script ersetzt den Inhalt desjenigen DIV-Containers mit der Slideshow, den Du auf der Seite erstellt hast. Um also die Slideshow mittig zu positionieren - ist der DIV-Container mittig zu positionieren, und welche Angaben dafür erforderlich sind, hängt vom jeweiligen Aufbau der Seite ab.

Gruß
Andreas

Bildlinks
74 Donnerstag, den 20. Mai 2010 um 16:15 Uhr
Frank

Hallo,

auch ich möchte mich zunächst für das tolle Script und den sehr hilfreichen Beschreibungen bedanken! Klasse Arbeit!

Die Sache mit den Bildlinks(verlinkung einer Adresse beim Klick aufs Bild) wurde schonmal angesprochen mit der Antwort das dies für das Joomla Plugin bereits realisiert wurde. Hab ich was übersehen oder gibt es schon irgendeine Zusatzerweiterung für die Standard Slideshow?!

Falls nicht, was muss ich denn an welcher Stelle ändern/hinzufügen, um Bildlinks zu verwenden?


Vielen Dank schonmal!
Gruß, Frank

@Frank
Donnerstag, den 20. Mai 2010 um 20:57 Uhr
A. Berger

Hallo Frank!

Ja, ich weiß, Links und Captions sind längst überfällig. Angefangen ist das Ganze auch schon, aber bislang hat einfach die Zeit gefehlt, die neue Version fertigzustellen. Ich nehme Deine Frage als neuen Anstoß!

Gruß
Andreas

Probleme beim enfügen
73 Dienstag, den 18. Mai 2010 um 09:30 Uhr
Snake

Bastel an der Website für meinen Chef

Der wollte eine Foto Slideshow auf der Webseite haben
Habe das Script eingefügt wie beschrieben aber es tut sich nichts.
Java ist aktiv alles wunderbar aber er wechselt die bilder nicht.
Bin für hilfe Dankbar.

P.S.
Hier der Link zur Seite
http://www.airliner-cafe.de

@Snake
Dienstag, den 18. Mai 2010 um 20:14 Uhr
A. Berger

Hallo Snake!

Das Script erwartet einen DIV-Container im Quelltext der Seite, Du versuchst es einen IFrame füllen zu lassen, das kann nicht klappen. Also "div" statt "iframe".

Gruß
Andreas

Einfach Klasse
72 Montag, den 17. Mai 2010 um 23:08 Uhr
Rolf

Baue diese in meinen Banner ein. Im Freifeldversuch klappt alles. Vielen vielen Dank. Nicht zuletzt für das tolle Skript sondern für die tolle Anleitung.

slideshow
71 Mittwoch, den 12. Mai 2010 um 06:12 Uhr
john Blackett

hi

Great script -- thanks

i problem - i had no problem installing it when the .js file was in the same directory as the html page or a branch higher but had difficulty when the .js file was in a branch lower
ie
the .js file was at
www.mysite.co.uk/java/be_slide.js
but the html page was on
www.mysite.co.uk/skiing/index.html
can you please suggest the coding i should put in the script file

i tried
but it did not work

john
webmaster AT skitlb DOT com

@john Blackett
Donnerstag, den 13. Mai 2010 um 08:58 Uhr
A. Berger

Hi John!

Please provide a link to the page, I will have a look at it.

Best regards
Andreas

Deutsch
Panoramic Image Viewer
AddThis Social Bookmark Button
Wer ist online
Wir haben 30 Gäste online
Neueste Beiträge