Diashow mit wechselnder Laufrichtung

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps � Diashow mit wechselnder Laufrichtung

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 10, 8.1, 8 und 7 - Fragen & Antworten �rger mit Ihrem PC? �rger mit dem PC - Vorbeugung und Hilfe �rger mit dem PC - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | Diashow mit wechselnder Laufrichtung datum

28.10.2010 00:30 (zuletzt bearbeitet: 13.05.2023 20:56)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3313
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1243

Diashow mit horizontaler Laufrichtung - Teil 1
Aktualisiert 13.05.23

Auf einfachste Weise läßt sich eine kleine Diashow mit dem Befehl "Marquee" erstellen. In dem hier folgenden Beispiel werden Vorschaubilder angezeigt, deren Links zur den originalen Hintergrundbilder in der Bildergallerie führen.

Die durchgehende Diashow bietet folgende Funktionen:

Die Bilder der Diashow können für alle Laufrichtungen programmiert werden!
Die Bilder der Diashow bleiben beim Überfahren mit der Maus stehen!
Bilder können auch verlinkt werden!
Einsatz von "title" für Bild-Beschreibungen über Tooltipps!

Folgendes ist zu beachten:

Größere Abstände zwischen den Link- und Bildadressen lassen sich mit   durchführen.
Laufrichtung von rechts nach links und zurück mit behavior="alternate"

Diashow mit horizontal wechselnder Laufrichtung:

Formatierungen:

Mit "scrolldelay" (Zeile 4) kann die Geschwindigkeit verlangsamt werden!
Mit Hilfe von "width" (Zeile 1) wird die Breite der Bilder auf die Diashow abgestimmt!
In Zeile 1+4 können die Farben angepasst werden!
Zwischen Zeile 6-9 werden die Bilder, wenn benötigt, auch die Verlinkungen eingetragen!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<table title="Diashow" style="width:500px !important;height:auto !important;border:3px double #022a89;background:#111254">
<tr>
<td>
<marquee  behavior="alternate" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();" scrolldelay="10" style="background-color:#001179;padding:10px;margin:10px 15px">
&nbsp;&nbsp;&nbsp;
<a href='https://www.hilfe-tricks-tipps.de/t1130f42-Kaum-zu-glauben-Windows-Service-Pack-zum-Download.html#mitte1'><img src='https://files.homepagemodules.de/b104774/pictures_u92_thumb_b08c00.jpg' title='Windows7'></a>
<a href='https://www.hilfe-tricks-tipps.de/t1130f42-Kaum-zu-glauben-Windows-Service-Pack-zum-Download.html#mitte1'><img src='https://files.homepagemodules.de/b104774/pictures_u93_thumb_0edf1c.jpg' title='Windows7'></a>
<a href='https://www.hilfe-tricks-tipps.de/t1130f42-Kaum-zu-glauben-Windows-Service-Pack-zum-Download.html#mitte1'><img src='https://files.homepagemodules.de/b104774/pictures_u94_thumb_96a5dc.png' title='windows7'></a>
<a href='https://www.hilfe-tricks-tipps.de/t1130f42-Kaum-zu-glauben-Windows-Service-Pack-zum-Download.html#mitte1'><img src='https://files.homepagemodules.de/b104774/pictures_u95_thumb_8a618a.jpg' title='Windows7'></a>
&nbsp;&nbsp;&nbsp;
</marquee>
</td>
</tr>
</table>
 

Schlie�en

Die Diashow in der Iconbar mit horizontal wechselnder Laufrichtung:
(Auch hier im Forum in der zu sehen)

Hinzufügen neuer Foren-Codes:

1
2
3
4
5
6
7
8
9
 
Ersetze: 
[diashow] 
... 
[/diashow]
 
Mit: 
<table title="Diashow" style="width:500px !important;max-height:200px !important;border:3px double #022a89;background:#111254"><tr><td><marquee  behavior="alternate" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();" scrolldelay="10" style="background-color:#001179;padding:10px;margin:10px 15px">&nbsp;&nbsp;&nbsp; 
... 
&nbsp;&nbsp;&nbsp;</marquee></td></tr></table>
 

Der Foren-Code für die Diashow wird über ein Symbol in den Beitrag eingefügt:

Eintragung unter "HTML" (neue Iconbar)

1
 
<a title="Automatische Diashow mit wechselnder Richtung" href="javascript:insert('[diashow][url=https://www.server.de][img]https://www.server.de/bild1.jpg[/img][/url] [url=https://www.server.de][img]https://www.server.de/bild2.jpg[/img][/url]','[/diashow]')"><img src="https://img.homepagemodules.de/ds/static/gaia/picture.png" alt="Automatische Diashow mit wechselnder Richtung" border=0></a>

Der Forumcode (BB-Code) für die Diashow in einem "DropDown-Menü".

1
 
<option title="Automtische Diashow mit wechselnder Richtung" value="javascript:insert('[diashow][url=https://www.server.de][img]https://www.server.de/kleines_bild1.jpg[/img][/url] [url=https://www.server.de][img]https://www.server.de/kleines_bild2.jpg[/img][/url]','[/diashow]')">Diashow</option>

Schlie�en

Die Diashow in Aktion:

Ein Klick führt zu den dargestellten Hintergrundbildern von Windows 7 (Bildergalerie)

Schlie�en

Weitere ähnliche Links:

Bis dann
Wolfgang

Antworten

#2 | Diashow mit wechselnder Laufrichtung datum

27.04.2011 12:14 (zuletzt bearbeitet: 13.05.2023 20:54)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3313
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1243

Diashow mit vertikaler Laufrichtung - Teil 2
Aktualisiert 13.05.23

In dem folgenden Beispiel wird eine weitere Variation der kleinen Diashow mit dem Befehl "Marquee" gezeigt. Hier laufen die Bilder nicht horizontal sondern vertikal, von oben nach unten. Auch hier werden Vorschaubilder angezeigt, die zur den originalen Hintergrundbilder der Bildergalerie führen.

Formatierungen:

"scrolldelay"

Mit Hilfe von "width" & "height" wird das Wiedergabefenster auf die Diashow abgestimmt!
Die Position der Bilder kann über "style" angepasst werden!
Die vertikale Laufrichtung wird durch Kombination von direction="up" erreicht!
Durch die Kombination von direction="down" wird die Startrichtung gewechselt!

Diashow mit vertikal wechselnder Laufrichtung:

Mit "scrolldelay" (Zeile 4) kann die Geschwindigkeit verlangsamt werden!
Mit Hilfe von "width" (Zeile 1) wird die Breite der Bilder auf die Diashow abgestimmt!
In Zeile 1+4 können die Farben angepasst werden!
Zwischen Zeile 5-8 werden die Bilder und die Verlinkungen eingetragen!

1
2
3
4
5
6
7
8
9
10
11
12
 
<table style="border:3px double #022a89;background:#111254;height: 200px; max-width: 250px;">
<tr>
<td>
<marquee onmouseover="this.stop();" onmouseout="this.start();" scrolldelay="10" direction="up" scrollamount="4" style="background:#001179;text-align: center;padding:5px;margin:5px;"> 
<a href="https://www.hilfe-tricks-tipps.de/g6p37-Champagner.html"><img title="Champagner" src="https://files.homepagemodules.de/b104774/pictures_u37_thumb_c6a4f9.jpg"></a> 
<a href="https://www.hilfe-tricks-tipps.de/g6p101-Auge.html"><img title="Auge" src="https://files.homepagemodules.de/b104774/pictures_u101_thumb_9b7b4c.jpg"></a> 
<a href="https://www.hilfe-tricks-tipps.de/g6p89-Zwei-Herzen.html"><img title="Zwei Herzen" src="https://files.homepagemodules.de/b104774/pictures_u89_thumb_b7a26c.jpg"></a> 
<a href="https://www.hilfe-tricks-tipps.de/g6p84-Karten.html"><img title="Karten" src="https://files.homepagemodules.de/b104774/pictures_u84_thumb_3f87b2.jpg"></a> 
</marquee>
</td>
</tr>
</table>
 

Schlie�en

Die Diashow in der Iconbar mit verticaler wechselnder Laufrichtung:
(Auch hier im Forum in der zu sehen)

Eintrag in Eigener CSS Code:

1
2
3
 
marquee {background:#001179; text-align: center; padding:5px; margin:5px;}
marquee img {margin:10px 0;}
#marquee_table {border:3px double #022a89; background:#111254; height: 200px; max-width: 250px;}
 

Hinzufügen neuer Foren-Codes:

1
2
3
4
5
6
7
8
9
10
 
Ersetze: 
[diashow_v]
...
[/diashow_v]
 

Mit: 
<table id="marquee_table"><tr><td><marquee onmouseover="this.stop();" onmouseout="this.start();" scrolldelay="10" direction="up" scrollamount="4">
...
</marquee></td></tr></table>
 

Der Foren-Code für die Diashow wird über ein Symbol in den Beitrag eingefügt:

Eintragung unter "HTML" (neue Iconbar)

1
 
<a title="Automatische Diashow mit wechselnder Richtung" href="javascript:insert('[diashow_v][url=https://www.server.de][img]https://www.server.de/bild1.jpg[/img][/url] [url=https://www.server.de][img]https://www.server.de/bild2.jpg[/img][/url]','[/diashow_v]')"><img src="https://img.homepagemodules.de/ds/static/gaia/picture.png" alt="Automatische Diashow mit wechselnder Richtung" border=0></a>

Der Forumcode (BB-Code) für die Diashow in einem "DropDown-Menü":

Eintragung unter "HTML" (neue Iconbar)

1
 
<option title="Automtische Diashow mit wechselnder Richtung" value="javascript:insert('[diashow_v][url=https://www.server.de][img]https://www.server.de/kleines_bild1.jpg[/img][/url] [url=https://www.server.de][img]https://www.server.de/kleines_bild2.jpg[/img][/url]','[/diashow_v]')">Diashow</option>

Schlie�en

Die Diashow in Aktion:

Ein Klick führt zu den dargestellten Bildern (Bildergalerie)

Schlie�en

Weitere ähnliche Links:

Bis dann
Wolfgang

findet das Top!

Antworten

Ladezeiten von Webseiten anzeigen und verkürzen � � Cursor automatisch ins Login-Eingabefeld setzen!

�hnliche Themen

Antworten

Letzter Beitrag

Tuning für das Plugin Xobor Lightbox (Diashow) - Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

02.07.2021 19:36
von

Wolfgang • Zugriffe: 922

Neu! Weitere Diashow in der Bildergalerie!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 1 04.02.2020 19:19
Wolfgang • Zugriffe: 1790

Wechselnde, durchlaufende und verlinkte News Ticker
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Magister

13.05.2022 21:06
von

Wolfgang • Zugriffe: 2494

RE: Einlaufender Text - Effekte fürs Forum oder die Homepage
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

20.01.2021 21:45
von

Wolfgang • Zugriffe: 1644

Eigene Fotos als Diashow!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Ede 2 08.10.2011 00:13
WolverineX • Zugriffe: 912

Zeit - Zeitpunkt - Zeitraum - Zeitsteuerung - zeitlich - zeitgesteuert - vorgegebene Zeit!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

19.07.2013 13:44
von

Lady of the light • Zugriffe: 3055

Bilderpräsentation per Mouseover, per Mausklick, Modal oder per Diashow!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Hagen_King

28.09.2023 17:13
von

Wolfgang • Zugriffe: 7310

Überprüfen ob JavaScript aktiviert ist!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 1 05.08.2017 21:33
Wolfgang • Zugriffe: 7094

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 85 €

78%