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

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	1095

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

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	1095

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

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	1095

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

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	1095

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

31.01.2020 18:40 (zuletzt bearbeitet: 21.10.2022 16:20)

Wolfgang

Administrator

Informationen anzeigen

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

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	1095

Diashow für angehängte Bilder modifizieren!
Aktualisiert 21.10.20

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!
Hat man ein Forum mit "Premium-Tarif", kann man in Beiträgen die angehängten Bilder 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!
Die "Lightbox" wird mit Abschluss eines Premium-Tarifs in den Beiträgen aktiviert! Sie hat so keine weiteren Einstellmöglichkeiten!

Mit dem folgenden Beitrag stehen folgende Optionen für die "Lightbox in Beiträgen" zur Verfügung!

Die angehängten Bilder werden bis auf ein Vorschaubild ausgeblendet!
Es kommt ein Bild-Button für die sofortige Ansicht aller Bilder hinzu!
Der Diashow-Button und Bild-Button werden automatisch bei mehr als 2 angehängten Bilder 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 Schrift- und Hintergrundfarbe passt sich durch Variablen automatisch dem Design an!
Die Beschriftungen der Bilder sind verlinkt und werden nach einem Klick in Originalgröße angezeigt!
Wichtig! Das Template wird nicht verändert!

Installation nur für die Templates v1-4

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

Schlie�en

Die angehängten Bilder sind ausgeblendet und werden nur durch ein Vorschaubild in angenehmer Größe angekündigt!
Es gibt ein Button, der zur Diashow führt und ein Button, der alle Bilder auf einmal zeigt!

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!
Die Bildverlinkung führt zum Originalbild!

Schlie�en

Das Skript wird am besten als Plugin in den "topic_footer" kopiert!
Es funktioniert aber auch in der "Fußzeile", nur müssen hier evtl. die Farben in Zeile 3, 5 + 7 angepasst werden!
In Zeile 2+4 wird die Größe der Vorschaubilder bestimmt! Wird die Höhe verändert, müssen die Werte für "height" in Zeile 2 + 4 um ca. 30px auseinanderliegen (Bildbeschreibung)!
In Zeile 13 kann die Schrift in der Diashow angepasst werden!
Durch Zeile 14-17 werden große Bilder in der Diashow auf Bildschirmhöhe und Bildschirmbreite begrenzt!

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
 
<style>
.mimagewrap {border:none;height:185px;min-width:90px;margin-bottom:10px;}
.mimagewrap div {background: #383838; background-color:{{global_box_header_background}};border-radius:0 0 5px 5px;}
.mimagewrap img{max-width:150px;max-height:155px;border-radius:5px 5px 0 0;}
.mimagewrap a {color: #eeeeee; color:{{global_header_fontcolor}} !important;font-size:13px;}
 
.mlb a{color: #222222; text-decoration:none; color:{{global_text_fontcolor}};font-weight:bold;}
  
#bildershow {font-weight:bold;cursor:pointer;}
#bildershow:hover {text-decoration:underline;}
#bildershow img, #bildershowimg{width:40px;margin-left:9px;}
 
#lightbox-image-details-currentNumber {font-weight:bold !important;font-size:15px;padding-top:12px;}
#lightbox-container-image-box img{max-width:60%;height:auto !important}
#lightbox-container-image-box {max-width:95%; height:auto !important;}
#lightbox-container-image-data-box {max-width:94%;background:#aaaaaa;}
#lightbox-nav-btnNext, #lightbox-nav-btnPrev {height:100% !important;}
#lightbox-secNav-btnClose {padding-top:10px 10px 0 0;}
#jquery-lightbox {overflow:hidden; position:fixed; top:100px !important;}
#jquery-overlay {position:fixed;}
</style>
 

<script>
$('.mlb a:first').prepend('<br><br><img id="bildershowimg" src="//files.homepagemodules.de/b104774/a_252_6de31f91.png">').after('<span id="bildershow"><img src="//files.homepagemodules.de/b104774/a_252_6de31f91.png"><span id="showtext">Alle Bilder zeigen</span></span>');
 
$('.mimagewrap').hide();
$('.mimagewrap:first').show();
 
$('#bildershow').click(function(){
$('.mimagewrap').toggle();
$('.mimagewrap:first').show();
});
 
$('#bildershow').toggle(function(){
$('#showtext').html('Zurück')
},function(){
$('#showtext').html('Alle Bilder zeigen')
});
 
</script>
 

  • Hier werden die Bilder auf maximale Breite dargestellt!
  • Bei vertikalen Bildern, muss allerdings gescrollt werden!
  • Der Einfachheit halber, braucht nur der komplette Style-Eintrag ausgetauscht werden!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<style>
.mimagewrap {border:none;height:180px;min-width:90px;margin-bottom:10px;}
.mimagewrap div {background: #383838; background-color:{{global_box_header_background}};border-radius:0 0 5px 5px;}
.mimagewrap img{max-width:150px;max-height:150px;border-radius:5px 5px 0 0;}
.mimagewrap a {color: #eeeeee; color:{{global_header_fontcolor}} !important;font-size:13px;font-weight:bold;}
 
.mlb {position:absolute;left:10px;margin-top:200px;}
.mlb a{color: #222222; text-decoration:none; color:{{global_text_fontcolor}};}
  
#bildershow {font-weight:bold;cursor:pointer;}
#bildershow:hover {text-decoration:underline;}
#bildershow img, #bildershowimg{width:40px;margin-left:9px;}
 
#lightbox-image-details-currentNumber {font-weight:bold !important;font-size:15px;padding-top:12px;}
#lightbox-container-image-data-box {background:#aaaaaa;}
#lightbox-nav-btnNext, #lightbox-nav-btnPrev {height:100% !important;}
#lightbox-image, #lightbox-container-image-box, #lightbox-container-image-data-box {max-width: 100%; height: auto !important;}
#lightbox-secNav-btnClose {padding:10px 10px 0 0;}
#jquery-lightbox {overflow:hidden;}
</style>
 

Schlie�en

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

#7 | Multiple Diashow in Beiträgen! datum

20.02.2020 07:37 (zuletzt bearbeitet: 15.10.2023 15:57)

Wolfgang

Administrator

Informationen anzeigen

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

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	1095

Multiple Diashow in Beiträgen!
Aktualisiert 28.09.23

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

#8 | Update: Multiple Diashow in Beiträgen! datum

28.09.2023 17:13

Update: Multiple Diashow in Beiträgen!

Diashow komplett überarbeitet, Classes und ID's so angepasst, dass sie sich mit anderen Skripten nicht stören!
Foren-Codes vereinfacht und neu angelegt!
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!

Viel Spaß
Wolfgang

Antworten

Neuer Foren-Code: Formularfelder mit "fieldset" und "legend"! � � Kleine Quasselbox fürs Forum

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

Bilder aus "Datei anhängen" mit einem Klick öffnen & schließen! - Für alle Templates! - Teil 1-4
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang

29.08.2020 19:05
von

Wolfgang • Zugriffe: 2101

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

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

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

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

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

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 €

141%