Ideen f�r Skripte und sonstige Quellcodes » Slideshow in der Bildergalerie

Florians Forum � Webmaster � Ideen f�r Skripte und sonstige Quellcodes � Slideshow in der Bildergalerie

Themen-Einstellungen

Thema drucken

Bereich wechseln

#1 | Slideshow in der Bildergalerie datum

06.12.2010 23:01 (zuletzt bearbeitet: 06.12.2010 23:06)

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.

Bis dann und besten Dank im Voraus

Gruß
Wolfgang

Wolfgang hat folgende Bilder an diesen Beitrag angeh�ngt

Sliteshow.JPEG

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#2 | RE: Slideshow in der Bildergalerie datum

12.12.2010 16:43 (zuletzt bearbeitet: 17.12.2010 19:27)

florian-zier

Administrator

Informationen anzeigen

Beitr�ge:	837
Punkte:	1895
Registriert seit:	19.04.2007
Wohnort:	Oberkirch

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:

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

1
 
initSlideShow();

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

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

1
2
 
<a href="javascript:document.getElementById('next').onclick();">vor</a>
<a href="javascript:document.getElementById('back').onclick();">zurück</a>
 

(Oder benutze die Template-Variablen {{nextLink}} und {{previousLink}}.)

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

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#3 | RE: Slideshow in der Bildergalerie datum

12.12.2010 23:30 (zuletzt bearbeitet: 12.12.2010 23:30)

Hallo Florian,
super Lösung!

Leider funktioniert die Slideshow bei mir nicht im Internetexplorer.
Läßt sich hier etwas machen?

Bis dann
Wolfgang

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#4 | RE: Slideshow in der Bildergalerie datum

17.12.2010 19:26

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

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#5 | RE: Slideshow in der Bildergalerie datum

20.12.2010 21:09 (zuletzt bearbeitet: 20.12.2010 21:10)

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

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#6 | RE: Slideshow in der Bildergalerie datum

22.12.2010 18:50

florian-zier

Administrator

Informationen anzeigen

Beitr�ge:	837
Punkte:	1895
Registriert seit:	19.04.2007
Wohnort:	Oberkirch

Hallo Wolfgang,
ich habe nun eine weitere Version erstellt.

Das Skript im Head wurde leicht ge�ndert:

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

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

1
 
<a name="play">&nbsp;</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.

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

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#7 | RE: Slideshow in der Bildergalerie datum

23.12.2010 00:54 (zuletzt bearbeitet: 23.12.2010 01:22)

Hallo Floian,
hat jetzt alles super geklappt.
Danke dafür.

PS:
Habe folgenden Anker eingesetzt
<a name="viewport"> </a>

Viele Grüße
Wolfgang

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#8 | RE: Slideshow in der Bildergalerie datum

02.09.2011 01:02 (zuletzt bearbeitet: 02.09.2011 01:17)

toggodamian

Informationen anzeigen

Beitr�ge:	67
Punkte:	188
Registriert seit:	13.01.2011

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:

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

toggodamian hat folgende Bilder an diesen Beitrag angeh�ngt

Unbenannt.jpg

Antworten

#9 | RE: Slideshow in der Bildergalerie datum

04.09.2011 18:11

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

Antworten

#10 | RE: Slideshow in der Bildergalerie datum

05.09.2011 17:50

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

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#11 | RE: Slideshow in der Bildergalerie datum

05.09.2011 20:02

So sieht es aus.
Wünsche dir ebenfalls einen schönen Abend

Antworten

Onlinezeitzähler � � Letzte Beiträge-Liste Sortieren

�hnliche Themen

Antworten

Letzter Beitrag

Lupenfunktion in der Bildergalerie
Erstellt im Forum Ideen f�r Skripte und sonstige Quellcodes von Wolfgang 8 12.10.2014 16:31
Wolfgang • Zugriffe: 913
Slideshow
Erstellt im Forum Homepage & Anderes von florian-zier 6 03.11.2011 12:06
toggodamian • Zugriffe: 1010
Online-Liste anzeigen
Erstellt im Forum Funktionen & Template von Wolfgang 3 06.04.2011 20:57
Wolfgang • Zugriffe: 711
Automatische Slideshow mit Navigationsbuttons
Erstellt im Forum Funktionen & Template von florian-zier 15 17.07.2008 23:27
florian-zier • Zugriffe: 1093
automatische Slideshow mit Navigationsbuttons
Erstellt im Forum Homepage & Anderes von florian-zier 0 20.01.2008 02:16
florian-zier • Zugriffe: 763
Verfügbare Quellcodes
Erstellt im Forum Xobor (Homepagemodules & Dynamicboard) von florian-zier 0 16.01.2008 22:36
florian-zier • Zugriffe: 1939

Bitte geben Sie einen Grund f�r die Verwarnung an