| Javascript: Slideshow |
| Geschrieben von: Andreas Berger | ||||
| Samstag, den 19. April 2008 um 07:47 Uhr | ||||
bretteleben.de JavaScript Slideshow - Updated 20100412!Ein einfaches SlideshowScript, es startet wahlweise auf Klick oder beim Laden der Seite, der Übergang erfolgt mit einem Fading, das Script läuft NonStop. DarstellungDas Script stellt in einem DIV-Container die ausgewählten Bilder dar. Es wird wahlweise automatisch gestartet und/oder über optionale Kontrollelemente gesteuert. Beim Laden der Seite wird der Inhalt des ausgewählten DIV-Containers mit den Bildern der Slideshow überschrieben. Das bietet die Möglichkeit, ein Bild in diesem DIV-Container statisch einzubinden und damit einen Fallback für Besucher mit deaktiviertem Javascript anzubieten. Auch ein Hinweistext wie z.B. "Die Slideshow erfordert Javascript" ist vorstellbar. FunktionsweiseDie Funktionsweise des Scripts ist denkbar einfach. In einem umgebenden DIV-Container liegen alle Bilder übereinander. Das "Übereinander" wird dabei über die Angabe des z-index realisiert. Bei den Übergängen von einem Bild zum Anderen wird dann einfach - wie bei einem Stapel Spielkarten - immer das oberste Bild ausgeblendet und kommt ganz unter wieder in den Stapel. Mehr ist nicht dahinter. Einrichtung und Konfiguration:Die Einbindung in die Seite und die Verwendung der einzelnen konfigurierbaren Parameter sind auf drei Beispielseiten ausführlich erklärt: DemoBeispiel zweier Slideshows auf einer Seite (in einem Inline-Frame angezeigt):
KompatibilitätHinweis: im Internet Explorer werden kleinere Bilder nicht vertikal zentriert, in allen anderen getesteten Browsern schon.
|
| Datei | Zuletzt bearbeitet |
|---|---|
 bretteleben.de.slideshow.20100412.zip | 2010-04-12 |
Hallo!
Wenn ich das Skript einbinde, erscheint im IE immer ein weißer Strich. Egal wo ich den Skriptbefehl hinsetze, kommt es.
Im Firefox kommt der jedoch nicht. Wie bekomme ich diesen weißen Strich weg?
Hallo st11!
Anhandd der Beschreibung kannn ich nicht sagen, was da schief läuft, aber wenn Du einen Link zur Seite postest, dann schaue ich mir das gerne an.
Gruß
Andreas
Hi Andreas,
danke für dieses wunderbare Script.
Ich hätte gern für die Steuerelemente noch ein a:hover und ggf. sogar noch ein a:active. Da ich von JS leider kaum Ahnung habe, weiß ich aber nicht wie. Oder könnte man die Buttonfunktionen evtl. sogar mit html- bzw. CSS-Buttons ansteuern?
Danke vorab und viele Grüße
Uwe
Hallo Uwe!
Sorry für die späte Antwort! Was Deine Frage angeht, die Links für die Kontrollelemente werden im Script be_slide.js in den Zeilen 200 bis 204 definiert. Wenn Du dort den Links eine CSS Klasse hinzufügst, dann kannst Du mit dieser Klasse über das Stylesheet Deiner Seite veranstalten was auch immer Dir einfällt.
Gruß
Andreas
Hallo - tut mir ehrlich leid, falls das eh in den Erkärungen steht und ich es nur übersehen hab, aber ich find's nicht! - Grooooße Bitte um Hilfe:
Wo muss ich was einstellen, damit die slideshow nach einem Durchgang automatisch stoppt? Und: wenn ich zwei slideshows auf eine Seite einbinde, kann ich dann eine stoppen lassen und eine immer weitergehen lassen?
Freu mich auf Antwort!
Anna x
Hallo Anna!
Sorry für die späte Antwort. Um nach dem ersten Durchlauf zu stoppen öffne das JavaScript /plugins/content/plugin_besps/besps.js mit einem Texteditor.
In Zeile 149 ersetze: emax
durch: emax-1
In Zeile 160 ersetze: startim=1;
durch: startim=startim+1;
und nach Zeile 160 füge als neue Zeile ein:
stopit=1;
Was den Einsatz zweier Versionen des Scripts mit verschiedenem Verhalten angeht - dazu müsstest Du die Scripts selbst und wohl auch die Namen der Funktionen umebnennen. Ich habe das ehrlichgesagt noch nicht ausprobiert, aber mit ein wenig Geduld sollte man das hinbekommen.
Gruß
Andreas
Hi there,
Great script, works really well! One question, I've already got an onLoad in my body tag running another script. If I leave it in there the slideshow won't start. As soon as I take it out the slideshow works fine. Is there a way round this?
Many thanks,
Andrew
Hi Wolfgang!
Thanks for your suggestion!
I personally would go the other way: Instead of disabling the daisychain function of the slideshow, that allows to use the JavaScript onload-event without disturbing any other script, I would add this function to the other script too because a script that behaves this way will NOT force you to (ab)use the body-tag and will not cause these kind of troubles at all.
You are patching the script that behaves nicely instead of the one that creates the trouble :)
Best regards
Andreas
Hi Guys,
I had the same problem with this great script, and made the following workaround:
Put the creation of the slideshow in a function (at the end of the script:)
function start_slide(){var be_0= new be_slideshow();
return true;
}
Replace the daisychain() function
with
And set in the bodytag
Until now, this works for me (in Firefox)
All the Best,
Wolfgang
Hi Andrew!
The problem is, whilst the slideshow adds the needed functionality to the JavaScript onload-event without disturbing other scripts, the second script you are using just overwrites the event and causes the slideshow to fail.
The only way to solve this problem is to modify the other script.
Have a look at the script be_slide.js to see how it is done. The function daisychain (line 27) is used to add functionality to this event whilst taking care of other script, already using it. The functionality the slideshow needs is handed over to this event in line 211.
Best regards
Andreas
Hallo,
erstmal danke für dieses schöne Script. Bei Firefox funktioniert es bestens, beim I.E. sehe ich leider nur das Startbild. Auch habe ich einen Kommentar bekommen, dass es eine Fehlermeldung gibt:
Zitat: "bei einem Klick auf den Button "Bilder" bekomme ich "nur" das Logo vom SpatzenCafé mit einem Hinweis in der Fußleiste: Fehler auf der Seite. "
Hier meine Seite: http://tierheim-spatzencafe.de > Bilder
oder der direkte Link:
http://www.klaerchens-katzenhomepage.de/spatzencafe/spatzencafe_album.html
Was mag da verkehrt sein?
Mit freundlichen Grüßen,
H. Carlsson
Hallo Heike!
Tut mir leid, wenn das mißverständlich war, aber ich würde in jedem Fall versuchen im Meta-Tag "Content-Type" das Charset von "utf-8" auf "ISO-8859-1" zu ändern. Zielsetzung ist ja, dass das Script funktioniert und nicht, dass man den Fehler erklärt. :)
Gruß
Andreas
Hallo Andreas,
mit dem aktualisieren der Seite war ein prima Tip, ich hab das jetzt einfach mal dazu geschrieben und hoffe, dass die meisten jetzt die Diashow sehen können. Bin aber beruhigt, dass ich anscheinend keinen Fehler gemacht habe.
MfG,
Heike
Hallo Heike!
Die Fehlermeldung "Code eines freigegebenen Skripts kann nicht ausgeführt werden" ebgebnet mir zum ersten mal. Online findet man zwar einige Kommentare dazu, aber nichts wirklich hilfreiches. Witzigerweise läuft alles einwandfrei, wenn man einen Refreh der Seite macht. Ein Tip, der vielleicht einen versuch wert wäre ist der, im Meta-Tag "Content-Type" das Charset von "utf-8" auf "ISO-8859-1" zu ändern.
Gruß
Andreas
I have an w3c validation error stating
URI : http://www.sensalot.com/sensalot/plugins/content/plugin_besps/besps.css
18 .besps_caps div.bs_inside Parse Error opacity=60)
18 .besps_caps div.bs_inside Attribute opacity does not exist in CSS version 2.1 but does in : 0.6 0.6
Can you tell me how to fix this?
The line in questions states:
filter:alpha(opacity=60);opacity:0.60;
Thanx.
Arthur
Hi Arthur!
The validator complains about the setting "opacity". This value is valid CSS3 but not CSS2.1 (the version the validator validates against). Anyway, it is recognized by all modern browsers and in combination with the proprietary "filter:alpha(opacity=60);" that serves older versions of Internet Explorer does it's job fine.
Therefore I will not change it but rather wait for the validator to update to CSS3.
If you have to create a page that validates without any error or warning, I suggest to google for this error, there are hacks to trick the validator to work with this setting. From my point of view I totally agree with smarter people than I am when they say: The validator is a debugging tool, not a religion. :)
Best regards
Andreas
Hallo und guten Tag,
als absoluter Neuling in html, java usw. ist es mir sofort gelungen, die slideshow in meine erste website einzubauen.
soweit so gut, aber : die bilder füllen den kompletten bildschirm
gibt zur größe der einbebundenen bilder hinweise oder muß ich sonst irgendetwas ändern ???
bitte um infos
danke D.Claus
Hallo Dietmar!
Zu sagen gibe es eigentlich nur, was auch bei den Beispielen bei den Größenangaben steht:
//Hinweis: Die Bilder werden vom Script nicht skaliert!
Warum das so ist, ist einfach erklärt: Es macxht keinen Sinn Bilder größer hochzuladen, als sie angezeigt werden sollen. Sie werden dann vom Browser skaliert, was idR miese Resultate zeitigt (jedes Bildbearbeitungsprogramm am PC kann das besser); sie sind unnötig groß (Dateigröße) und laden deshalb langsamer.
Also: Offline die Bilder skalieren - und dann hochladen.
Gruß
Andreas
Hallo. Schöner Script. Leider bin ich nicht sehr fit in Javascript und muß deshalb um Hilfe flehen:
wie kann ich bei Mouseover der Controller ein- und ausblenden lassen?
Tja, so wünscht es sich aber mein Kunde. Ich selbst finde die Idee auch nicht so verkehrt. Kommt halt auf den Kontext an. Ich werde dann mal schauen ob ich selbst zurechtkomme oder einen Programmierer fragen. Zeit, in Archiven nach anderen Scripts zu suchen habe ich nicht mehr. Das ist schon der dritte, den ich teste und mühsam implementiere und der muß jetzt auch herhalten.
Hi Parvenu!
Es tut mir leid, aber ich mag Kontrollelemente, die sich erst zeigen wenn man mit der Maus herumfuchtelt nicht besonders, deshalb kann ich Dir nur anbieten, jemand Anderen zu finden, der das Script für Dich umschreibt (es ist GPL lizensiert - also kein Problem) oder im Scriptarchiv Deines Vertrauens (z.B.: hotscripts.com) ein anderes Script zufinden, das diese Funktionalität bietet.
Gruß
Andreas
hallo Andreas!
durchaus, der fehler tritt durch ein übergeordnetes div align="center" auf.
Ab IE8 funktionierst es aber Problemlos.
Seite ist http://www.beatpixx.de/index_test.html
Gruß,
Micha
Hallo Micha!
Versuch mal Folgendes:
Verlinke mit dem source-Attribut des Bildes, das Du statisch eingebunden hast, auf ein Bild, das wirklich existiert. Das muss das Problem nicht lösen, aber es würde zumindest schon mal erklären, warum der Internet Explorer den DIV-Container als leer (Bild gibt es nicht) und damit dimensionslos mittig auf der Seite zentriert.
Löst das alleine das Problem nicht, dann könntest Du versuchen, dem DIV-Container zusätzlich eine fixe Breite und das Attribut "text-align:left" zuzuweisen.
Gruß
Andreas
Hallo Andreas!
durchaus, ich verwendete mehrere div-Container und positioniere diese über ein übergeordnetes 'div align="center"'
Der Fehler tritt ab IE8 nicht mehr auf.
Firefox und Safari scheinen es ohne weiteres handlen zu können.
Grüße,
Micha