Bilderpräsentation per Mouseover, per Mausklick, Modal oder per Diashow in Beiträgen und im Blog!

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! � Bilderpräsentation per Mouseover, per Mausklick, Modal oder per Diashow in Beiträgen und im Blog!

Seite 1 von 4 � Seite 1 2 3 4 Seite �

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News. Stellen Sie Ihr eigene Webseite vor. Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. MS Windows 11, 10, 8 und 7 - Fragen & Antworten. Linux, Ubuntu und andere Betriebssysteme. �rger mit dem PC, Laptop oder Tablet? �rger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe? �rger mit dem PC, Laptop oder Tablet - 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. Elektronik & Elektrotechnik Elektronik & Elektrotechnik - Fragen und Antworten Elektronik & Elektrotechnik - Praxis - Highlights 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 | Bilderpräsentation per Mouseover, per Mausklick, Modal oder per Diashow in Beiträgen und im Blog! datum

02.01.2009 11:55 (zuletzt bearbeitet: 13.06.2017 16:08)

Hagen_King ( gel�scht )

Kleine Bilder werden um ein große Bild positioniert und bei einem MouseOver wird das große Bild ausgetauscht.

Hallo,
hier habe ich mal einen Script, mit dem man seine Bilder
auf eine besondere Art und Weise präsentieren kann.

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
 
<html>
<head>
<title>PicRemote</title>
 
<script language="JavaScript">
 
function SymError()
{
  return true;
}
 
window.onerror = SymError;
 
</script>
 
</head>
 
<script language="JavaScript" type="text/javascript">
 
function change(tausch_bild_name,neues_bild_name)
{
window.document[tausch_bild_name].src = "beispielbilder/"+neues_bild_name+".jpg";
}
 
</script>
<center>
<table border="0" cellspacing="20" cellpadding="0" height="304" width="415">
  <tr> 
    <td colspan="2" rowspan="2" height="150" width="238"> 
      <table border="0" cellspacing="0" cellpadding="1" bgcolor="#FFFFFF" width="100%" height="174">
        <tr> 
          <td height="172"> 
            <div align="center">
              <center> 
            <table width="100" border="0" cellspacing="0" cellpadding="1" height="178" background="gfxu/wait.gif">
              <tr> 
                <td width="142" align="center"><img src="Dein Bild " width="229" height="171" name="gr" border=0></td>
              </tr>
            </table>
              </center>
            </div>
          </td>
        </tr>
      </table>
    </td>
    <td height="114" width="108"> 
      <table border="0" cellspacing="0" cellpadding="1" bgcolor="#FFFFFF">
        <tr> 
          <td> 
            <table width="100" border="0" cellspacing="0" cellpadding="1" height="100">
              <tr> 
                <td><a href="#" onMouseOver="change('gr',5)"><img src="Dein Bild" width="100" height="100" border=0></a></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td height="114" width="44"> </td>
  </tr>
  <tr> 
    <td height="16" width="108"> 
      <table border="0" cellspacing="0" cellpadding="1" bgcolor="#FFFFFF">
        <tr> 
          <td> 
            <table width="100" border="0" cellspacing="0" cellpadding="1" height="100">
              <tr> 
                <td><a href="#" onMouseOver="change('gr',4)"><img src="Dein Bild" width="100" height="100" border=0></a></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td height="16" width="44"> </td>
  </tr>
  <tr> 
    <td height="114" width="108"> 
      <table border="0" cellspacing="0" cellpadding="1" bgcolor="#FFFFFF">
        <tr> 
          <td> 
            <table width="100" border="0" cellspacing="0" cellpadding="1" height="100">
              <tr> 
                <td><a href="#" onMouseOver="change('gr',1)"><img src="Dein Bild" width="100" height="100" border=0></a></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td height="114" width="108"> 
      <table border="0" cellspacing="0" cellpadding="1" bgcolor="#FFFFFF">
        <tr> 
          <td> 
            <table width="100" border="0" cellspacing="0" cellpadding="1" height="100">
              <tr> 
                <td><a href="#" onMouseOver="change('gr',2)"><img src="Dein Bild" width="100" height="100" border=0></a></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td height="114" width="108"> 
      <table border="0" cellspacing="0" cellpadding="1" bgcolor="#FFFFFF">
        <tr> 
          <td> 
            <table width="100" border="0" cellspacing="0" cellpadding="1" height="100">
              <tr> 
                <td><a href="#" onMouseOver="change('gr',3)"><img src="Dein Bild" width="100" height="100" border=0></a></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td height="114" width="44"> </td>
  </tr>
</table>
</center>
 
</html>
 

Schließen

An ein paar Stellen habe ich "Dein Bild" reingeschrieben. Dort musst du deine Bilderdatei eintragen.

Antworten

#2 | Bilddarstellung per Mouseover, Mausklick! datum

08.01.2009 00:21 (zuletzt bearbeitet: 05.04.2020 21:10)

Wolfgang

Administrator

Informationen anzeigen

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

Wolfgang hat heute Geburtstag!

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

Bilderwechsel per MouseOver oder Mausklick
Aktualisiert 15.09.22

Hallo Hagen_King,
das Script ist super, habe es verändert und etwas erweitert!

Welche Funktionen hat jetzt der Bilderwechsler?

  • Ich habe den Bildwechsler erweitert und so verlinkt, dass ein Klick auf das Hauptfenster zur Bildergalerie führt!
  • Die Bilder wechseln im Hauptfenster per Mouseover .
  • Die eingetragenen Bilder werden jetzt auch proportional angezeigt.
  • Es können verschiedene Bildformate verwendet werden (jpg, png, bmp,...)
  • Funktioniert auch mit Klicks in der "Mobil-Version"

Verschiedene Punkte sind zu beachten:

  • Das Hintergrundbild ist in Zeile 9.
  • Das Startbild ist in Zeile 39.
  • Die max. Höhe des Startbildes wird in Zeile 37 eingetragen.
  • Die Vorschaubilder sind in Zeile 53, 69, 85, 98, 111.
  • Die Abstände der Vorschaubilder werden über cellspacing="20" in Zeile 30 eingestellt.
  • Die Bilderadressen müssen 2x eingetragen werden!

  • Wird onMouseOver (5x) gegen onClick ausgetauscht, wird der Bilderwechsel durch einen Mausklick ausgelöst.

Das komplette Script:

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
 
<!DOCTYPE HTML>
<html>
<head>
<title>Bilderwechsel</title>
 
<style>
body {
  background-size:100vw 100vh;
  background-image:url(https://addpics.com/files/6v-3y-3295.jpg);
  background-color:#000047;
}
</style>
 
</head>
<body>
 
<script>
function change2(href,neu_href_name){
  document.getElementById("href").href = neu_href_name; 
}
 
function change1(tausch_bild_name,neues_bild_name) {
  document[tausch_bild_name].src = neues_bild_name;
}
</script>
 
<center>
<p style="font-size:30px;color:#ffffff;">Bildertausch per Mouseover, mit Verlinkung</p>
 
<table border="0" cellspacing="20" cellpadding="0">
  <tr> 
    <td colspan="2" rowspan="2"> 
      <table border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td> 
            
            <table border="0" cellspacing="0" cellpadding="0" height="210">
              <tr> 
                <td><a href="https://www.hilfe-tricks-tipps.de/g16p35-Glas.html#viewport" id="href"><img src="https://files.homepagemodules.de/b104774/resize/250x187/pictures_u35_8e62ab.jpg" name="gr" style="width:235px;border: 3px solid #FFFFFF"></a></td>
              </tr>
            </table>
            
          </td>
        </tr>
      </table>
    </td>
    <td> 
      <table border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td> 
            <table border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td onMouseOver="change1('gr','https://files.homepagemodules.de/b104774/resize/250x187/pictures_u35_8e62ab.jpg'); change2('href','https://www.hilfe-tricks-tipps.de/g16p35-Glas.html#viewport')"><img src="https://files.homepagemodules.de/b104774/resize/250x187/pictures_u35_8e62ab.jpg" style="width:100px;border: 3px solid #FFFFFF"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td> </td>
  </tr>
  <tr> 
    <td> 
      <table border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td> 
            <table border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td onmouseover="change1('gr','https://files.homepagemodules.de/b104774/resize/250x187/pictures_u42_1f77fd.jpg'); change2('href','https://www.hilfe-tricks-tipps.de/g16p42-Kristall.html#viewport')"><img src="https://files.homepagemodules.de/b104774/resize/250x187/pictures_u42_1f77fd.jpg" style="width:100px;border: 3px solid #FFFFFF"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td> </td>
  </tr>
  <tr> 
    <td> 
      <table border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td> 
            <table border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td onMouseOver="change1('gr','https://files.homepagemodules.de/b104774/resize/250x187/pictures_u53_cd37e8.jpg');change2('href','https://www.hilfe-tricks-tipps.de/g16p53-Zylinder.html#viewport')"><img src="https://files.homepagemodules.de/b104774/resize/250x187/pictures_u53_cd37e8.jpg" style="width:100px;border: 3px solid #FFFFFF"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td> 
      <table border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td> 
            <table border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td onMouseOver="change1('gr','https://files.homepagemodules.de/b104774/resize/250x187/pictures_u338_e72752.jpg'); change2('href','https://www.hilfe-tricks-tipps.de/g16p338-Silver-Apfel.html#viewport')"><img src="https://files.homepagemodules.de/b104774/resize/250x187/pictures_u338_e72752.jpg" style="width:100px;border: 3px solid #FFFFFF"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td> 
      <table border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td> 
            <table border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td onMouseOver="change1('gr','https://files.homepagemodules.de/b104774/resize/250x187/pictures_u49_feaf68.jpg'); change2('href','https://www.hilfe-tricks-tipps.de/g16p49-Pilze.html#viewport')"><img src="https://files.homepagemodules.de/b104774/resize/250x187/pictures_u49_feaf68.jpg" style="width:100px;border: 3px solid #FFFFFF"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td> 
  </td>
  </tr>
</table>
 
</center>
 
</body>
</html>
 

Schlie�en

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
 
<!DOCTYPE HTML>
<html>
<head>
<title>Bilderwechsel</title>
 
<style>
body {
  background-size:100vw 100vh;
  background-image:url(https://addpics.com/files/6v-3y-3295.jpg);
  background-color:#000047;
}
</style>
 
</head>
<body>
 
<script>
function change2(href,neu_href_name){
  document.getElementById("href").href = neu_href_name; 
}
 
function change1(tausch_bild_name,neues_bild_name) {
  document[tausch_bild_name].src = neues_bild_name;
}
</script>
 
<center>
<p style="font-size:30px;color:#ffffff;">Bildertausch per Mausklick, ohne Verlinkung</p>
 
<table border="0" cellspacing="20" cellpadding="0">
  <tr> 
    <td colspan="2" rowspan="2"> 
      <table border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td> 
            
            <table border="0" cellspacing="0" cellpadding="0" height="210">
              <tr> 
                <td><a href="https://www.hilfe-tricks-tipps.de/g16p35-Glas.html#viewport" id="href"><img src="https://files.homepagemodules.de/b104774/resize/250x187/pictures_u35_8e62ab.jpg" name="gr" style="width:235px;border: 3px solid #FFFFFF"></a></td>
              </tr>
            </table>
            
          </td>
        </tr>
      </table>
    </td>
    <td> 
      <table border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td> 
            <table border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td onclick="change1('gr','https://files.homepagemodules.de/b104774/resize/250x187/pictures_u35_8e62ab.jpg'); change2('href','https://www.hilfe-tricks-tipps.de/g16p35-Glas.html#viewport')"><img src="https://files.homepagemodules.de/b104774/resize/250x187/pictures_u35_8e62ab.jpg" style="width:100px;border: 3px solid #FFFFFF"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td> </td>
  </tr>
  <tr> 
    <td> 
      <table border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td> 
            <table border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td onclick="change1('gr','https://files.homepagemodules.de/b104774/resize/250x187/pictures_u42_1f77fd.jpg'); change2('href','https://www.hilfe-tricks-tipps.de/g16p42-Kristall.html#viewport')"><img src="https://files.homepagemodules.de/b104774/resize/250x187/pictures_u42_1f77fd.jpg" style="width:100px;border: 3px solid #FFFFFF"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td> </td>
  </tr>
  <tr> 
    <td> 
      <table border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td> 
            <table border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td onclick="change1('gr','https://files.homepagemodules.de/b104774/resize/250x187/pictures_u53_cd37e8.jpg');change2('href','https://www.hilfe-tricks-tipps.de/g16p53-Zylinder.html#viewport')"><img src="https://files.homepagemodules.de/b104774/resize/250x187/pictures_u53_cd37e8.jpg" style="width:100px;border: 3px solid #FFFFFF"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td> 
      <table border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td> 
            <table border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td onclick="change1('gr','https://files.homepagemodules.de/b104774/resize/250x187/pictures_u338_e72752.jpg'); change2('href','https://www.hilfe-tricks-tipps.de/g16p338-Silver-Apfel.html#viewport')"><img src="https://files.homepagemodules.de/b104774/resize/250x187/pictures_u338_e72752.jpg" style="width:100px;border: 3px solid #FFFFFF"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td> 
      <table border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td> 
            <table border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td onclick="change1('gr','https://files.homepagemodules.de/b104774/resize/250x187/pictures_u49_feaf68.jpg'); change2('href','https://www.hilfe-tricks-tipps.de/g16p49-Pilze.html#viewport')"><img src="https://files.homepagemodules.de/b104774/resize/250x187/pictures_u49_feaf68.jpg" style="width:100px;border: 3px solid #FFFFFF"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td> 
  </td>
  </tr>
</table>
 
</center>
 
</body>
</html>
 

Schlie�en

Der Bildwechsler in Aktion:

• Bildwechsel per Mouseover
• Bildwechsel per Mausklick

Bis dann und viel Spaß

Wolfgang

Antworten

#3 | Erweiteter Bilderwechsel per Mouseover datum

21.03.2012 19:24 (zuletzt bearbeitet: 05.04.2020 21:09)

Wolfgang

Administrator

Informationen anzeigen

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

Wolfgang hat heute Geburtstag!

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

Erweiteter Bilderwechsel per Mouseover
Aktualisiert 15.09.22

Was hat sich verändert?

  • Der Bildwechsler wurde erweitert und so verlinkt, dass die Klicks auf das Hauptfenster zu den einzelnen Kategorien in der Bildergalerie führen!
  • Der Bilderwechsler hat jetzt 8 verlinkte Vorschaubilder.
  • Die Links werden in einem neuen Fenster geöffnet.
  • Die eingetragenen Bilder werden jetzt auch proportional angezeigt.
  • Es können verschiedene Bildformate verwendet werden (jpg, png, bmp,...)

Verschiedene Punkte sind wie oben schon beschrieben, zu beachten:

  • Das Hintergrundbild ist in Zeile 9.
  • Das Startbild ist in Zeile 81.
  • Die max. Höhe des Startbildes wird in Zeile 79 eingetragen.
  • Die Vorschaubilder sind in Zeile 38, 51, 64, 94, 110, 126, 139, 152.
  • Die Abstände der Vorschaubilder werden über cellspacing="20" in Zeile 30 eingestellt.
  • Die Bildadresse muss 2x eingetragen werden!
  • Werden die Zeilen von 31 bis 73 gelöscht, wird der Bilderwechsler wieder auf 5 Vorschaubildern reduziert.

Das komplette Skript:

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
 
<!DOCTYPE HTML>
<html>
<head>
<title>Bildwechsel</title>
 
<style>
body {
  background-size:100vw 100vh;
  background-image:url(https://addpics.com/files/6v-3y-3295.jpg);
  background-color:#000047;
}
</style>
 
</head>
<body>
 
<script>
function change2(href,neu_href_name){
  document.getElementById("href").href = neu_href_name; 
}
 
function change1(tausch_bild_name,neues_bild_name) {
  document[tausch_bild_name].src = neues_bild_name;
}
</script>
 
<center>
<p style="font-size:38px;color:#ffffff;padding-left:50px;">Bildertausch per Mouseover und Verlinkung</p>
 
<table border="0" cellspacing="20" cellpadding="0">
  <tr> 
    <td> 
      <table border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td> 
            <table border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td onMouseOver="change1('gr','https://files.homepagemodules.de/b104774/resize/250x187/pictures_u149_9de116.jpg'); change2('href','https://www.hilfe-tricks-tipps.de/g11p149-Burj-Al-Arab.html#viewport');"><img src="https://files.homepagemodules.de/b104774/resize/250x187/pictures_u149_9de116.jpg" style="height:100px;border: 3px solid #FFFFFF;"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td> 
      <table border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td> 
            <table border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td onMouseOver="change1('gr','https://files.homepagemodules.de/b104774/resize/250x187/pictures_u489_sYMkRmDc.jpg'); change2('href','https://www.hilfe-tricks-tipps.de/g47p489-Lampe.html#viewport');"><img src="https://files.homepagemodules.de/b104774/resize/250x187/pictures_u489_sYMkRmDc.jpg" style="height:100px;border: 3px solid #FFFFFF;"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td> 
      <table border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td> 
            <table border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td onMouseOver="change1('gr','https://files.homepagemodules.de/b104774/resize/250x187/pictures_u317_2bb5e2.jpg'); change2('href','https://www.hilfe-tricks-tipps.de/g32p317-Sand.html#viewport');"><img src="https://files.homepagemodules.de/b104774/resize/250x187/pictures_u317_2bb5e2.jpg" style="height:100px;border: 3px solid #FFFFFF;"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td> 
  </td>
  </tr>
  <tr> 
    <td colspan="2" rowspan="2"> 
      <table border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td> 
            <table border="0" cellspacing="0" cellpadding="0" height="200">
              <tr> 
                <td><a href="https://www.hilfe-tricks-tipps.de/g22p19-Email.html#viewport" id="href" target="_blank"><img src="https://files.homepagemodules.de/b104774/pictures_u19_7b4b4c.jpg" name="gr" style="width:300px;border: 3px solid #FFFFFF;"></a></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td> 
      <table border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td> 
            <table border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td onMouseOver="change1('gr','https://files.homepagemodules.de/b104774/resize/250x187/pictures_u37_c6a4f9.jpg'); change2('href','https://www.hilfe-tricks-tipps.de/g40p37-Champagner.html#viewport');"><img src="https://files.homepagemodules.de/b104774/resize/250x187/pictures_u37_c6a4f9.jpg" style="width:150px;border: 3px solid #FFFFFF;"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td> </td>
  </tr>
  <tr> 
    <td> 
      <table border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td> 
            <table border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td onMouseOver="change1('gr','https://files.homepagemodules.de/b104774/resize/250x187/pictures_u25_3c21a0.jpg'); change2('href','https://www.hilfe-tricks-tipps.de/g19p25-Grosse-Welle.html#viewport');"><img src="https://files.homepagemodules.de/b104774/resize/250x187/pictures_u25_3c21a0.jpg" style="width:150px;border: 3px solid #FFFFFF;"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td> </td>
  </tr>
  <tr> 
    <td> 
      <table border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td> 
            <table border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td onMouseOver="change1('gr','https://files.homepagemodules.de/b104774/resize/250x187/pictures_u432_e9d22d.jpg'); change2('href','https://www.hilfe-tricks-tipps.de/g26p432-Manufacture-Royales-Mill.html#viewport');"><img src="https://files.homepagemodules.de/b104774/resize/250x187/pictures_u432_e9d22d.jpg" style="height:120px;border: 3px solid #FFFFFF;"></td>			
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td> 
      <table border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td> 
            <table border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td onMouseOver="change1('gr','https://files.homepagemodules.de/b104774/resize/250x187/pictures_u90_91a885.jpg'); change2('href','https://www.hilfe-tricks-tipps.de/g7p90-Planeten.html#viewport');"><img src="https://files.homepagemodules.de/b104774/resize/250x187/pictures_u90_91a885.jpg" style="height:120px;border: 3px solid #FFFFFF;"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td> 
      <table border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td> 
            <table border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td onMouseOver="change1('gr','https://files.homepagemodules.de/b104774/resize/250x187/pictures_u19_7b4b4c.jpg'); change2('href','https://www.hilfe-tricks-tipps.de/g22p19-Email.html#viewport');"><img src="https://files.homepagemodules.de/b104774/resize/250x187/pictures_u19_7b4b4c.jpg" style="height:120px;border: 3px solid #FFFFFF;"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td> 
  </td>
  </tr>
</table>
 
</center>
 
</body>
</html>
 

Schlie�en

Der Bildwechsler in Aktion:

• Bildwechsel per Mouseover

Bis dann und viel Spaß

Wolfgang

Antworten

#4 | Bilder "Modal" anzeigen! datum

12.10.2019 14:37 (zuletzt bearbeitet: 09.01.2025 20:22)

Wolfgang

Administrator

Informationen anzeigen

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

Wolfgang hat heute Geburtstag!

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

Bilder "Modal" anzeigen!
Aktualisiert 09.01.25

  • Will man Bilder besonders und direkter anzeigen, geht das über eine Modal-Funktion!
  • Hier tritt das Bild in den Vordergrund und wird in voller Größe angezeigt, der Hintergrund wird abgedunkelt.
  • Die Funktion kann auf HTML-Seiten, aber auch in Forum-Beiträgen eingesetzt werden!
  • Das folgenden Skript gibt es mit und ohne Bild-Beschreibung!
  • Ein Klick auf das Bild öffnet und schließt die Darstellung!
  • Neu - Alle Bilder werden verzerrungsfrei dargestellt!
  • Neu - Bilder ohne Beschriftung stehen jetzt auf einer Baseline!

Ohne Bild-Beschreibung (Bitte anklicken!):

Mit Bild-Beschreibung (Bitte anklicken!):

Bild 1Bild 1Bild 1Bild 1Bild 1Bild 1Bild 1Bild 1Bild 1Bild 1Bild 1Bild 1

Bild 2

Bild 3

Installation für alle Templates & Mobil

  • In Zeile 16+17 und Zeile 19+20 sind die Beispiel-Bilder enthalten, die beliebig erweitert werden können!
  • In Zeile 16+17 haben die Bilder eine zusätzliche Beschreibung!
  • Unter "data=" ... "" wird die Beschreibung für den Modal-Modus eingegeben!
  • In Zeile 16-20 wird auch die Größe der Vorschau-Bilder eingegeben (hier 200px)!
  • In Zeile 7 wird die max. Größe im Modal-Modus eingetragen (hier 700px)!
  • In Zeile 33 kann die Dauer der Animation fürs Öffnen und Schließen eingestellt werden!

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
33
34
35
36
37
38
 
<style>
 
.myImgModalM {border-radius: 5px;cursor: pointer;}
.myImgModalM:hover {opacity: 0.7;}
#closeImgM {position: absolute; top: 0px; right: 15px; color: #f1f1f1; font-size: 40px; font-weight: bold;padding:20px;}
#closeImgM:hover {color: #ff8000; text-decoration: none; cursor: pointer;}
#myModalM  {display: none;position: fixed;z-index: 999999;padding-top: 100px;left: 0;top: 0;width: 100%; height: 100%;overflow: auto;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.9);}
#imgAllM {display: block; margin: auto; height:auto !important; max-height:85%; max-width: 90% !important; cursor:pointer;}
#captionM {font-size:110%;margin: auto;text-align: center;color: #cccccc;padding-top:5px;}
 
dl.bildmodalM {display: table-cell;text-align:center;margin:0;padding:4px;}
dl.bildmodalM dd {font-size:85%;max-width: 600px;display: inline-block; margin:5px 0;padding: 2px 10px;border-radius:2px;box-shadow: 1px 1px 2px 2px #cccccc;}
 
@media only screen and (max-width: 700px){.modal-content {width: 100%;}}
</style>
<dl class="bildmodalM"><img class="myImgModalM" style="width: auto; height: 200px; object-fit: scale-down;" data="<center><dl class='bildmodal'><dd>Beschreibung 1.2</dd></dl></center>" src="https://files.homepagemodules.de/b104774/a_90_e58e22da.jpg"><div><dd>Beschreibung 1.1</dd></div></dl>
<dl class="bildmodalM"><img class="myImgModalM" style="width: auto; height: 200px; object-fit: scale-down;" data="<center><dl class='bildmodal'><dd>Beschreibung 2.2</dd></dl></center>" src="https://files.homepagemodules.de/b104774/a_88_6c273500.jpg"><div><dd>Beschreibung 2.1</dd></div></dl>
<br>
<dl class="bildmodalM"><img class="myImgModalM" style="width: auto; height: 200px; border:0; object-fit: scale-down;" src="https://files.homepagemodules.de/b104774/a_90_e58e22da.jpg"><div style="visibility:hidden;"><dd></dd></div></dl>
<dl class="bildmodalM"><img class="myImgModalM" style="width: auto; height: 200px; border:0; object-fit: scale-down;" src="https://files.homepagemodules.de/b104774/a_88_6c273500.jpg"><div style="visibility:hidden;"><dd></dd></div></dl>
 
<div id="myModalM">
<div id="closeImgM">&times;</div>
<img id="imgAllM">
<div id="captionM"></div>
</div>
 
<!-- Wenn jQuery nicht vorhanden ist, folgende Zeile freigeben! -->
<!-- <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script> -->
<script>
window.addEventListener('load', function(){
  $('.myImgModalM').on('click',function(){
    $('#myModalM').show(500).on('click',function(){$('#myModalM,#captionM').hide(500);});
    $('#imgAllM').attr('src', $(this).attr('src'));
    $('#captionM').html($(this).attr('dataM')).show();
  });
});
</script>
 

Schließen

Folgender "Foren-Code" wird neu angelegt und nach "nicht sichtbar" verschoben.
"Erweiterte Foren-Code" wird eingeblendet

Für alle neuen Foren-Codes unter "Weitere Einstellungen":

1
 
Reihenfolge: 0

Ohne Bild-Beschreibung:

1
2
3
4
5
 
Ersetze:
[img_mod={{breiteM}}={{hoeheM}}] ... [/img]
 
Mit:
<dl class="bildmodalM"><img class="myImgModalM" style="width:{{breiteM}}; height:{{hoeheM}}; border:0; object-fit: scale-down;" src=" ... "></dl>
 

Mit Bild-Beschreibung:

1
2
3
4
5
 
Ersetze:
[img_modal={{breiteM}}={{hoeheM}} {{dataM}}] ... [/img]
 
Mit:
<dl class="bildmodalM"><img class="myImgModalM" style="width:{{breiteM}}; height:{{hoeheM}}; object-fit: scale-down;" dataM="<center><dl class='bildmodalM'><dd>{{dataM}}</dd></dl></center>" src=" ... "><div><dd>{{dataM}}</dd></div></dl>
 

Schließen

Wichtig! Wenn die Slideshow aus Beitrag #7 bereits installiert ist, braucht nur der neue Foren-Code angelegt werden!
Die folgende CSS und das JavaScript sind bereits in der SlideShow und brauchen nicht mehr installiert werden!

Das Skript und der CSS-Eintrag kann in die "Fußzeile" oder am besten als Plugin in den "bottom_header" eingetragen werden!
Wichtig! Im Plugin müssen rechts oben "Unterstützte Templates" markiert werden, z.B.: Business - Template (144) und Mobile - Template (177) (Auswahl mit Mausklick oder Strg + Mausklick)!
Das Template wird dadurch nicht verä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
 
<style>
.myImgModalM {border-radius: 5px;cursor: pointer;}
.myImgModalM:hover {opacity: 0.7;}
#closeImgM {position: absolute; top: 0px; right: 15px; color: #f1f1f1; font-size: 40px; font-weight: bold;padding:20px;}
#closeImgM:hover {color: #ff8000; text-decoration: none; cursor: pointer;}
#myModalM  {display: none;position: fixed;z-index: 999999;padding-top: 100px;left: 0;top: 0;width: 100%; height: 100%;overflow: auto;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.9);}
#imgAllM {display: block; margin: auto; height:auto !important; max-height:85%; max-width: 90% !important; cursor:pointer;}
#captionM {font-size:110%;margin: auto;text-align: center;color: #cccccc;padding-top:5px;}
 
dl.bildmodalM {display: table-cell;text-align:center;margin:0;padding:4px;}
dl.bildmodalM dd {font-size:85%;max-width: 600px;display: inline-block; margin:5px 0;padding: 2px 10px;border-radius:2px;box-shadow: 1px 1px 2px 2px #cccccc;}
 
@media only screen and (max-width: 700px){.modal-content {width: 100%;}}
</style>
 
<div id="myModalM">
<div id="closeImgM">&times;</div>
<img id="imgAllM">
<div id="captionM"></div>
</div>
 
<script>
window.addEventListener('load', function(){
  $('.myImgModalM').on('click',function(){
    $('#myModalM').show(500).on('click',function(){$('#myModalM,#captionM').hide(500);});
    $('#imgAllM').attr('src', $(this).attr('src'));
    $('#captionM').html($(this).attr('dataM')).show();
  });
});
</script>
 

Schließen

  • Mit dem Auslöse-Icon wird der BB-Code in den Beitrag geschrieben!
  • Die folgenden Skripte werden jeweils mit unterschiedlichen Namen unter "" eingetragen.
  • Das erstellte Auslöse-Icon kann auch in eine vorhandene Gruppen geschoben werden.

Ohne Bild-Beschreibung:

1
 
<div onclick="xob_insert('[img_mod=auto=200px]','[/img]')" class="xob_icon_cont"><img alt="[img_mod][/img]" title="Bilder modal anzeigen! - [img_mod][/img]" class="xob_icon" src="https://files.homepagemodules.de/b2001010/a_799_50667aa9.png"></div>

Mit Bild-Beschreibung:

1
 
<div onclick="xob_insert('[img_modal=auto=200px Bild-Beschreibung]','[/img]')" class="xob_icon_cont"><img alt="[img_mod][/img]" title="Bilder modal anzeigen - Mit Bild-Beschreibung! - [img_mod][/img]" class="xob_icon" src="https://files.homepagemodules.de/b2001010/a_799_50667aa9.png"></div>

Schließen

• So kann der Foren-Code für ein Bild mit einer Anzeigenbreite von 200px aussehen!

Ohne Bild-Beschreibung:

1
 
[img_mod=auto=200px]https://files.homepagemodules.de/b104774/a_90_e58e22da.jpg[/img]

Mit Bild-Beschreibung:

1
 
[img_modal=auto=200px Bild-Beschreibung]https://files.homepagemodules.de/b104774/a_90_e58e22da.jpg[/img]

Schließen

Auch hier nachzulesen: w3schools.com - Modal Image

Aus dem Forum: Bilder aus "Datei anhängen" mit einem Klick öffnen & schließen! - Für alle Templates! - Teil 1-4

Bis dann und gutes Gelingen

Wolfgang

Haviforumstreffpunkt findet das Top!

Antworten

Moderations-Kommentar:

Classes und ID's mussten ausgetauscht werden, es gab Konflikte mit Slideshow aus Beitrag #7 behoben!

#5 | "Modal-Darstellung" für die Bildergalerie! datum

22.10.2019 20:06 (zuletzt bearbeitet: 23.09.2023 20:50)

Wolfgang

Administrator

Informationen anzeigen

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

Wolfgang hat heute Geburtstag!

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

"Modal-Darstellung" für die Bildergalerie!
Aktualisiert 23.09.23

Eine super Feature ist es den Modal-Modus in die Bildergalerie einzubauen!
Im Modal-Modus tritt das Bild in den Vordergrund und wird in voller Größe angezeigt, der Hintergrund wird abgedunkelt.
Durch das neue Update funktioniert das in den Templates (v1-4) und allen Monitorgrößen gleich gut!
Das folgende Skript (Business-Template) setzt einen Bild-Button unter das aktuell angezeigte Bild, mit dem der Modal-Modus ausgelöst wird!

Hier testen: Bugatti Veyron Hires

Installation für die Templates (v1-4)

Voraussetzungen:
Um den Modal-Modus in der Bildergalerie einzubauen, müssen folgende Voraussetzungen erfüllt sein!

Man muss über ein Premium-Forum verfügen!
Link zur Voll-Ansicht anzeigen muss für die Bildergalerie aktiviert werden (nur für Premium-Nutzer)!
Das Skript muss als Plugin installiert werden!
Da das folgende Skript Forum-Variablen enthält, kann es nicht in der Kopf- oder Fußzeile Platz finden!

Das Skript wird als Plugin in den "gallery_viewpic_footer" eingetragen!
Wichtig! Im Plugin muss rechts oben das "Unterstützte Template" markiert werden, z.B. Business - Template (144), Auswahl mit Mausklick oder Strg + Mausklick!

Durch Zeile 20 wird der Button mit einem Tooltipp unter das Bild gesetzt!
Durch die Forum-Variable {{gallery_dl_link}} ist die Modalansicht erst möglich! Sie ist auch für die Voll-Ansicht notwendig und nur in den Premium-Foren verfügbar!

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
 
<style>
  .myImgModal2 { display:flex;cursor: pointer; background:#aaaaaa; width:40px !important; margin:5px auto; padding: 3px; border: 1px solid #aaaaaa;}
  .myImgModal2:hover {opacity: 0.7;}
  #closeImg {position: absolute; top: 0px; right: 15px; color: #f1f1f1; font-size: 40px; font-weight: bold; padding:20px;}
  #closeImg:hover, .close:focus {color: #ff8000; text-decoration: none; cursor: pointer;}
  #myModal  {display: none; position: fixed; z-index: 999999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgb(0,0,0);}
  #imgAll {max-height: 99%; max-width: 99%; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: 0; cursor:pointer; object-fit: scale-down;}
</style>
 
<div id="myModal">
  <div id="closeImg">&times;</div>
  <img id="imgAll">
</div> 
 
<script>
  ImageLoad = 
  {{template==144.start}}$('.gallpic'){{template==144.end}}
  {{template!==144.start}}$('#PicMainCont'){{template!==144.end}}
  
  ImageLoad.after('<div style="margin:15px 0 10px 0;"><img title="Ein Klick führt zur Modal-Ansicht" class="myImgModal2" src="{{gallery_dl_link}}">Modal-Ansicht</div>');
  $('.myImgModal2').click(function(){
    $('body').css('overflow','hidden');
    $('#myModal').fadeIn(500).click(function(){
      $('body').css('overflow','auto');
      $('#myModal').hide(500);
    });
    $('#imgAll').attr('src', $(this).attr('src'));
  });
</script>
 

Schließen

Auch hier auf nachzulesen: w3schools.com - Modal Image

Wolfgang

Antworten

Moderations-Kommentar:

Funktioniert jetzt auch in den Templates (v1-4) und in unterschiedlichen Monitorgrößen!

#6 | Diashow für angehängte Bilder und "Datei anhängen" in Beiträgen modifizieren! datum

31.01.2020 18:40 (zuletzt bearbeitet: 12.11.2024 01:01)

Wolfgang

Administrator

Informationen anzeigen

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

Wolfgang hat heute Geburtstag!

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

Diashow für angehängte Bilder und "Datei anhängen" in Beiträgen modifizieren!
Aktualisiert 24.07.24

Xobor Lightbox in BeiträgenDie "Lightbox" wird mit Abschluss eines Premium-Tarifs in den Beiträgen aktiviert! Sie hat so keine weiteren Einstellmöglichkeiten!
Mit dem Plugin "Xobor Lightbox" wird eine Diashow in der "Bildergalerie" aktiviert, wodurch Bilder eindrucksvoller betrachtet werden können!
Genauso verhält es sich mit den angehängten Bildern in den Beiträgen, hier ist die Lightbox ohne Plugin aktiv. Die Bilder werden modal angezeigt ohne automatisches Weiterlaufen der Bilder!
Die Lightbox wird im Xobor V6 nicht in den Beiträgen angezeigt, nur in der großen Bildansicht!
Hat man ein Forum mit "Premium-Tarif", kann man in Beiträgen die angehängten Bilder (Datei anhängen) ebenfalls in einer Diashow direkt betrachten!
Allerdings sieht es hier nicht so schön und übersichtlich aus, wie in der Bildergalerie! Außerdem wird die Beitragsseite bei einer hohen Anzahl von Bildern noch übermäßig in die Länge gezogen!
Werden übergroße Bilder angehängt, wird es bereits nach 2 Bildern sehr unschön!
Das folgende Skript kann hier Abhilfe schaffen!

Installation, jetzt für alle Templates

Vorher

Große Bilder überfluten den Beitrag und ziehen ihn in die Länge!
Der Link zur Lightbox / Diashow ist kaum zu sehen!

Nachher

Die angehängten Bilder sind bis auf ein Bild ausgeblendet, in angenehmer und überschaubarer Größe!
Es gibt ein Button, der zur Diashow führt und ein Button, der alle Bilder anzeigt!

Wird der Button "Alle Bilder anzeigen" angeklickt, zeigen sich alle Bilder übersichtlich geordnet.
Die Button sind gut zu erkennen.
Der Beitrag wird nicht übermäßig in die Länge gezogen!
Ein Klick auf die verlinkte Beschreibung zeigt das Bild im Vollbild-Modus!

Schließen

Premium-Tarif: "Lightbox in Beiträgen"!

Die angehängten Bilder werden bis auf ein Bild ausgeblendet!
Es wird ein Bild-Button (Alle Bilder zeigen) zu den vorhandenen Diashow-Button zusätztlich angezeigt!
Der Diashow-Button wird ab 3 angehängten Bildern und der Bild-Button ab 2 Bildern automatisch eingeblendet!
Die Höhe der Vorschaubilder ist relativ klein und einheitlich gehalten, lässt sich beliebig einstellen!
Selbst kleine Bilder, wie Icons, werden noch gut und übersichtlich angezeigt!
Die Beschriftungen der Bilder sind verlinkt und werden nach einem Klick in Originalgröße angezeigt!
Bei einer großen Anzahl von Bildanhängen wird nach dem Öffnen und Schließen immer in Lesehöhe gescrollt!

Kostenloses Forum: Angehängte Bilder!

In kostenlosen Foren steht die "Xobor Lightbox" in Beiträgen nicht zur Verfügung, aber die Darstellungen für angehängte Bilder bleibt erhalten!!
Die angehängten Bilder werden auch hier bis auf ein Bild ausgeblendet!
Der Bild-Button (Alle Bilder zeigen) wird ab 2 Bildern automatisch eingeblendet!
Die Höhe der Vorschaubilder ist relativ klein und einheitlich gehalten, lässt sich beliebig einstellen!
Selbst kleine Bilder, wie Icons, werden noch gut und übersichtlich angezeigt!
Die Beschriftungen der Bilder sind verlinkt und werden nach einem Klick in Originalgröße angezeigt!
Bei einer großen Anzahl von Bildanhängen wird nach dem Öffnen und Schließen immer in Lesehöhe gescrollt!

Installation HTML-Script - Für alle Templates & Mobil verfügbar!

Bitte anklicken!

PS: Im Anhang kann man die neue "Lightbox" ausprobieren!

Bis dann und viel Erfolg beim Nachbau!
Wolfgang

Wolfgang hat folgende Bilder an diesen Beitrag angeh�ngt

Musik 01.jpg

Musik 02.jpg

Musik 03.jpg

Musik 04.jpg

Musik 05.jpg

Musik 06.jpg

Als Diashow anzeigen

Antworten

Moderations-Kommentar:

Beitrag komplett überarbeitet!
Fehler im Skript behoben - Nur im ersten Beitrag hatte alles richtig funktioniert!
Funktioniert jetzt auch für alle Templates und in kostenlosen Foren!

#7 | Multiple Diashow in Beiträgen - Mit Bildadressen oder Bilder aus dem Datei-Upload Teil 1+2! datum

20.02.2020 07:37 (zuletzt bearbeitet: 12.11.2024 00:56)

Wolfgang

Administrator

Informationen anzeigen

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

Wolfgang hat heute Geburtstag!

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

Multiple Diashow in Beiträgen - Teil 1!
Aktualisiert 18.05.25

Mit der folgenden Anleitung ist es möglich eine Multiple Diashow in Beiträgen zur Verfügung zu stellen!
Die Diashow setzt sich aus den vorangegangenen Beiträgen zusammen und weist ähnliche Funktionen auf.
Das Skript ist umfangreich, kann dafür mit vielen neuen Funktionen glänzen und ist sehr kompakt in der Bedienung!
Funktioniert in allen Templates, auch Mobil!

Wichtig! Die Diashow arbeitet mit den Bild-Adressen, wobei die Dateiendungen egal sind!
Bilder aus dem Datei-Upload funktionieren nicht mit diesem Skript!
Siehe auch Beitrag #14 - Teil 2!

Die multiple Diashow weist folgende Funktionen auf:

Bilder und Button sind animiert!
Der Vorwärts- und Rückwärts-Button wird erst durch ein Links- und rechtsseitiges "mouseover" eingeblendet!
Die Größe der Vorwärts- und Rückwärts-Button passt sich an die Größe der Diashow an, sie sind immer mittig angeordnet!
Ein Klick in die Mitte des Bildes, bringt die Ansicht in den Modal-Modus (Hintergrund wird abgedunkelt. Bild wird in voller Größe gezeigt)!
Breite und Höhe der Diashow ist einstellbar, ohne dass die Bilder verzerrt werden !!!
Die Diashow ist mit erklärenden Tooltipps ausgestattet!
Die Bildbeschreibung wird platzsparend per Mouseover und Überlauf (3 Punkte) am unteren Rand des Bildes eingeblendet!
Die Diashow wird erst angezeigt, wenn alles geladen wurde (Aufblitzen von Bildern und Buttons werden vermieden!)
Die Diashow kann linksseitig oder zentriert dargestellt werden!
Die Diashow kann beliebig oft in einem Thema eingesetzt werden, ohne eine zusätzliche Nummerierung!
Neu! Die Höhe der Diashow kann jetzt eingestellt werden. Ein Springen der Bilder wird dadurch vermieden!

Die multiple Diashow in Aktion (Bitte klicken!):

Installation für alle Templates & Mobil

Zur Übersicht das HTML-Script

Die neuen Foren-Codes

Einbau in die Iconbar

Einbau HTML-Skript

Auch hier nachzulesen: w3schools.com - Slideshow

Bis dann und gutes Gelingen

Wolfgang

Dankesch�n findet das Top!

Antworten

Moderations-Kommentar:

Anleitung und Skript überarbeitet!
Höheneinstellung der Bilder hinzugekommen!
Fehler in den Foren-Codes behoben!

#8 | RE: Diashow und angehängte Bilder in Beiträgen modifizieren! datum

24.07.2024 10:32 (zuletzt bearbeitet: 24.07.2024 10:53)

Diashow und Bilder unter "Datei anhängen" in Beiträgen modifizieren!

@Daishi

Zitat von Wolfgang im Beitrag #6
Diashow und Bilder unter "Datei anhängen" in Beiträgen modifizieren!

Update notwendig!Der Beitrag ist bereits in die Jahre gekommen (Jan 2020), Xobor hat mit den Templates und Bildansichten ein Übriges getan!
Hier werden kleine Bilder in den Template "Gaia, ProSilver und Standard" nicht zu Xobor-Vollansicht gebracht.
Hinzu kommt noch, dass sich ein Fehler im Skript eingeschlichen hat, so dass nur im ersten Beitrag alles funktioniert hat!
Ein Update war somit längst überfällig!!!

Mit dem neuen Update sind jetzt die Funktionen in allen Templates verfügbar!
In Premium-Foren wird noch zusätzlich die "Xobor-Lightbox" in den Beitragsanhängen angepasst und modifiziert!
Im Xobor (v6) ist "Xobor-Lightbox" nur in der großen Bildansicht verfügbar!
Die Reduzierung auf ein Bild in "Bildanhänge" kann auch im Xobor (v6) von Vorteil sein!

Was kann das Skript?

Die angehängten Bilder werden bis auf ein Bild ausgeblendet (Übersichtlich und alles klein gehalten)!
Es wird ein Bild-Button (Alle Bilder zeigen) zusätzlich eingeblendet!
Der Bild-Button und der Diashow-Button (Premium) wird ab 2 angehängten Bildern automatisch eingeblendet!
Die Höhe der Vorschaubilder ist relativ klein und einheitlich gehalten, lässt sich beliebig einstellen!
Selbst kleine Bilder, wie Icons, werden noch gut und übersichtlich angezeigt!
Mit einem Klick werden die Bilder in die Vollansicht gebracht!
Für eine große Anzahl von Bildanhängen wird nach dem Öffnen und Schließen immer in Lesehöhe gescrollt!
Für jedes Template gibt es ein eigenes Skript!

Update für Beitrag #6:
Linke Grafik anklicken!

Alles in Beitrag #6 nachgetragen!

Bis dann und besten Dank an Daishi für den Fehler-Hinweis!
Wolfgang

Dankesch�n findet das Top!

Antworten

#9 | RE: Diashow und angehängte Bilder in Beiträgen modifizieren! datum

15.03.2025 22:27 (zuletzt bearbeitet: 15.03.2025 22:40)

Hilfe, ich steig durch diese Kette von Beiträgen leider nicht durch.... ! ¯\_(ツ)_/¯

Beitrag #8 ist ein Update ohne Skript, oder?
Und am Ende erscheint meist eine weiße Lücke, aber manchmal folgendes Bild.

Wenn ich wie empfohlen ("Hier geht es zum Beitrag") links auf "Forum" klicke werde ich zurück zu Beitrag #1 von ursprünglich 2009 geschickt,
und - nicht lachen (oder doch) -
jetzt bin ich diese Zeitschleife 3mal durchlaufen...
und spring lieber aus dem Hamsterrad raus und frag mal...!

Die neuesten Beiträge auf meinem Naturforum...

Wolfgang findet das Top!

Antworten

#10 | Fehlersuche: Diashow und angehängte Bilder in Beiträgen modifizieren! datum

17.03.2025 18:59

Fehlersuche: Diashow und angehängte Bilder in Beiträgen modifizieren!

Hallo Jan

Hier sind wohl mehrere Fehlern im verlinkten Hinweis zusammengekommen.
Der verlinkte Hinweis soll etwas Besonderes sein, auffällig, mit viel Effekten!

1. Die Verlinkung zu Beitrag #6 stimmte nicht!
2. Außerdem sollte die große Linkanimation beim Sprung zurück oder beim Scrollen wieder angezeigt werden!
3. Alle Fehler sind jetzt behoben...

Hier geht es zum Update
Diashow und angehängte Bilder modifizieren
Beitrag #6
Bitte, linke Grafik anklicken!

Hier geht es zum Update
Animierter Hinweis mit variabler Eingabe
Beitrag #2
Bitte, linke Grafik anklicken!

Bis dann und mal wieder besten Dank fürs Testen und fürs Feedback!
Wolfgang

Dankesch�n findet das Top!

Antworten

Forum, Homepage oder Webseite bekannter machen - H1 Überschriften - Fehlerhafte Foren-Codes! � � Animierte Grüße unter der Navigation - Animiertes Plakat

Seite 1 von 4 � Seite 1 2 3 4 Seite �

�hnliche Themen

Antworten

Letzter Beitrag

Layout für Bilderkommentare anpassen und verbessern - Mit Mouseover-Effekt - Nur V4
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

11.09.2025 10:40
von

Dankeschön • Zugriffe: 211

Kurze Videoclips als MP4-Dateien & animierte GIF's per Mouseover - Neue Video-Button!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Dankeschön

28.10.2025 12:02
von

Dankeschön • Zugriffe: 2375

Admin-Blog-Einstellungen: Titel ✅, Beschreibung ✅, Titelbild ❌?
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Dankeschön

Gestern 17:44
von

Dankeschön • Zugriffe: 844

Im Benutzer-Blog sieht man nur 15 Einträge?
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Dankeschön 1 Gestern 23:56
Dankeschön • Zugriffe: 333

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

05.04.2025 19:27
von

Dankeschön • Zugriffe: 1323

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

Navi-Leiste: "Background" per "mouseover" verändern!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

25.10.2014 09:10
von

Wolfgang • Zugriffe: 1378

Bilder vergrößern per "Mouseover", mittels "CSS" oder "Tooltipps"
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

18.01.2020 17:44
von

Wolfgang • Zugriffe: 20831

Diashow mit wechselnder Laufrichtung
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 1 27.04.2011 12:14
Wolfgang • Zugriffe: 3194

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages �

Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! � Bilderpräsentation per Mouseover, per Mausklick, Modal oder per Diashow in Beiträgen und im Blog!

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: 45 €

93%