| JavaScript: Slideshow Sample03 |
| Written by Andreas Berger |
| Sunday, 01 March 2009 12:31 |
|
The third sample extends the samples one and two by the possibility to show multiple (in this sample 2) slideshows on one webpage. The file names "be_slide.html" and "be_slide.js" correspond with the file names in the sample that comes with the download of the script at JavaScript: slideshow. The following explanatory notes also refer to these files and show how to integrate the script from the HTML-page and set the parameters in the downloaded JavaScript be_slide.js. be_slide.html - the webpageThe first step is again to integrate the script into the webpage. As shown in sample 02 we are going to adress one scriptfile with multiple slideshows, but this time they are within 1 page. Again we have to link the script and insert our settings in the HEAD-section of the page. First comes the script: <script type="text/javascript" src="be_slide.js"></script> The sample assumes, that the script is located in the same directory as the webpage, otherwise the path has to be adjusted <script src="be_slide.js" type="text/javascript"><!--mce:0--></script> <script type="text/javascript"><!--mce:1--></script> The single steps: <script type="text/javascript"><!--mce:2--></script> //The last line closes the SCRIPT-Tag. In the BODY-section of the page we this time create - I bet you never thought of that - two DIV-containers to hold the slideshows. Again, essential is their IDENTITY, in this case we above used "slideshow1" (id="slideshow1") and "slideshow2" (id="slideshow2"). Style and position the containers as you want. Again, we use static images as fallback for visitor without JavaScript.
<div id="slideshow1" style="margin:25px;"> <img src="pics/pic01a.jpg" border="0" style="width: 400px; height: 300px;" /></div> <div id="slideshow2" style="margin:25px;"> <img src="pics/pic02a.jpg" border="0" style="width: 400px; height: 300px;" /></div> That´s it for the webpage. be_slide.js - the scriptfileIn the downloaded JavaScript-file "be_slide.js" we now should set the DEFAULT-values (the are described in sample 01). var be_0= new be_slideshow(); and add two slashes at the begin of the line, the start of a one-line comment: //var be_0= new be_slideshow();
Having done this, the DEFAULT-call is disabled and the calls in the HEAD-section of our webpage may do their job.
That´s it, have fun with the script. |
| Last Updated on Thursday, 26 November 2009 18:49 |
Ich möchte gerne das das Startbild, länger angezeigt wird, als die anderen Bilder. Kann man das realisieren?
Hallo Olaf!
Realisieren kann man das natürlich, man müsste das Script halt entsprechend umbauen.
Wenn die Slideshow automatisch durchläuft (also ohne Buttons), dann kannst Du aber auch einfach das Startbild 2x in den Array einfügen, das hat den selben Effekt.
Gruß
Andreas
Hallo,
Super skript.
Ich habe folgendes damit versucht: die animation wird per onmouseover (über das Bild/div) gestartet und per onmouseout gestoppt (letzteres ruft die stop-funktion auf), was auch funktioniert, die animation bleibt beim aktuellen bild stehen.
Jetzt wollte ich noch erreichen, dass beim onmouseout wieder das erste Bild angezeigt wird. Dabei stosse ich an meine grenzen. Hättest Du einen Tipp?
Danke!
Hallo Michael!
Halte mich bitte nicht für ungefällig, aber um Dir detailliert beschreiben zu können, was wie umzubauen/ergänzen wäre, müsste ich in Wirklichkeit den Patch zuerst selbst scripten - und ihn dann beschreiben. Und bei einer Funktion, die wohl nie Bestandteil des Scripts werden wird, weil nur ein verschwindend kleiner Teil der Benutzer dafür Verwendung hat, geht das über den Rahmen an Support, den ich hier anbieten kann ein wenig hinaus. Details sind also etwas schwierig.
Wenn Du Dich selbst daran machst, das Script umzubauen und dabei auf Probleme stösst, dann schaue ich mir gerne den Quelltext an und helfe wenn ich kann.
Wenn Du möchtest, dass ich Dir das Script entsprechend fix und fertig umbaue, dann lade ich Dich ein, mir eine Email zu schicken (Menüpunkt Kontakt oben auf der Seite) und mir zu sagen, was Dir die Sache wert ist.
Gruß
Andreas
Hallo Andreas,
soweit ist mir das klar, ich habe aber die Struktur des Skriptes noch nicht ganz verstanden und wäre aus Zeitgründen für einen Tipp dankbar, das soll, falls erforderlich, auch nicht umsonst geschehen.
Michael
Hallo Michael!
Um das zu erreichen würde ich im Script be_slide.js eine zusätzliche Funktion einführen, die genau das tut was ich möchte, nämlich die Slideshow nicht nur zu stoppen sondern auch alles auf Anfang zurückzusetzen.
Gruß
Andreas
Hallo Andreas,
erstmal: Vielen Dank für das Script und die ausführliche Erklärung.
Ich habe allerdings noch etwas, was mir noch unklar ist. Du schreibst in deiner Erklärung, dass die DIV-Container in den Body-Bereich der Seite integriert werden müssen.
Mein Problem: Ich habe bei der Webseite, die ich verwalte eine Header-Datei, damit ich die internen Links, etc. schnell bearbeiten kann. Darin befindet sich auch der Body-Bereich.
Meine Frage ist nun, wie ich das genau anstelle mit den DIV-Containern. Ich möchte auf mehreren Seiten zum Teil mehrere Slideshows einrichten. Reicht es, wenn ich die IDENTITY durchnummeriere?
Liebe Grüsse
Sam
Hallo Sam!
Ich gebe ehrlich zu, dass ich auf Basis Deiner Erklärung nicht genau weiss, wie Deine Seite aufgebaut ist. Aber vielleicht kann ich doch ein wenig helfen.
Zu Deiner Frage, im Prinzip kann der DIV-Container auf jeder Einzelseite Deiner Webseite die selbe Identity haben. Wesentlich dafür, was wo angezeigt wird, ist der Aufruf des Scripts im HEAD der Einzelseite. Wie Du das in Deiner "header"-Datei regelst, dass auf der jeweiligen Einzelseite der richtige Aufruf landet, das kann ich nicht sagen, da ich nicht weiss, welche Sprache verwendet wird.
Gruß
Andreas
Ich habe das Script eingefügt usw. aber es will nicht funktionieren.
Was ich vorhatte: Ich habe 3 Ordner mit verschiedenen Bildern, per php, wollte ich dir Ordner auslesen lassen und sie dann in den Array speichern, nur i.wie funktioniert das ganze nicht so...
Hier mal mein Code: [entfernt]
Aber leider, Slidet da nichts :(
Ich danke schonmal für die Hilfe
lg Patrick
Hier mal nich die Ausgabe im Quelltext:
var pics1=new Array ('images/banner/a_oben/disco.jpg', 'images/banner/a_oben/morning.jpg', );
Hallo Patrick!
Ich habe den Code aus Deinem Beispiel entfernt, weil er mit dieser Kommentarkomponente nicht vernünftig bearbeitbar/darstellbar ist. Gelassen habe ich die relevante Zeile des erzeugten Quelltextes. Das Problem ist relativ simpel:
- Deine PHP-Schleife erzeugt nach dem letzten Bild auch einen Beistrich.
- Damit ist der JavaScript Array fehlerhaft.
- Damit kann die Slideshow nicht starten
Also, schreib die PHP-Funktion so um, dass nach dem letzten Bild kein Beistrich mehr gesetzt wird und es sollte klappen.
Gruß
Andreas
Hallo, danke für diesen Tollen skript.
Ich hätte aber eine kleine Frage, was muss ich machen, damit die Bilder einen Timestamp bekommen, so dass ich eine Andlosschleife mit dynamische Bildern machen kann?
Ich verwende diesen skript um 4 verschiedene webcams in eine Seite darzustellen. Die bilder laufen in eine Schleife. Also die heißen immer bild1.jpg-bild10.jpg. Wenn ich eine ?Timestamp am ende einfüge, werden die bilder immer neu runtergeladen, wenn nicht, werden sie aus dem cache geladen. Es gibt zwar html tags, die das unterbinden sollen, funktioniert aber nicht bei jeder browser.
Danke nochmal für diesen tolean Skript.
Hallo Ismail!
Um das zu realisieren müsstest DU entweder das Script umschreiben (würde ich eher nicht machen) oder auf der Seite den Array, der die Bilder enthält dynamisch generieren. In diese Richtung würde ich mich online mal umsehen.
In der einfachsten Form wäre das dann ein Konstrukt in der Art von:
var mytime = Math.round(((new Date()).getTime()-Date.UTC(1970,0,1))/1000);
var mypic1= 'pics/pic01.jpg?t='+mytime;
var mypic2= 'pics/pic02.jpg?t='+mytime;
... und so weiter
var pics=new Array (mypic1, mypic2, mypic3, ... und so weiter);
Alles ungetestet!
Gruß
Andreas
Hallo!
ich war Ewigkeiten auf der Suche nach so einem Script. Sensationell! Vielen Dank dafür, dass du so etwas online stellst. Viele scripte verwenden eine MySQL-DB im Hintergrund, dass will ich nicht. Zumindest noch nicht, da kommt dein Script wie gerufen!
Eine Frage/einen Wunsch hätte ich aber:
ist es möglich anstatt der Bedienelemente die Slideshow-Bilder in Form einer Minigalerie anzeigen zu lassen?
So das der Besucher per Click auf das Bild in der Minigalerie dieses angezeigt bekommt?
Die Minigalerie vielleicht noch mit Pfeil nach links und pfeil nach rechts um zu scrollen sofern die Slideshow mehr Bilder hat als in der Minigalerie unter dem Bild angezeigt werden kann.
Das ist noch etwas was mir wirklich abgeht, eventuell hast du ja mal zu viel Zeit :)
Grüße,
Micha
Hallo Micha!
Das Script wird sich schon noch weiterentwickeln, aber die bislang reine Slideshow in eine Galerie mit Slideshowfunktion umzubauen habe ich nicht vor. Wenn Du Dich aber mal bei hotscripts.com oder dem Scriptarchiv Deines Vertrauens umsiehst, es gibt durchaus auch solche Scripts.
Gruß
Andreas
Ehrlich gesagt gar nicht, denn dafür ist die Slideshow nicht gedacht. Weder verzerrt sie Bilder (weil das in der Regel witzlos und nicht gewünscht ist) noch werden Bilder vergrößert (weil das nahezu immer qualitativ schlechte Resultate bringt).
Wenn Du Bilder mit exakt identen Abmessungen darstellen möchtest, dann ist es immer noch am einfachsten und effizientesten Bilder mit identen Abmessungen zu verwenden.
Gruß
Andreas
Danke für dieses tolle Script! Einfach toll, dass Du das zur Verfügung stellst!
Ich möchte fragen, wie es mir möglich ist, mehrere Bilder, unabhängig von Ihrer aktuellen Größe nur mit einem exakten Format z.b. 360x240px (quer bzw. auch hoch) auszugeben? Wie sollte das Slideshow-Skript dann aussehen? und wie schaffe ich es, das jedes Bild dann entsprechend zentriert ist?
Danke für Deine Hilfe!
Liebe Grüße aus Wien
Markus
Either scale down the used image files or decrease the value set for the steps within the fading. Or do both. These two values are the counting criteria when it comes to CPU load, which differs from browser to browser.
Best regards
Andreas
I used the script to place 4 seperate slide shows on a page and it works great in Firefox and even IE7 but when I run it using IE8 the image transitions slow to a crawl and my cpu usage jumps up (and stays) at 98% until I move from the page. Any Ideas on what might be causing the problem?
Thanks,
Dennis