Funktionen & Template » Automatische Slideshow mit Navigationsbuttons

Florians Forum » Webmaster » Xobor (Homepagemodules & Dynamicboard) » Funktionen & Template » Automatische Slideshow mit Navigationsbuttons

Bilder ausblenden

Spoiler sind ausgeblendet (einblenden)

Seite wiederherstellen

Jetzt drucken

#1 Automatische Slideshow mit Navigationsbuttons von florian-zier 20.01.2008 16:01

Slideshow für das Forum mit Navigations-Buttons. (Für die eigene Homepage)

Die Änderungen erfolgen im Template Element "Obere Leiste":

Diesen Style zwischen den Head-Tags einfügen:

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:

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.

Nun sind die Foren-Codes an der Reihe:

[slide_nr]

ersetzen mit:

<center><span style="display:table;"><div align="center" class="slide_box"><img class="slide_pic" name="slide" src="http://www.bilder-hochladen.net/files/585t-9.gif" alt="Slideshow" /><script type="text/javascript">var Anzahl =

Die Url gibt das Bild an, dass als erstes angezeigt wird, wenn die Slideshow noch nicht gestartet wurde.

[/slide_nr]

ersetzen mit:

;var bild_ = new Array();for (j=0; j < Anzahl; j++) {bild_[j] = new Image();}

[bild_

ersetzen mit:

bild_[

_src]

ersetzen mit:

-1].src = "

[/bild_src]

ersetzen mit:

[controls]

ersetzen mit:

var nr = bild_.length-1;</script></div></span><div>

[zurueck]

ersetzen mit:

[play]

ersetzen mit:

[pause]

ersetzen mit:

[stop]

ersetzen mit:

[vor]

ersetzen mit:

<input type="button" name="vor" value=">" onclick="vor(this);" />

[/slide]

ersetzen mit:

</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:

Eine Slideshow kann nun folgendermaßen eingebaut werden:

[slide_nr]Bildanzahl[/slide_nr][bild_1_src]Bild-Url1[/bild_src][bild_2_src]Bild-Url2[/bild_src][controls][zurueck][play][pause][stop][vor][/slide]

(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.

#2 RE: Automatische Slideshow mit Navigationsbuttons von Emanuel 05.06.2008 20:31

Hallo Florian Zier,

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.

L.G. Emanuel

#3 RE: Automatische Slideshow mit Navigationsbuttons von florian-zier 06.06.2008 16:12

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.

#4 RE: Automatische Slideshow mit Navigationsbuttons von Emanuel 06.06.2008 21:39

Hallo Florian,

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.

L.G. Emanuel

#5 RE: Automatische Slideshow mit Navigationsbuttons von florian-zier 08.06.2008 13:40

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.

#6 RE: Automatische Slideshow mit Navigationsbuttons von Emanuel 11.06.2008 00:53

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">

{{user_registered==false.start}}
<div class="ntop" width="100%" style="margin:0px; padding:4px;text-align:left; vertical-align:top; border-bottom:1px solid;margin-bottom:4px; font-size:12px">
<table border=0 width=100% cellpadding=0 cellspacing=0><tr><td><img src="http://img.homepagemodules.de/information.gif" style="vertical-align:bottom"> <a href="{{link_signup}}" style="text-decoration:none; ">{[header_infoline_signup]}</a></td>
<td align=right>{{impressum==true.start}}<a href="{{link_faq}}">{[header_infoline_impressum]}</a>{{impressum==true.end}} </td></tr></table>
</div>
{{user_registered==false.end}}

{{html_header}}

<table cellpadding=0 cellspacing=0 border=0 width="{{table_width}}" align="center">
<tr>
<td colspan="2" class="thin" valign="top">
<table cellpadding=3 cellspacing=1 border=0 width=100%>
<tr>
<td class="tare">

<center>{{user_newmail==true.start}}

<p><a href="{{link_mails}}"><img src="{{global_img_new_pm}}" height="20" width="40"border=0><font size="3"> Hallo, {{user_name}}! Du hast Post bekommen,hier klicken!</font></a>

<embed src="http://www.mailhilfe.de/Download/emailp.wav" autostart="true" loop="1" hidden="true" height="0" width="0" /></p>

{{user_newmail==true.end}}</center>

{{user_newgbook==true.start}}
<a href="{{link_myprofile}}"><img src="{{global_img_new_gbook}}" border=0></a>
{{user_newgbook==true.end}}
{{user_admin==true.start}}
<a href="{{link_admin}}" class="tarea"><span class="tarea">{[header_goto_admin]}</span></a> |
{{user_admin==true.end}}
<a href="{{link_index}}"><span class="tarea">{[header_goto_index]}</span></a>
| <a href="{{link_search}}"><span class="tarea">{[header_goto_search]}</span></a>

{{user_registered==true.start}}
| <a href="{{link_config}}"><span class="tarea">{[header_goto_config]}</span></a>
| <a href="{{link_mails}}"><span class="tarea">{[header_goto_pm]}</span></a>
| <a href="{{link_logout}}"><span class="tarea">{[header_goto_logout]}</span></a>
{{user_registered==true.else}}
| <a href="{{link_signup}}"><span class="tarea">{[header_goto_signup]}</span></a>
| <a href="{{link_login}}"><span class="tarea">{[header_goto_login]}</span></a>
{{user_registered==true.end}}

{{global_on_useronline_link==true.start}}
| <a href="{{link_online}}"><span class="tarea">{[header_goto_online]}</span></a>
{{global_on_useronline_link==true.end}}
{{global_on_userlist_link==true.start}}
| <a href="{{link_member}}"><span class="tarea">{[header_goto_members]}</span></a>
{{global_on_userlist_link==true.end}}
{{geomap==true.start}}
| <a href="{{geomap_link}}"><span class="tarea">{[header_goto_map]}</span></a>
{{geomap==true.end}}
{{calendar==true.start}}
| <a href="{{calendar_link}}"><span class="tarea">{[header_goto_calendar]}</span></a>
{{calendar==true.end}}
{{global_on_extra_link==true.start}}
| <a href="{{global_on_extra_link}}"><span class="tarea">{{global_on_extra_linktext}}</span></a>
{{global_on_extra_link==true.end}}
| <a href="{{link_faq}}"><span class="tarea">{[header_goto_faq]}</span></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="thin" align="left" valign="top" nowrap>
<table cellpadding=0 cellspacing=1 width=100% height=100% border=0>
<tr>
<td class="thin">{{html_adframe}}
</td>
</tr>
</table>
</td>
<td class="thin" valign="top" nowrap>
<table cellpadding=0 cellspacing=0 width=100% height=100% border=0>
<tr>
<td class="thin" align="right" nowrap>
<div class="thin">
{{user_registered==true.start}}
{[header_welcome_user]}
{{user_registered==true.else}}
{[header_welcome_signup]}
{{user_registered==true.end}}
</div>
</td>
</tr>
<tr>
<td valign="bottom" class="tsmt" align="right" nowrap>
{{boardstats.start}}<div class="tsmt">{[header_home_stats]}<br><a href="{{link_lastmsgs}}"><span class="tarea">{[header_goto_newest]}</span></a></div>{{boardstats.end}}
{{forumstats.start}}<div class="tsmt">{[header_forum_stats]}<br>{[header_forum_rights]}</div>{{forumstats.end}}
{{topicstats.start}}<div class="tsmt">{[header_thread_stats]}<br><a href="{{topic_abolink}}"><span class="tarea">{[thread_goto_abo]}</span></a></div>{{topicstats.end}}
{{position==board.boardstats}}
{{position==forum.forumstats}}
{{position==topic.topicstats}}
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" class="tbhi" valign="top">

Vieleicht habe ich da einen Fehler gemacht?

L.G. Emanuel

#7 RE: Automatische Slideshow mit Navigationsbuttons von florian-zier 11.06.2008 18:22

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.

also:

{{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>

<HEAD>

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!

Aufbau:

[slide_nr]GESAMTANZAHL[/slide_nr][bild_BILDNR_src]BILDURL1[/bild_src][bild_BILDNR_src]BILDURL2[/bild_src][controls][zurueck][play][pause][stop][vor][/slide]

[zurueck][play][pause][stop][vor]

können beliebig vertauscht oder weggelassen werden.

Beispiele:
Allgemein:

[slide_nr]2[/slide_nr][bild_1_src]http://pfad.de/bilder/bild1.gif[/bild_src][bild_2_src]http://pfad.net/fotos/bild2.jpg[/bild_src][controls][zurueck][play][pause][stop][vor][/slide]

Funktionierend:

[slide_nr]2[/slide_nr][bild_1_src]http://florianzier.fl.ohost.de/bilder/logo.gif[/bild_src][bild_2_src]http://www.bilder-hochladen.net/files/78q-5m.gif[/bild_src][controls][zurueck][play][pause][stop][vor][/slide]

Wenn dieses normalerweise funktionierende Beispiel nicht laufen sollte, muss es wohl an etwas anderem liegen...

Natürlich kann der Foren-Code um mehr als zwei Bilder erweitert werden:

...ng.gif[/bild_src][bild_3_src]Bild3[/bild_src][bild_4_src]Bild4[/bild_src]...

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.

#8 RE: Automatische Slideshow mit Navigationsbuttons von Emanuel 12.06.2008 00:05

Hallo Florian,

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.

L.G. Emanuel

#9 RE: Automatische Slideshow mit Navigationsbuttons von florian-zier 12.06.2008 11:38

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.

#10 RE: Automatische Slideshow mit Navigationsbuttons von Emanuel 12.06.2008 11:53

Hallo Florian,

hab mich an deinen Tip gehalten.
Wenn du mein Forum anklickst,ist ganz oben ein Gästebuch.
Vieleicht ist das Hilfreich für dich.

L.G. Emanuel

#11 RE: Automatische Slideshow mit Navigationsbuttons von Wolfgang 15.06.2008 17:08

Hallo Florian,
mal wieder ein super Beitrag.

Ich verwende oft den IE.
Hier gibt es bei den Codeumsetzungen ein Problem.

Da 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?

Vielleicht gibt es eine Lösung nach einem neuen Update von "Homepagemodules.de".
Soweit ich gehört habe, soll es hier einige Verbesserungen geben.

Bis dann
Wolfgang

#12 RE: Automatische Slideshow mit Navigationsbuttons von florian-zier 15.06.2008 17:32

@Emanuel:

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 Wolfgang
Da 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...

#13 RE: Automatische Slideshow mit Navigationsbuttons von Emanuel 15.06.2008 18:25

Hallo Florian,

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.

L.G. Emanuel

#14 RE: Automatische Slideshow mit Navigationsbuttons von florian-zier 15.06.2008 18:50

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. ()

#15 RE: Automatische Slideshow mit Navigationsbuttons von Emanuel 15.06.2008 19:04

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

L.G. Emanuel

#16 RE: Automatische Slideshow mit Navigationsbuttons von florian-zier 17.07.2008 23:27

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!

Zum Problem-Lösungs-Thread...