Bilderpräsentation per Mouseover, per Mausklick, Modal oder per Diashow!

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!

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 | Bilderpräsentation per Mouseover, per Mausklick, Modal oder per Diashow! 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:	3379
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

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

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:	3379
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

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

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: 28.09.2023 07:12)

Wolfgang

Administrator

Informationen anzeigen

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

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

Bilder "Modal" anzeigen!
Aktualisiert 20.10.22

  • 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!
  • Bilder, die "modal" dargestellt werden, brauchen nur die class="myImgModal" enthalten!

Ohne Bild-Beschreibung (Bitte anklicken!):

Mit Bild-Beschreibung (Bitte anklicken!):

Bild 1

Bild 2

Bild 3

Installation für alle Templates & Mobil

  • Bilder, die "modal" dargestellt werden sollen, brauchen nur die class="myImgModal" enthalten!
  • 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>
.myImgModal {border-radius: 5px;cursor: pointer;}
.myImgModal: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;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);}
#imgAll {display: block; margin: auto; height:auto !important; max-height:85%; max-width: 90% !important; cursor:pointer;}
#caption {font-size:110%;margin: auto;text-align: center;color: #cccccc;padding-top:5px;}
 
dl.bildmodal {display: inline-block; text-align:center;margin:0px;padding:4px;}
dl.bildmodal dd {background:#222222;font-size:85%;max-width:600px;display: inline-block; margin:3px 0 0 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="bildmodal"><img class="myImgModal" src="https://files.homepagemodules.de/b104774/a_90_e58e22da.jpg" style="width:200px" data="<center><dl class='bildmodal'><dd>Beschreibung 1.2</dd></dl></center>"><p><dd>Beschreibung 1.1</dd></p></dl>
<dl class="bildmodal"><img class="myImgModal" src="https://files.homepagemodules.de/b104774/a_88_6c273500.jpg" style="width:200px" data="<center><dl class='bildmodal'><dd>Beschreibung 2.2</dd></dl></center>"><p><dd>Beschreibung 2.1</dd></p></dl>
<br>
<img class="myImgModal" src="https://files.homepagemodules.de/b104774/a_90_e58e22da.jpg" style="width:200px">
<img class="myImgModal" src="https://files.homepagemodules.de/b104774/a_88_6c273500.jpg" style="width:200px">
 
<div id="myModal">
<div id="closeImg" title="Schließen!">&times;</div>
<img id="imgAll">
<div id="caption"></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(){
  $('.myImgModal').on('click',function(){
    $('#myModal').fadeIn(500).on('click',function(){$(this).hide(500);});
    $('#imgAll').attr('src', $(this).attr('src'));
    $('#caption').html($(this).attr('data'));
  });
});
</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={{width}}] ... [/img]
 
Mit:
<dl class="bildmodal"><img  class="myImgModal" style="width:{{width}} !important;border:0;" src=" ... "></dl>
 

Mit Bild-Beschreibung:

1
2
3
4
5
 
Ersetze:
[img_modal={{breite}} {{data}}] ... [/img]
 
Mit:
<dl class="bildmodal"><img class="myImgModal" style="width:{{breite}} !important;border:0;" data="<center><dl class='bildmodal'><dd>{{data}}</dd></dl></center>" src=" ... "><p><dd>{{data}}</dd></p></dl>
 

Schlie�en

Das Skript und der CSS-Eintrag kann in die "Fußzeile" oder am besten als PIugin 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>
.myImgModal {border-radius: 5px;cursor: pointer;}
.myImgModal: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;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);}
#imgAll {display: block; margin: auto; height:auto !important; max-height:85%; max-width: 90% !important; cursor:pointer;}
#caption {font-size:110%;margin: auto;text-align: center;color: #cccccc;padding-top:5px;}
 
dl.bildmodal {display: table-cell;text-align:center;margin:0px;padding:4px;}
dl.bildmodal dd {font-size:85%;max-width: 600px;display: inline-block; margin:0px;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="myModal">
<div id="closeImg">&times;</div>
<img id="imgAll">
<div id="caption"></div>
</div>
 
<script>
window.addEventListener('load', function(){
  $('.myImgModal').on('click',function(){
    $('#myModal').show(500).on('click',function(){$('#myModal,#caption').hide(500);});
    $('#imgAll').attr('src', $(this).attr('src'));
    $('#caption').html($(this).attr('data')).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=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=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 Anzeige-Größe von 200px aussehen!

Ohne Bild-Beschreibung:

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

Mit Bild-Beschreibung:

1
 
[img_modal=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

#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:	3379
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

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

"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 PIugin 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: 24.07.2024 08:29)

Wolfgang

Administrator

Informationen anzeigen

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

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

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 - Noch nicht für alle Templates verfügbar!

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! datum

20.02.2020 07:37 (zuletzt bearbeitet: 31.05.2024 18:07)

Wolfgang

Administrator

Informationen anzeigen

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

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

Multiple Diashow in Beiträgen!
Aktualisiert 31.05.24

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!

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!

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 auf nachzulesen: w3schools.com - Slideshow

Bis dann und gutes Gelingen

Wolfgang

Antworten

Moderations-Kommentar:

Anleitung überarbeitet

#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!

Hier geht es zum Beitrag:
Linke Grafik anklicken!

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

Antworten

Idee und Inspiration mit Vorstellung der Scripte - Vorlagen �

�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: 958

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

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

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

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

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

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 €

58%