Florians Forum » Webmaster » Ideen für Skripte und sonstige Quellcodes » Slideshow in der Bildergalerie
Hallo Florian,
kann man das Script in der Bildergalerie so umschreiben, dass die Bilder auch automatisch wechseln,
so wie in dem Script Deiner Slideshow?
Ich kann mir einen Start/Stop-Button in der Reihe Optionen vorstellen (siehe "Angefügte Bilder")
Gut wäre es, wenn nach Akivierung der Button von Play auf Stop wechselt!
Die Pfeile für Vorwärts und Rückwärts könnten ohne weiteres erhalten bleiben.
<script type="text/javascript">
function show_background_pic(id,img) {
document.getElementById(id).style.backgroundImage='url('+ img+ ')';
document.getElementById(id).style.cursor='pointer';
setTimeout("hide_background_pic();",7500);
}
function hide_background_pic() {
document.getElementById('back').style.backgroundImage='url()';
document.getElementById('next').style.backgroundImage='url()';
}
</script>
Bis dann und besten Dank im Voraus 
Gruß
Wolfgang
Hallo Wolfgang,
ich denke dass ich nun etwas für dich habe. 
Ansehen kannst du es hier in meiner Galerie.
Dazu bedarf es einer minimalen Änderung am Template, die genaue Einbau-Position sollte egal sein:
2
<a name="slide_start" href="{{nextLink}}#play" onclick="slide_start_click();return false;"><img src="http://files.homepagemodules.de/b123484/a_2_6a8729da.png" border="0" /></a>
<a name="slide_stop" href="#stop" onclick="slide_stop_click();" style="display:none;"><img src="http://files.homepagemodules.de/b123484/a_3_5a57f803.png" border="0" /></a>
Natürlich kannst du die Linkgrafiken (oder Linktexte) beliebig anpassen und auch dementsprechend Styles ergänzen.
initSlideShow();
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function initSlideShow() {
if (window.location.hash == '#play') {
switchSlideButton();
}
window.setTimeout('continueSlideShow()', 10000);
}
function continueSlideShow() {
if (window.location.hash == '#play') {
playSlideShow();
}
}
function playSlideShow() {
//document.getElementById('next').onclick(); //back
window.location.href = document.getElementsByName('slide_start')[0].getAttribute('href'); //window.location.href = document.links.slide_start;
}
function switchSlideButton() {
var startButton = document.getElementsByName('slide_start')[0];
var stopButton = document.getElementsByName('slide_stop')[0];
if (startButton)
startButton.style.display = (startButton.style.display=='none')? '' : 'none';
if (stopButton)
stopButton.style.display = (stopButton.style.display=='none')? '' : 'none';
}
function slide_start_click() {
window.location.hash = '#play';
switchSlideButton();
window.setTimeout('continueSlideShow()', 5000);
}
function slide_stop_click() {
window.location.hash = '#stop';
switchSlideButton();
}
Du findest zweimal die gleiche Zeile nur mit einer unterschiedlichen Zahl vor:
window.setTimeout('continueSlideShow()', 10000);
In der Funktion initSlideShow() ist es die Zeit, die es nach einem Seitenwechsel dauert, bis zur nächsten gesprungen wird.
In der Funktion slide_start_click() ist es die Zeit, wie lange gewartet wird, wenn der Play-Button gedrückt wurde.
Ich empfehle dir, die erste Zeit etwas höher einzustellen.
Denn bis die Seite vollständig geladen ist (evtl. mit vielen anderen Skripten), hat man den Eindruck, dass sie viel zu schnell wieder gewechselt wird.
Ist sie jedoch schon die ganze Zeit offen und man drückt den Play-Button, kommt einem die gleiche Zeitspanne viel länger vor.
positiver Nebeneffekt des Skripts:
Bei deaktiviertem Javascript ermöglicht es der Play-Button, bei Klick darauf, trotzdem zum nächsten Bild zu wechseln.
Falls du noch zusätzliche Links brauchen solltest, mit denen du vor- und zurück- navigieren kannst, dann verwende einfach folgende:
2
<a href="javascript:document.getElementById('next').onclick();">vor</a>
<a href="javascript:document.getElementById('back').onclick();">zurück</a>
Ich hoffe, dass dies auch in deinem Template funktioniert.
Da die gleichen Template-Variablen aber auch dort vorhanden sein sollten, müsste es ansonsten template-unabhängig funktionieren.
Wichtig ist nur, das die Start- und Stop-Links ihren Namen und ihr Linkziel (inkl. onclick) beibehalten.
Falls es noch Probleme geben sollte, wird es min. eine Woche dauern bis ich deinen Beitrag lesen kann, da ich solange nicht Zuhause bin.
Aber ich denke, dass es schon funktionieren wird.
Viele Grüße und bis dann...
Hallo Florian,
super Lösung!
Leider funktioniert die Slideshow bei mir nicht im Internetexplorer. 
Läßt sich hier etwas machen?
Bis dann
Wolfgang
Hallo Wolfgang,
das Skript sollte nun wie gewünscht funktionieren.
Das Problem war, dass das aufgerufene Element im IE nicht existiert.
Es hat sich nur der JS-Code im Head verändert.
Die neue Version habe ich in meinen vorigen Eintrag hineineditiert...
Hallo Florian,
jetzt funktioniert es! Mal wieder echt Klasse!
Ich habe da trotzdem nochmal eine Frage.
Wenn im IE die Bilder wechseln, wird die Seite immer neu aufgebaut. Die Seite ist dann ständig in Bewegung.
Für die Betrachtung der Bilder ist das nicht gerade vorteihaft.
Kann man hier etwas machen?
Danke im Voraus
Wolfgang
Hallo Wolfgang,
ich habe nun eine weitere Version erstellt.
Das Skript im Head wurde leicht geändert:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function initSlideShow() {
if (window.location.hash == '#play') {
switchSlideButton();
}
window.setTimeout('continueSlideShow()', 10000);
}
function continueSlideShow() {
if (window.location.hash == '#play') {
playSlideShow();
}
}
function playSlideShow() {
//window.location.href = document.links.slide_start;
window.location.href = document.getElementsByName('slide_start')[0].getAttribute('href').replace('#viewport','')+'#play';
}
function switchSlideButton() {
var startButton = document.getElementsByName('slide_start')[0];
var stopButton = document.getElementsByName('slide_stop')[0];
if (startButton)
startButton.style.display = (startButton.style.display=='none')? '' : 'none';
if (stopButton)
stopButton.style.display = (stopButton.style.display=='none')? '' : 'none';
}
function slide_start_click() {
window.location.hash = '#play';
switchSlideButton();
window.setTimeout('continueSlideShow()', 5000);
}
function slide_stop_click() {
window.location.hash = '#stop';
switchSlideButton();
}
Die beiden Links für Start/Stop:
2
<a name="slide_start" href="{{nextLink}}" onclick="slide_start_click();return false;"><img src="http://files.homepagemodules.de/b123484/a_2_6a8729da.png" border="0" /></a>
<a name="slide_stop" href="#stop" onclick="slide_stop_click();" style="display:none;"><img src="http://files.homepagemodules.de/b123484/a_3_5a57f803.png" border="0" /></a>
Zuletzt noch der Anker, zu dem beim Seitenwechsel gescrollt wird:
<a name="play"> </a>
Füge diese Sprungmarke eben da ein, von wo ab die Seite angezeigt werden soll.
Z.B. nach dem neuen Anker, welche Xobor eingefügt hat, um das Hin- und Herspringen zu verhindern.
<a name="viewport" href='{{pic_owner_link}}' onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='none';" style="text-decoration: none;">{{pic_owner}}</a>
Wünsche dir viel Glück, dass in deinem Template auch schon alles so in etwa vorhanden ist.
Es könnte auch ohne den Teil für die Behebung des Sprung-Bugs funktionieren, probier es einfach mal.
Wenn nicht, falls du den Teil des Updates noch nicht eingespielt hast, versuche am besten durch Vergleichen die fehlenden Teile zu ergänzen.
Bei mir kommen drei Teile mit "viewport" vor, zwei fast ganz oben (Generieren der Vor-/Zurück-Links) und der oben genannte von Xobor beim Update ergänzte Anker.
Hallo Floian,
hat jetzt alles super geklappt.
Danke dafür.
PS:
Habe folgenden Anker eingesetzt
<a name="viewport"> </a>
Viele Grüße
Wolfgang
Hallo,
Die Funktion gefällt mir sehr und wollte es in meine neue Galerie einbauen.
Ich habe das JavaScript in Javascript - Standard, immer geladen eingebaut und damit ich im Body nicht noch eintragen muss das am ende gleich mit: window.addOnloadEvent(initSlideShow); gepackt.
Ich habe den Startbutton in Bildergalerie - Home eingebaut so das man von den Bildern gleich drauf klicken kann und dann zu den Orginalgrößen Bilder kommt (Sehe Bild)
Der Code sieht so aus:
<a title="Slideshow starten!" name="slide_start" href="{{pics:view_pic_link}}" onclick="slide_start_click();return false;"><img src="http://files.homepagemodules.de/b123484/a_2_6a8729da.png" border="0" style="max-height:16px;max-width:16px;"></a>
Alles Funktioniert soweit außer die Sildeshow... Könnte man dafür eine lösung finden? Ich würde es zumindest es so gerne haben. 
Danke 
Man oh man, erst probieren dann studieren ähh das Problem melden. Sobald ich dann auch den Play Button in Die Galerie für Bilder anzeigen eingebaut habe funktioniert es nun Tadellos! Was mir nur auffählt ist das der Stop Button nicht gleich angezeigt wird sondern erst der Für Play und nach einiger zeit dann durch den Stop ersätzt wird ist aber nicht viel schlimm. 
Super Script danke dafür es hat geklappt wunderbar 
Hallo toggo,
schön, dass sich das Problem doch noch erledigt hat.
Freut mich, wenn alles funktioniert.
Gerade seit den neuen Templates muss man ein wenig herumprobieren, damit's in den verschiedenen Varianten auch funktioniert.
Dann wünsche ich dir noch einen schönen Abend... 
So sieht es aus.
Wünsche dir ebenfalls einen schönen Abend