Die width- und height-Angaben können nach belieben angepasst werden. Sie geben die Größe des Slideshow-Fensters an. (In Pixeln: px oder Prozent: %) Die Border-Angabe gibt die Art des Rahmens an. (Beispiele) Die Klasse slide_pic sorgt dafür, dass das Bild an den Bildrahmen angepasst wird. Die zwei Zeilen mit "expression" sind für den Internet Explorer, da dieser nicht mit "max-width" und "max-height" zurechtkommt.
Das folgende JavaScript auch zwischen den Head-Tags einfügen:
<script language="javascript" type="text/javascript">
// Slideshow
var standard_pic = new Image();
// Zeit für Bilderwechsel in Millisekunden
var Zeit = 3000;
// Bild, das beim Drücken des Stop-Buttons angezeigt wird.
standard_pic.src = 'http://www.bilder-hochladen.net/files/585t-9.gif';
var i = 0;
function zurueck(me) {
if (i > 0) {
i = i - 1;
me.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('div')[0].getElementsByTagName('img')[0].setAttribute("src", bild_[i].src);
}
else if (i == 0) {
i = nr;
me.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('div')[0].getElementsByTagName('img')[0].setAttribute("src", bild_[i].src);
}
}
function play(me) {
if (i > nr)
i = 0;
me.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('div')[0].getElementsByTagName('img')[0].setAttribute("src", bild_[i].src);
i = i + 1;
time = setTimeout(function(){play(me);}, Zeit);
}
function pause() {
window.clearTimeout(time);
}
function hold_on(me) {
i = 0;
me.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('div')[0].getElementsByTagName('img')[0].setAttribute("src", standard_pic.src);
window.clearTimeout(time);
}
function vor(me) {
if (i != nr) {
i = i + 1;
me.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('div')[0].getElementsByTagName('img')[0].setAttribute("src", bild_[i].src);
}
else if (i == nr) {
i = 0;
me.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('div')[0].getElementsByTagName('img')[0].setAttribute("src", bild_[i].src);
}
}
</script>
In diesem Skript kann ganz am Anfang die Zeit für einen Bild-Wechsel angegeben werden. Die Angabe erfolgt in Millisekunden. (1s = 1000ms) Außerdem kann noch ein selbts gewähltes Bild angegeben werden, dass beim Drücken des Stop-Buttons angezeigt wird.
</div><noscript><br /><b>Bitte aktiviere JavaScript, damit die Slideshow funktioniert!</b></noscript></center>
Ist JavaScript deaktiviert, bleibt das Anfangs-Bild stehen. Die Buttons haben nun keine Wirkung mehr. Es erscheint zudem eine Meldung, dass JavaScript aktiviert werden sollte. Soll keine Meldung angezeigt werden, einfach den NoScript-Teil entfernen.
Symbol-Bar anpassen: Damit jeder die Slideshow benutzen kann, kommt noch folgender Code in die Symbol-Bar:
(Es sollte alles in einer Zeile stehen! Höchstens vor "controls" darf ein Zeilenumbruch stehen.)
[slide_nr]Bildanzahl[/slide_nr]
Hier muss angegeben werden, wie viele Bilder insgesamt in der Slideshow vorhanden sind.
[bild_1_src]BildUrl1[/bild_src]
Die Zahl gibt die Bild-Nummer an und danach steht die Bild-Adresse. Es können beliebig viele Bilder eingefügt werden, nur die Zahl muss immer wieder im eins erhöht werden. Und nicht vergessen: Die Angabe der Bildanzahl muss übereinstimmen!
[zurueck][play][pause][stop][vor]
Fügt die Buttons ein. Die Buttons können nach belieben verwendet oder weggelassen werden.
florian-zier
hat folgende Bilder an diesen Beitrag angehängt
ich habe das nach ihrer Anleitung eingebaut,sieht genauso aus, wie auf ihrer Seite,aber irgentwie werde ich mit der Bedienungsanleitung mit den Bildereinbau nicht schlau. Habe es auch auf ihrer Seite versucht,will aber nicht funktionieren. Die Bilder werden einfach nicht angezeigt. Würden sie mir eine genauere Anleitung geben, am besten mit einen Beispiel mit Bild Url, das wäre sehr hilfreich. Für ihre Antwort bedanke ich mich schon in Voraus.
Tut mir leid, ich wollte das Skript wieder einbauen, habe dann aber gemerkt, dass es nicht ging. In der Anleitung sind noch kleine Fehler, ich glaube, dass ich sie aus versehen eingabaut habe, da das Skript schon einmal funktioniert hat.
Ich muss nun erst nochmal versuchen, das Skript zum Laufen zu bringen, dann werde ich die Anleitung auch aktualisieren. Aber man hat ja nicht immer Zeit...
Ich werde mich dann in nächster Zeit mal darum kümmern und mitteilen, wenn alles funktioniert. Zumindest sollte ich noch eine normale HTML-Datei mit einem Skript-Backup besitzen. Im Moment kann ich allerdings nicht nachschauen, da ich jetzt nicht zu Hause bin.
vielen Dank für die Antwort. Also,das,was sie bis jetzt schon über die Slideshow auf die Beine gestellt haben,ist echt beeindruckend. Bin auf die Fortsetzung gespannt.
Das Skript sollte nun wieder funktionieren. Seit neuestem müsste sogar der IE die Bilder auf die Maximal-Größe der Anzeigebox verkleinern. (Es existiert noch ein kleiner Bug im IE, wenn das Bilder-Verkleinerungsskript aktiviert ist.)
Das Problem waren vor allem die Variablen. Irgendwie müssen die damals beim Umsetzen für's Forum durcheinandergebracht worden sein. Schließlich musste ich ja auch ein vollständiges Skript in viele kleine Foren-Codes umbauen. Da ist es wohl passiert.
Falls doch noch etwas nicht funktionieren sollte, bitte eine PM an mich! Am besten mit einer genauen Problem-Beschreibung und möglicher Fehler-Ursache.
Achtung: Fast die komplette Anleitung (CSS, Skript, Foren-Codes...) wurde überarbeitet. Am einfachsten ist es also, alles nochmal neu einzugeben.
Hallo Florian, hab das Script nach deiner Beschreibung hier in Template obere Leiste eingebaut und geht nicht. Hier im Forum geht es. Hier mal meine Obere Leiste mit deinen Script :
In Antwort auf:{{img_server.start}}http://img.homepagemodules.de/{{img_server.end}} {{now1@dateformat.start}}{[time_minute_one]}{{now1@dateformat.end}} {{now@dateformat.start}}{[time_minute_more]}{{now@dateformat.end}} {{today@dateformat.start}}{[time_today]}{{today@dateformat.end}} {{yesterday@dateformat.start}}{[time_yesterday]}{{yesterday@dateformat.end}} {{norm@dateformat.start}}{[time_other]}{{norm@dateformat.end}} {{numberformat.start}}{[number_format]}{{numberformat.end}} <HTML> {{meta_refresh}} <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Language" content="{[meta_language]}"> <META NAME="keywords" CONTENT="{{hpmtext}}"> <META NAME="description" CONTENT="{{hpmtitle}}"> <META NAME="robots" CONTENT="{{meta_robots_index}}"> <link rel="stylesheet" type="text/css" href="{{link_css}}"> <link rel="alternate" type="application/rss+xml" title="{{hpmtitle}}" href="feed/all.rss"> <TITLE>{{html_title}}</TITLE> <style type="text/css"> /* Slideshow */ .slide_box { display:table-cell; width:300px; max-width:300px; height:305px; max-height:305px; border:groove; vertical-align:middle; } .slide_pic { max-width:100%; max-height:100%; width:expression(document.getElementsByClassName("slide_box").width > 300 ? "300px": "auto"); height:expression(document.getElementsByClassName("slide_box").width > 305 ? "305px": "auto"); } </style> <script language="javascript" type="text/javascript"> // Slideshow var standard_pic = new Image(); // Zeit für Bilderwechsel in Millisekunden var Zeit = 3000; // Bild, das beim Drücken des Stop-Buttons angezeigt wird. standard_pic.src = 'http://www.bilder-hochladen.net/files/585t-9.gif'; var i = 0; function zurueck(me) { if (i > 0) { i = i - 1; me.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('div')[0].getElementsByTagName('img')[0].setAttribute("src", bild_[i].src); } else if (i == 0) { i = nr; me.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('div')[0].getElementsByTagName('img')[0].setAttribute("src", bild_[i].src); } } function play(me) { if (i > nr) i = 0; me.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('div')[0].getElementsByTagName('img')[0].setAttribute("src", bild_[i].src); i = i + 1; time = setTimeout(function(){play(me);}, Zeit); } function pause() { window.clearTimeout(time); } function hold_on(me) { i = 0; me.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('div')[0].getElementsByTagName('img')[0].setAttribute("src", standard_pic.src); window.clearTimeout(time); } function vor(me) { if (i != nr) { i = i + 1; me.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('div')[0].getElementsByTagName('img')[0].setAttribute("src", bild_[i].src); } else if (i == nr) { i = 0; me.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('div')[0].getElementsByTagName('img')[0].setAttribute("src", bild_[i].src); } } </script> </HEAD> <body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0">
Hallo Emanuel, ich habe ein neues Template erstellt und den gesamten Inhalt in die obere Leiste hineinkopiert. Bei mir hat es wunderbar funktioniert, sowohl im Firefox, als auch im IE (Beta 8)! An sich ist das Skript und der Style auch an der richtigen Stelle, jedoch ist mir aufgefallen, dass das erste Head-Tag fehlt.
Evtl. liegt es aber auch an der Verzögerung durch JavaScript. Wenn ich z.B. zweimal schnell hintereinander auf einen Button (vor/zurück...) klicke, dann wechselt das Bild nicht sofort zweimal, erst wieder bei einem Klick nach einer kurzen Pause. Ich vermute, das wird dadurch hervorgerufen, weil JavaScript relativ langsam und träge ist und immer wieder auf's neue vom Browser verarbeitet wird.
Als letztes könnte ich mir noch vorstellen, dass die Foren-Codes nicht richtig eingegeben sind. Es sollte kein Zeilenumbruch zwischen den einzelnen Foren-Codes der Slideshow erfolgen!
Zusätzlich sollte man eine Slideshow stoppen, wenn man auf der gleichen Seite eine zweite ablaufen lassen will. So wird vermieden, dass sie sich evtl. gegenseitig beeinflussen. Ansonsten können beliebig viele Beiträge eine Slideshow enthalten, sogar ein Beitrag könnte aus mehreren Slideshows bestehen.
hab zwar jetzt das <HEAD> mit eingefügt, will aber trotzdem bei mir nicht funktionieren. Schade,ist aber eine prima Sache hier in deinen Forum. Trotzdem Danke für deine Hilfe und diese Idee.
Emanuel, wäre gut, wenn du dann mal einen Beispiel-Link posten könntest, der zu einem Beitrag mit Slideshow führt. Und dazu noch der Inhalt des Beitrages, der in der Ersteller-/Edit-Ansicht angezeigt wird. (Wegen Forencodes).
Tipp: Im Profil kann jeder zusätzlich seine Board-Nummer eintragen.
Es war wohl noch etwas falsch im Skript. Bei Klick auf die Buttons entstehen Errors. Eigentlich müsste auch
[bild_i].src
so heißen:
[bild_i].src
(eckige Klammer um das "i")
Keine Ahnung, warum es falsch da stand. Ich mache Backups von den wichtigsten Anleitungen, und da war alles richtig.
Es sollte also genügen, wenn das alte Skript durch das richtige neue ersetzt wird.
@Wolfgang:
Zitat von WolfgangDa einige Umsetzungen nicht in sich abgeschlossen sind, wir z.B. nach
[slide_nr]
in "Bearbeiten der vorhandenen Forumcodes" nichts mehr angezeigt. Gibt es hier eine Lösung?
Tatsächlich! Bisher habe ich dieses Problem nie bemerkt, da mir Firefox den Rest auch anzeigt, wenngleich auch die Eingabezeilen kürzer sind. Eine Lösung dafür habe ich leider nicht. Deshalb fände ich es besser, wenn jeder Admin selbst entscheiden könnte, welchen Foren-Code er als Vorschau anzeigen möchte. Aber HPM lässt sich da wohl noch etwas Zeit...
vielen Dank für deine Mühe und auch für die Bereitstellung deiner Idee. Hab jetzt alles neu eingegeben und es funktioniert klasse 1a+. Danke auch für deine Mühe in meinen Forum. Hat mich sehr gefreut.
Schön, dass jetzt alles funktioniert. Sorry für den nochmaligen Post. Aber anstatt der Vorschau wird der Beitrag sofort abgeschickt. Ich wollte es nur nochmal testen, weil ich zuerst nur ein Fahrrad angezeigt bekam. ()
Hallo Florian, sorry,war mein Fehler. Hab die Bildurl zweimal hintereinander angewendet. Und was besseres,als das Fahrad,war auf die schnelle nicht möglich Danke nochmal
Im Moment scheint das SlideShow-Skript einen kleinen, aber behebbaren Fehler im Admin-Menü zu erzeugen. Kein Benutzer des Forums wird ihn zu sehen bekommen, nur der Admin hat bei der Bearbeitung der Foren-Codes zukünftig kleine Schwierigkeiten!
Florians Forum
»
Webmaster
»
Xobor (Homepagemodules & Dynamicboard)
»
Funktionen & Template
»
Automatische Slideshow mit Navigationsbuttons
20.01.2008 16:01 (zuletzt bearbeitet: 15.06.2008 17:27)
http://www.florian-zier.de
Thema drucken
Antworten
Emanuel,
.
)
