| 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 type="text/javascript" src="be_slide.js"></script> <script type="text/javascript"> var pics1=new Array ('pics/pic01a.jpg', 'pics/pic01b.jpg', 'pics/pic01c.jpg'); var buttons1=new Array ('bwd.png', 'start.png', 'stop.png', 'fwd.png'); var be_0= new be_slideshow("0",pics1,"slideshow1",400,300,"#ccc",1,1,20,"n","n","y",buttons1); var pics2=new Array ('pics/pic02a.jpg', 'pics/pic02b.jpg', 'pics/pic02c.jpg'); var be_1= new be_slideshow("1",pics2,"slideshow2",400,300,"#ccc",1,1,20,"y","n","n"); </script>The single steps: <script type="text/javascript"> //this line opens a new SCRIPT-Tag var pics1=new Array ('pics/pic01a.jpg', 'pics/pic01b.jpg', 'pics/pic01c.jpg'); //In this array, set the pictures you want the 1. slideshow to display. //They are uploaded to a subdirectory "pics" in this sample var buttons1=new Array ('bwd.png', 'start.png', 'stop.png', 'fwd.png'); //As we want to show control-elements for the 1. slideshow, we add the //settings for them. We may choose between textlinks //and buttons. Into this array therefor we insert either the text //to be displayed or the path to the images to be used. //If the script finds either .jpg or .gif or .png as the //ending of your input, it will display the image automatically. //The sort order of the elements displayed and therefor within this //array is: BACK - START - STOP - FWD var be_0= new be_slideshow("0",pics1,"slideshow",400,300,"#ccc",1,1,20,"n","n","y",buttons1); //This line calls the first slideshow. //You find an extended description in sample 02 var pics2=new Array ('pics/pic02a.jpg', 'pics/pic02b.jpg', 'pics/pic02c.jpg'); //In this array, set the pictures you want the 2. slideshow to display. //Again, uploaded to a subdirectory "pics" in this sample var be_1= new be_slideshow("1",pics2,"slideshow2",400,300,"#ccc",1,1,20,"y","n","n"); //This line calls the second slideshow. //You find an extended description in sample 02 //The second slideshow does´nt make use of control-elements, therefor there //is no array for them. If we would want to show them, we could reuse the //buttons we set for the first slideshow by setting buttons1 as the value //of the 13. parameter. //New in this call are the name be_1 and the value of the first parameter "1". //We use them in ascending order. A third slideshow on this page would be //called with the variable be_2 and assign "2" to the first parameter. . . and so on. </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" style="width:400px;height:300px;" /> </div> <div id="slideshow2" style="margin:25px;"> <img src="pics/pic02a.jpg" 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).Essential - if we want to use the script-file with different slideshows - is to remove or better disable the DEFAULT-call of the function be_slideshow(). To do this we go to the last line in the scriptfile: 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 |


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
Du müsstest das Script dahingehend modifizieren, dass bei jedem Bildwechsel der aktuelle Stand in einen Cookie geschrieben wird und beim Laden der Seite jedesmal dieser Cookie - soweit vorhanden - ausgelesen und der aktuelle Stand berücksichtigt wird.
Gruß
Andreas
nun wäre es aber toll wenn die slideshow beim seitenwechseln nicht neu starten würde sondern weiter läuft. gitb es da eine möglichkeit und wie müsste ich da vorgehen?
Ich bin absolut kein Freund von jedweder Art von Light-/Grey-/Fat-/Black-/Fancy- oder sonstiger Box. Ich mag es, wenn die Bilder "im Rahmen" (und zwar im Rahmen meines Seitenlayouts) bleiben. Demzufolge kann ich damit leider nicht dienen.
Gruß
Andreas