Forum - Bilder drehen - In der Bildergalerie & In Beiträgen

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 »

Das neue Template Xobor (v6). » Bilder drehen - In der Bildergalerie & In Beiträgen - 2 Teile

Themen-Einstellungen

Thema drucken

Bereich wechseln

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

#1 | Bilder drehen - In der Bildergalerie & In Beiträgen - 2 Teile datum

25.12.2020 09:43 (zuletzt bearbeitet: 14.05.2023 06:17)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3865
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1707

Bilder drehen - In der Bildergalerie - Teil 1(2)

Aktualisiert 21.07.2025

In der Administration unter "Admin > Forum Einstellungen > Angehängte Dateien automatisch drehen" können Bilder automatisch gedreht werden, wenn die "Exif-Daten" eines Bildes nicht fehlerhaft sind und es erlauben!
Es kann aber vorkommen, dass diese Bilder trotz allem verdreht angezeigt werden!

Mit dem folgenden Beitrag ist es möglich Bilder in der Bildergalerie manuell um 90° zu drehen.

Installation für alle Templates & Mobil

Schließen

Das Skript muss wegen der Variablen als Plugin in den "Bildergalerie - Bild anzeigen / footer" angelegt werden!
Wichtig! Im Plugin muss dann rechts oben das "Unterstützte Template" markiert werden, z.B. Business - Template (144), Auswahl mit Mausklick oder Strg + Mausklick!

In Zeile 4-30 werden Schriftgröße und Position vom Drehbutton und Counter eingestellt und korrigiert!
Durch Zeile 35-42 wird der Button eingefügt. Am Ende der Zeile, kann die Button-Beschriftung "Drehen" angepasst werden!
In Zeile 46 wird das Bild beginnend jeweils um 45 Grad nach links gedreht, erreicht in Zeile 58, 315 Grad.
in Zeile 60 wird das Bild wieder zurückgedreht und erreicht den Ausgangszustand!
Auch der Abstand zum oberen und unteren Rand wird hier eingestellt.

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
 
{{template==144|111|110|1.start}}
 
<style>
  .buttonRot {cursor: pointer; z-index: 999999 !important; white-space: nowrap;}
  .buttonRot:hover small {text-decoration: underline; }
  .buttonRot img {border: none; vertical-align: middle; padding-right: 3px; z-index: 999999 !important;}
 
  /* (v1, v2, v3, v4) */
  .tbhi .hitcounter {bottom:-20px !important;}
  .tbhi .buttonRot small{font-size:11.5px !important;}
  
  .tbhi #galnavcont, #PhotoContainer #galnavcont, .gallpic div:first-child {display:inline-block; height: 62vh !important; max-width:800px !important;}
  .tbhi #PicMainCont, #PhotoContainer #PicMainCont, .gallpic.loader {max-width:800px !important; height:62vh !important; background-size: contain !important; border: none !important;}
 
  /* ProSilver (v2) */
  .inner .hitcounter {background:#eeeeee;padding:2px 5px;}
  .inner .buttonRot small{font-size:12px !important;font-weight:bold;}
  .inner .buttonRot img {margin-top: -4px;}
  
  .inner #PicMainCont div:first-child {height:800px !important; max-width:800px !important;}
  .inner #PicMainCont {max-width:800px !important; max-height:800px !important; background-size: contain !important; border: none !important;}
  
  /* Gaia (v3) */
  #PhotoContainer .buttonRot a {text-decoration: none;}
  #PhotoContainer .buttonRot a:hover {text-decoration: underline !important;}
 
  /* Business-Template (v4) */
  .page_gallery_viewpic .buttonRot {position:absolute; top: 4px; right:0; left:0;}
  .page_gallery_viewpic .buttonRot img { width: 25px;}
  .gpicutre_wrap {border-radius: 6px 6px 1px 1px !important;}
</style>
 
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Nur Business (v4)
  $('.page_gallery_viewpic .gallpic').before('<span class="buttonRot"><img src="//files.homepagemodules.de/b104774/a_385_24b6a0f6.png"><small>Drehen</small></span>');
  // Nur Gaia (v3)
  $('#PhotoContainer td:first').prepend('<span class="buttonRot"><a href="#"><img src="https://files.homepagemodules.de/b2001010/a_231.png"><small>Drehen</small></a></span>');
  // Nur ProSilver (v2)
  $('.inner td:nth-child(2) a:nth-child(2)').before('<span class="buttonRot"><a href="#"><img src="https://files.homepagemodules.de/b2001010/a_231.png"><small>Drehen</small></a> | </span>');
  // Nur Standard (v1)
  $('.tbhi #nav_picture').before('<td><span class="buttonRot"><a href="#"><img src="https://files.homepagemodules.de/b2001010/a_231.png"><small>Drehen</small></a></span><td>');
 
  
  $('.buttonRot').toggle(function(){
    $('.tbhi #PicMainCont, .inner #PicMainCont,.Photo #PicMainCont,.page_gallery_viewpic .gallpic').css({'margin-top':'200px','margin-bottom':'200px','-webkit-transform': 'rotate(45deg)', '-moz-transform': 'rotate(45deg)', '-ms-transform': 'rotate(45deg)', 'transform': 'rotate(45deg)'}).find('div').hide();
  }, function(){
    $('.tbhi #PicMainCont, .inner #PicMainCont,.Photo #PicMainCont,.page_gallery_viewpic .gallpic').css({'margin-top':'150px','margin-bottom':'150px','-webkit-transform': 'rotate(90deg)', '-moz-transform': 'rotate(90deg)', '-ms-transform': 'rotate(90deg)', 'transform': 'rotate(90deg)'});
  }, function(){
    $('.tbhi #PicMainCont, .inner #PicMainCont,.Photo #PicMainCont,.page_gallery_viewpic .gallpic').css({'margin-top':'220px','margin-bottom':'220px','-webkit-transform': 'rotate(135deg)', '-moz-transform': 'rotate(135deg)', '-ms-transform': 'rotate(135deg)', 'transform': 'rotate(135deg)'});
  }, function(){
    $('.tbhi #PicMainCont, .inner #PicMainCont,.Photo #PicMainCont,.page_gallery_viewpic .gallpic').css({'margin-top':'20px','margin-bottom':'20px','-webkit-transform': 'rotate(180deg)', '-moz-transform': 'rotate(180deg)', '-ms-transform': 'rotate(180deg)', 'transform': 'rotate(180deg)'});
  }, function(){
    $('.tbhi #PicMainCont, .inner #PicMainCont,.Photo #PicMainCont,.page_gallery_viewpic .gallpic').css({'margin-top':'220px','margin-bottom':'220px','-webkit-transform': 'rotate(225deg)', '-moz-transform': 'rotate(225deg)', '-ms-transform': 'rotate(225deg)', 'transform': 'rotate(225deg)'});
  }, function(){
    $('.tbhi #PicMainCont, .inner #PicMainCont,.Photo #PicMainCont,.page_gallery_viewpic .gallpic').css({'margin-top':'170px','margin-bottom':'170px','-webkit-transform': 'rotate(270deg)', '-moz-transform': 'rotate(270deg)', '-ms-transform': 'rotate(270deg)', 'transform': 'rotate(270deg)'});
  }, function(){
    $('.tbhi #PicMainCont, .inner #PicMainCont,.Photo #PicMainCont,.page_gallery_viewpic .gallpic').css({'margin-top':'220px','margin-bottom':'220px','-webkit-transform': 'rotate(315deg)', '-moz-transform': 'rotate(315deg)', '-ms-transform': 'rotate(315deg)', 'transform': 'rotate(315deg)'});
  }, function(){
    $('.tbhi #PicMainCont, .inner #PicMainCont,.Photo #PicMainCont,.page_gallery_viewpic .gallpic').css({'margin-top':'5px','margin-bottom':'20px','-webkit-transform': 'rotate(0deg)', '-moz-transform': 'rotate(0deg)', '-ms-transform': 'rotate(0deg)', 'transform': 'rotate(0deg)'}).find('div').show();
  });
});
</script>
 
{{template==144|111|110|1.end}}
 

Schließen

Das Skript muss wegen der Variablen als Plugin in den "Bildergalerie - Bild anzeigen / footer" angelegt werden!
Wichtig! Im Plugin muss dann rechts oben das "Unterstützte Template" markiert werden, z.B. Business - Template (177), Auswahl mit Mausklick oder Strg + Mausklick!

In Zeile 4-15 werden Schriftgröße, Hintergrund und Position vom Drehbutton eingestellt!
In Zeile 12-15 speziell für mobile Endgeräte!
Durch Zeile 30 wird der Button eingefügt. Am Ende der Zeile, kann die Button-Beschriftung "Drehen" geändert werden!
In Zeile 17-23 und 35-41 wird das Bild jeweils um 45 Grad linksherum gedreht.
Auch der Abstand zum oberen und unteren Rand wird hier eingestellt.

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
 
{{template==177.start}}
 
<style>
  .buttonRot { margin: 0 auto -35px auto ; padding: 20px; z-index:999999; white-space:nowrap;  }
  .buttonRot a:hover { text-decoration: underline; }
  .buttonRot a { width:100px !important;}
  .buttonRot img { border: none; margin: 0 3px 0 0; }
  .buttonRot small { font-size:12px !important; background:#eeeeee; padding:1px 5px; border-radius:4px; }
  .ekko-lightbox .modal-header .close { z-index:999999; }
  .ekko-lightbox-item img {margin-top:10px; object-fit: cover;}
 
  @media all and (max-device-width: 767px) {
    .ekko-lightbox-nav-overlay {display:none !important;}
    .ekko-lightbox-item img {padding-bottom:0px !important;}
  }
 
  .rotate315 { padding-top:10%; padding-bottom:10%; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); -ms-transform: rotate(-315deg); transform: rotate(-315deg); }
  .rotate270 {  padding-top:10%; padding-bottom:10%;  -webkit-transform: rotate(-270deg); -moz-transform: rotate(-270deg); -ms-transform: rotate(-270deg); transform: rotate(-270deg); }
  .rotate225 { padding-top:10%; padding-bottom:10%; -webkit-transform: rotate(-225deg); -moz-transform: rotate(-225deg); -ms-transform: rotate(-225deg); transform: rotate(-225deg); }
  .rotate180 { padding-top:0%; padding-bottom:0%;  -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); }
  .rotate135 { padding-top:10%; padding-bottom:10%; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); }
  .rotate90 { padding-top:10%; padding-bottom:10%; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); }
  .rotate45 { padding-top:10%; padding-bottom:10%; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
</style>
 
<script>
window.addEventListener('load', function() {
  // Button setzen
  $(window).on('shown.bs.modal', function() {
    $('.ekko-lightbox .modal-content .close').before('<span class="buttonRot"><a href="#modal"><img src="https://files.homepagemodules.de/b2001010/a_231.png"><small>Drehen</small></a></span>');
  });
  // Bild drehen
  $(document.body).on('click', ".buttonRot", function(e) {
    e.preventDefault();
    $('.ekko-lightbox-item img').toggleClass('rotate315');
    $('.rotate315').toggleClass('rotate270');
    $('.rotate270').toggleClass('rotate225');
    $('.rotate225').toggleClass('rotate180');
    $('.rotate180').toggleClass('rotate135');
    $('.rotate135').toggleClass('rotate90');
    $('.rotate90').toggleClass('rotate45');
  });
});
</script>
 
{{template==177.end}}
 

Schließen

Hilfreiche Links:

Bis dann, viel Geduld und Erfolg beim Umsetzen!
Besten Dank an creator für seine super Unterstützung!

Wolfgang

Antworten

Moderations-Kommentar:

Beitrag überarbeitet!
Classes im V6 haben sich geändert, mussten im Skript angepasst werden!

#2 | Bilder in Beiträgen ohne Foren-Code drehen - Mit und ohne Bildbeschreibung - Teil 2 datum

10.02.2021 23:57 (zuletzt bearbeitet: 10.03.2021 14:19)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3865
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1707

Bilder in Beiträgen ohne Foren-Code drehen - Mit und ohne Bildbeschreibung - Teil 2

Aktualisiert 28.07.25

InfoUnter "Admin > Forum Einstellungen > Angehängte Dateien automatisch drehen" können Bilder automatisch gedreht werden, wenn die "Exif-Daten" eines Bildes nicht fehlerhaft sind und es erlauben!
Es kann aber vorkommen, dass diese Bilder trotz allem verdreht angezeigt werden!

Was kann das folgende Skript?Mit dem folgenden Skript können über eine Mouseover-Button-Leiste in der Vorschau und im Modal-Modus Bilder in den Beiträgen um jeweils 45° gedreht, die Drehung zurückgesetzt, stufenweise vergrößert und in voller Größe angezeigt werden!
Es können Upload-Bilder und IMG-Bilder mit und ohne Bildbeschreibung eingesetzt werden!

Upload-Bilder können auch ohne Foren-Code genutzt werden und verfügen über alle Funktionen, bis auf die Beschreibung!

Modal steht auch eine Buttonleiste mit Drehung und maximalem Vollbild zur Verfügung!
Bilder lassen sich nebeneinander darstellen
Überlappen sich Bilder, ist das aktive Bild ist immer oben!
Die Bildbeschreibung hat einen Überlauf.
Überlange Texte werden mit 3 Punkten abgeschlossen und erkannt.
Ein Klick auf die Beschreibung ermöglicht den gesamten Text zu lesen!
Auch der Textfluss right + left wird erkannt und berücksichtigt!
Störende Linksymbole werden automatisch ausgeblendet.
Optional kann die Buttonleiste in der Vorschau ausgeblendet werden!

Installation für alle Templates + Mobil

Wichtig!Alle vorhanden Installationen zum "Drehbutton in Beiträgen " müssen überschrieben oder gelöscht werden, dürfen nicht doppelt eingetragen sein!

Vorschaubild mit Bildbeschreibung:

Foren-Code:

[Img_Text=Schrauben mit Bildbeschreibung und 400px Breite][[File:2.png|none|400px|400px]] [/Img_Text]

oder

[Img_Text=Schrauben mit Bildbeschreibung und 400px Breite][img=400px=auto]https://files.homepagemodules.de/b104774/pictures_u619_uixnzKCs.jpg[/img] [/Img_Text]

Vorschaubild mit Bildbeschreibung und Buttonleiste:

Foren-Code:

[Img_Text=Vorschaubild mit Bildbeschreibung, Buttonleiste und 450px Breite][[File:1.png|none|450px|450px]] [/Img_Text]

oder

[Img_Text=Vorschaubild mit Bildbeschreibung, Buttonleiste und 450px Breite][img=450px=auto]https://files.homepagemodules.de/b104774/pictures_u619_uixnzKCs.jpg[/img] [/Img_Text]

Vorschaubild mit geöffneter Bildbeschreibung:

Foren-Code:

[Img_Text=Schrauben mit geöffneter Bildbeschreibung und 500px Breite] [[File:4.png|none|500px|500px]] [/Img_Text]

oder

[Img_Text=Schrauben mit geöffneter Bildbeschreibung und 500px Breite] [img=500px=auto]https://files.homepagemodules.de/b104774/pictures_u619_uixnzKCs.jpg[/img] [/Img_Text]

Modalmodus mit Buttonleiste:

Foren-Code:

[Img_Text=Modalmodus mit Buttonleiste allen Optionen] [[File:5.png|none|500px|500px]] [/Img_Text]

oder

[Img_Text=Modalmodus mit Buttonleiste allen Optionen] [img=500px=auto]https://files.homepagemodules.de/b104774/pictures_u619_uixnzKCs.jpg[/img] [/Img_Text]

Schließen

Der Forencode wird unter "Admin > Layout > Iconbar > Iconbar bearbeiten > Foren-Code " eingetragen.
Forum-Code umsetzen unter "Foren-Code" und "Ersetze:" und Mit:"
Es ist darauf zu achten, dass der erweiterte Foren-Code einblendet ist!

1. Für Bilder ohne Bildbeschreibung:

Ersetze:

1
 
[Img_Text]

1
 
 ...

1
 
[/Img_Text]

Mit:

1
 
<div class="Img_TextModal_2"><div class="clickModal_2" style="display:none;"><a class="xembedded"><img class="img-responsive img-fluid" style="border:none;"></a></div><dl class="clickin_2">

1
 
...

1
 
<dd>&nbsp;</dd></dl></div>

2. Für Bilder mit Bildbeschreibung:

Ersetze:

1
 
[Img_Text={{text}}]

1
 
 ...

1
 
[/Img_Text]

Mit:

1
 
<div class="Img_TextModal_2"><div class="clickModal_2" style="display:none;"><a class="xembedded"><img class="img-responsive img-fluid" style="border:none;"></a><center><h5 class="clicktextmo_2">{{text}} <span class="clickcloseSp_2" title="Text schließen">&times;</span></h5></center></div><dl class="clickin_2">

1
 
 ...

1
 
<center><dd class="clicktext_2" title="Gesamten Text öffnen & schließen" style="display:none;">{{text}}</dd></center></dl></div>

3. Für externe Bilder mit Einstellung der Bildgröße:

Ersetze:

1
 
[img={{breite}}={{hoehe}}]

1
 
 ...

1
 
[/img]

Mit:

1
 
<dl style="display: inline-block;"><img style="width:{{breite}}; height:{{hoehe}}; object-fit: scale-down;" src="

1
 
 ...

1
 
"></dl>

Grafik:

1
 
//img.homepagemodules.de/ds/static/gaia/picture.png

Weitere Einstellungen > Reihenfolge:

1
 
0

Schließen

Das Skript und der CSS-Eintrag wird als Plugin in "Untere Leiste - header" kopiert!
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)!
In Zeile 29+30 wird das Aussehen der Vorschau-Buttonleiste eingestellt!
In Zeile 48 wird die Vorschau-Buttonleiste erzeugt. Die Titel der Button können hier angepasst werden!
In Zeile 66, 130 wird das Bild jeweils um 45 Grad linksherum gedreht.
In Zeile 85 wird die schriftweise Vergrößerung bestimmt (hier 100px ), in Zeile 97 die schrittweise Verkleinerung!
In Zeile 112+113 werden die Div-Container ausgeblendet, die im Modal-Modus gesehen werden (nur V4)!
Die weiteren Skriptzeile sind mit Überschriften versehen, um ihre Funktion zu beschreiben!

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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
 
<!-- Bilder in Beiträgen drehen -->
<style>
  .Img_TextModal_2 {display:inline; clear:both;}
  .Img_TextModal_2 a {padding-top:0px !important; padding-bottom:0px !important;}
  .Img_TextModal_2 img, .xembedded img {object-fit: scale-down; margin:0; border:1px  solid transparent !important;}
  .Img_TextModal_2 img:hover, .xembedded img:hover {opacity: 0.7; border: 1px solid #000000 !important;}
  
  .clickModal_2  {position: fixed; left: 0; top:0; width: 100% !important; height: 100% !important; overflow-y:auto !important;background: #000000 !important; cursor:pointer; z-index:999;}
  .clickModal_2 img {object-fit: scale-down; position:absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; text-align: center; max-height: 80vh !important; max-width:85vw !important; border-radius:9px;opacity: 1.0 !important; border:none !important; border-radius:9px; cursor:pointer; z-index:99998; } 
  .clickModal_2.xembedded .clickcloseImg_2 {margin-right: 40px;}
  
  .clickcloseImg_2 {position:absolute; right:0; color: #f1f1f1; font: bold 40px Arial; background:#000000; margin:auto; padding:20px 30px; border-radius:0 0 0 100%; z-index:9999;}
  .clickcloseImg_2:hover, .clickcloseSp_2:hover {color: #ff8000; text-decoration: none;}
  .clickcloseSp_2 {position:absolute; right:0; top:0; color: #f1f1f1; font: bold 20px Arial; background:#000000; margin:auto; padding:0 5px 5px 10px; border-radius:0 0 0 75%; z-index:9999;}
  
  .clicktext_2 {display:inline-block; min-width:100px; width: 54vw; background:#eeeeee; font: bold 12px Arial; color:#383838 !important; line-height:17px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; margin:3px auto; padding:5px 10px; border: none; border-radius:3px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
  .clicktext_2:hover, .clicktextmo_2:hover {background:#222222 !important; color: #eeeeee !important; cursor:pointer;}
  .clicktextclick_2 {background:#222222; color: #eeeeee !important; max-height:200px; font-size:95%; white-space:normal; overflow:auto; text-align:left !important; margin:3px auto; border:1px solid #383838;}
  .clicktextmo_2 {position: absolute; overflow:auto; max-height:200px; max-width:80%; bottom: 1%; left: 50%; transform: translate(-50%); text-align:left; background:#eeeeee; color:#383838 !important; font-size:105%; margin:10px auto; padding:5px 30px 5px 10px; border-radius:4px; z-index:999999;}
  
  .clickin_2 {display: table-cell; left:2% !important;}
  .clickin_2 a  {padding: 0 !important;}
  .clickin_2 img {cursor:pointer;}
  
   a.xembedded, a.xembedded span a {display: inline-block; background: none; padding:0; } /* Linksymbol in der Vorschau & Modal ausblenden */
   a.xembedded {padding: 0 0 13px 0 !important;}
  .xembedded .img-responsive.img-fluid {z-index:99998;}
  
  .image_turn_2, .image_exit_2, .image_bigger_2, .image_smaller_2 {position: relative; float:left; opacity:1.0 !important; width: auto; background:#eeeeee; font:bold 26px Arial; line-height:15px; color:#000000; text-decoration:none !important; margin:2px 0 0 2px; padding:5px 3px 2px 3px; border:1px solid #aaaaaa; border-radius:3px !important; z-index:99999;}
  .image_turn_2:hover, .image_exit_2:hover, .image_bigger_2:hover, .image_smaller_2:hover {background:#cccccc; cursor:pointer;}
 
  .buttonRotate_2 {position:absolute; transform: translate(-50%, -50%); left: 50%; top: 5%;color:#222222 !important; text-align:center !important; line-height:35px; padding:15px 5px !important; border-radius:9px; z-index:999999;}
  .buttonRotate_2 a {color:#222222 !important;}
  .buttonRotate_2 img {margin: 0 3px -2px 0; border:none !important;}
  .buttonRotate_2 small {background:#eeeeee; white-space:nowrap; font: 12px Arial !important; padding:5px 10px; border:1px solid #aaaaaa; border-radius:10px;}
  
  .image_bar {position: absolute; padding-right: 10px; padding-bottom: 40px; z-index: 999999999 !important}
  
  /* Nur V6 */
  .mbt .clicktext_2 {width: 45vmax;}
  .mbt .buttonRotate_2 {margin-top: 4vh;}
  .mbt .clickcloseImg_2 {margin-right: 0 !important;}
</style>
 
<script>
window.addEventListener('load', function() {
  /** Buttonleiste in der Vorschau **/
  $(".clickin_2, a.xembedded:not(.clickin_2 a.xembedded)").prepend('<div class="image_bar"><span title="Bild drehen" class="image_turn_2">&#8635</span><span title="Rotation zurücksetzen" class="image_exit_2">&times</span><span title="Bild vergrößern" class="image_bigger_2">&plus;</span><span title="Bild verkleinern" class="image_smaller_2">&minus;</span></div>');
  
  // Button einblenden
  if (screen.width >= 768) {
    $('.clickin_2 span, .xembedded span').hide();
    $('.clickin_2, .xembedded:not([href*="mp4"])').hover(function(){ 
      $('.image_turn_2, .image_bigger_2, .pic_smaller_2, .pic_exit_2',this).show();
      $('.clickin_2 img, .xembedded img:not(.clickModal_2 img)').attr('title','Modal-Modus anzeigen');
    },function(){  
      $('span',this).hide();
    });
  } else {
   $('.image_bar').remove();
  };
  
  // Bild drehen
  var rotation = 0;
  $('.image_turn_2').on('click', function() {
    rotation += 45;
    $(this).closest('.clickin_2, .xembedded').find('img:last').css(`transform`, `rotate(`+rotation+`deg)`).css(`z-index`, `9999`+rotation+``).css('position','relative');
    $(this).next().addClass('pic_exit_2').show();
    return false;
  });
 
  // Rotation zurücksetzen
  $('.image_exit_2').on('click', function(){
    rotation = 0;
    $(this).closest('.clickin_2, .xembedded').find('img:last').css(`transform`, `rotate(`+rotation+`deg)`);
    return false;
  });
 
  // Bild stufenweise vergrößern
  $('.image_bigger_2').on('click', function(){
    var width_v = $(this).closest('.clickin_2, .xembedded').find('img').width();
    var SRC = $(this).closest('.clickin_2, .xembedded').find('img').prop('src');
    
    // Vergrößerung um jeweils 100px
    width_v += 100;
    var  SRCMax = SRC.replace(/resize\/[0-9]+x[0-9]+\//i, 'resize/'+width_v+'x'+width_v+'/'); 
    $(this).closest('.clickin_2, .xembedded').find('img').attr('src', SRCMax).css(`width`, ``+width_v+`px`).css('position','relative');
    $(this).next().addClass('pic_smaller_2').show();
    return false;
  });
  
  $('.image_smaller_2').on('click', function(){
    var width_v = $(this).closest('.clickin_2, .xembedded').find('img').width();
    var SRC = $(this).closest('.clickin_2, .xembedded').find('img').prop('src');
    
    // Verkleinerung um jeweils 100px
    width_v -= 100;
    var  SRCMax = SRC.replace(/resize\/[0-9]+x[0-9]+\//i, 'resize/'+width_v+'x'+width_v+'/'); 
    $(this).closest('.clickin_2, .xembedded').find('img').attr('src', SRCMax).css(`width`, ``+width_v+`px`).css('position','relative');
    return false;
  });
  
  /******************************************************************************************************************************************************************/
 
  //** Modalansicht ein- & ausschalten - Mit & ohne Foren-Code und Bildbeschreibung **//
  linkstate = 0;
  $('.Img_TextModal_2, .xembedded .img-responsive:not(.clickin_2 .img-responsive)').on('click',function() {
    $('a.xembedded').attr('title','');
    $('.clickin_2 img, .xembedded img').attr('title','Bild drehen');
    
    // Korrektur Business Template
    $('body, .container, #obere_leiste').css({'margin-left':'-10000px','overflow':'hidden'});
    $('#obere_leiste, .scoll_page, #xQuotesBase, .image_bar span, .image_bar').remove();
 
    if(linkstate === 0){
    linkstate = 1;
      // Buttonleiste Modal
      rotation = 0;
      $(this).closest('.xembedded').find('img:last').attr(`style`, `transform: rotate(`+rotation+`deg);`);    
      $(this).closest('.xembedded').addClass('clickModal_2');
      $(".clickModal_2 .xembedded, .clickModal_2.xembedded").prepend('<div class="buttonRotate_2"> <a class="drehen" href="#"><small>Bild um 45° drehen</small></a> <a href="#"><small class="defaultrot_2">Bild zurück drehen</small></a> <a href="#"><small class="norot_2">Vollbild</small></a></div><div class="clickcloseImg_2" title="Ansicht schließen">&times;</div>');
    };
    
    // Bild drehen
    var rotation = 0;
    $('.xembedded img, .drehen').on('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      e.stopImmediatePropagation();
      rotation += 45;
 
      $(this).closest('.xembedded').find('img:last').attr(`style`, `transform: rotate(`+rotation+`deg); width: 70vh;`);    
      return false;
    });
 
    // Rotation zurücksetzen
    $('.defaultrot_2').on('click', function(){
      rotation = 0;
      $(this).closest('.clickModal_2').find('img').attr('style', 'transform: rotate(`+rotation+`deg)');
      return false;
    });
    
    // Vollbild einschalten (Plus-Button)
    $(".norot_2").on('click',function(e) {
      e.stopPropagation();
      var img = $(this).closest('.xembedded').find('img.img-responsive.img-fluid').attr('src');
	  window.open(img, "_blank");
      return false; 
    });
    
    $('.clickModal_2', this).show();
 
    // Modalansicht ausschalten
    $('.clickcloseImg_2').on('click',function(e) {
      location.reload();
      history.go();
    });
    
    // Modalansicht ausschalten
    $('.clickModal_2.xembedded').on('click',function() {
      return false;
    });
    
    return false; 
  });
 
  // Ins Vollbild konvertieren
  $('.clickin_2 img, .xembedded .img-responsive:not(.clickin_2 .img-responsive)').on('click',function() {
    var full_img = $(this).closest('.xembedded').attr('href');
    if(full_img != undefined) {
      var img_copy = decodeURIComponent(full_img.replace("file.php?url=", "")); 
    } else {
      var img_copy = $(this).attr('src');
    }
    $(".clickModal_2 img").attr("src", img_copy);
  });
  
  // Bildbeschreibung komplett lesen
  $('.clicktext_2').on('click', function() {
    $(this).toggleClass('clicktextclick_2');
    return false;
  }).show();
  
    // Bildbeschreibung komplett lesen
  $('.clickcloseSp_2').on('click', function() {
    $('.clicktextmo_2').hide();
    return false;
  });
    
  // Breite der Bildbeschreibung anpassen     
   function resizeHeading() {
   $('.clickin_2').each(function() {
    var width_u = $('img',this).innerWidth();
    $('.clicktext_2',this).css(`max-width`,(width_u - 60));
   }); 
   }
   resizeHeading();
   $('.hpm_spoiler_headinput').click(function(){
    resizeHeading();
   });
    
  // Bild "float: right"
  $('.clickin_2 .xembedded').val(function () {
    if($(this).css('float') == 'right') {
      $(this).parent().css({'float': 'right', 'width': ''}).closest('.Img_TextModal_2').css('display','block');
    }
  });
 
  // Buttonleiste einblenden
  if (screen.width <= 768) {
    var moveTimer = 20000
  } else {
    var moveTimer = 10000
  }
  var movementTimer = null;
  $(document).mousemove(function() {
    $('.buttonRotate_2').fadeIn(5);
    clearTimeout(movementTimer);
    movementTimer = setTimeout(function() {
      $('.buttonRotate_2').fadeOut(1000);
    }, moveTimer);
  });
  
});
</script>
 

Schließen

Spoiler mit einem Klick öffnen und schließen!

Hilfreiche Links:

Bis dann, viel Geduld und Erfolg beim Umsetzen!
Besten Dank an creator für seine super Unterstützung!

Wolfgang

Scannerxy, 844er und Daishi finden das Top!

Antworten

Moderations-Kommentar:

Beitrag komplett überarbeitet!
Es können jetzt IMG-Bilder und Upload-Bilder gedreht werden, mit und ohne Foren-Codes!

#3 | Fragen + Beschreibung: Bilder in Beiträgen drehen - Teil 2 datum

10.03.2021 14:12 (zuletzt bearbeitet: 22.07.2025 13:22)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3865
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1707

Fragen + Beschreibung: Bilder in Beiträgen drehen - Teil 2

Aktualisiert 24.07.25

Habe den Beitrag #2 noch etwas genauer geschrieben....
Die Bildbeschreibung funktioniert erst, wenn die Bilder mit dem neu erstellten Foren Code umschlossen werden!

Ein Klick auf das Rotate-Symbol lässt das Bild in 45° Schritten drehen, ein Klick auf das "X" bringt die Rotation wieder in Grundstellung!
Ein Klick auf das Plus-Zeichen in der Vorschau vergrößert stufenweise das Bild, gleichzeitig erscheint ein neuer Minus-Button zum Verkleinern!
Ein Klick auf das Bild, öffnet den "Modal-Modus"! Hier kann das Bild gedreht oder im Browser als Vollbild angezeigt werden!
Ein Klick auf die Bildbeschreibung, zeigt den ganzen Text
Es können Upload-Bilder über "Datei anhängen" und externe IMG-Bilder mit "Browser-Adresse" eingesetzt werden!

Zum Testen: Upload-Bild mit allen speziellen Funktionen und Bildbeschreibung!

Upload-Bild-Datei, mit Bildbeschreibung:

1
 
[Img_Text=Mit Bildbeschreibung][[File:Schraube.jpg|none|500px|400px]][/Img_Text]

Upload-Bild-Datei, ohne zusätzlich Foren-Code, ohne Bildbeschreibung:

1
 
[[File:Schraube.jpg|none|500px|400px]]

Die Forencodes in den Beiträgen sehen dann so aus.

Externes IMG-Bild ohne spezielle Funktionen, ohne Bildbeschreibung:

[img=400px=auto]https://files.homepagemodules.de/b104774/a_4_b5327b69.jpg[/img]

Externes IMG-Bild mit speziellen Funktionen, ohne Bildbeschreibung:

[Img_Text][img=400px=auto]https://files.homepagemodules.de/b104774/f31t1494p4002n2_hfpblQvg.jpg[/img][/Img_Text]

Externes IMG-Bild mit speziellen Funktionen, mit Bildbeschreibung:

[Img_Text=Beschreibung][img=400px=auto]https://files.homepagemodules.de/b104774/f31t1494p4002n2_hfpblQvg.jpg[/img][/Img_Text]

Upload-Bild ohne Foren-Codes, mit speziellen Funktionen, ohne Bildbeschreibung:

[[File:Schraube.jpg|none|500px|500px]]

Upload-Bild mit speziellen Funktionen, mit Bildbeschreibung:

[Img_Text=Mit Bildbeschreibung][[File:Schraube.jpg|none|400px|400px]][/Img_Text]

Wolfgang

844er findet das Top!

Antworten

Moderations-Kommentar:

Beitrag überarbeitet, Foren-Codes neu eingetragen!

#4 | RE: Fehlersuche: Bilder in Beiträgen ohne zusätzlichen Forencode drehen - Teil 5 datum

05.06.2022 11:39

Hallo Wolfgang.

Erstmal vielen lieben Dank für die schnellen Lösungen, die mein Problem gelöst haben. Habe deine Lösung 1 angewandt.

Zitat von Wolfgang im Beitrag #17
Was genau wolltest Du mit dem Eintrag bewirken, die maximale Größe der Bilder begrenzen?

Ich wollte/will damit bewirken, das beim Einfügen von Bildern in Beiträgen mit der Option "Vollbild", diese dann nicht als Vollbild im fertigen Beitrag angezeigt werden.
Der Hintergrund ist der, das ich in einem anderen Forum einige Leute dabei habe, die ihre Bilder nur mit der Option "Vollbild einfügen" in Beiträgen hochladen. Das ist bei einem Bild pro Beitrag nicht schlimm, nur wenn die dann ihre 10 oder 15 Bilder als Vollbild in einem Beitrag hochladen, dann finde ich die Ansicht des Beitrages mit den ganzen Vollbildern nicht mehr schön.

Zitat von Wolfgang im Beitrag #17
Eigentlich müsste man die maximale Größe in Beiträgen in "Eigenschaften der Benutzergruppe" anpassen können!

Wenn du da den Wert änderst, dann haben deine User das Problem, das Sie ihre Bilder mit einem Bildverkleinerer verändern müssen, da du damit die maximale Bildgröße pro Bild änderst, die ein User im Forum hochladen darf.
In meinen Bezahl-Foren habe ich dort den Wert auf 3000 x 2000 px (6MB) pro Bild gesetzt.

Lieben Gruß und schöne Pfingsttage von Alfred

Wolfgang findet das Top!

Antworten

"Zitat" für die neuen Iconbar erweitern und verbessern! » « Minimierter Styleswitcher / Hintergrundwechsler für alle Template (auch V6)

Ähnliche Themen

Antworten

Letzter Beitrag

Viele ausgewählte einzelne Fotos aus der Bildergalerie schneller löschen
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Dankeschön

12.03.2025 07:27
von

Dankeschön • Zugriffe: 221

Neuer Bildeffekt mit Laufschatten - Im Portal und in der Bildergalerie
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Daishi

07.03.2024 00:46
von

Wolfgang • Zugriffe: 1042

Präsentationskalender - Darstellung interessanter Themen - Teil 1+2
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

09.04.2024 00:35
von

Wolfgang • Zugriffe: 2789

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

05.04.2025 19:27
von

Dankeschön • Zugriffe: 1363

YouTube-Videogalerie für das eigene Forum installieren - 5 Teile!
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 4 06.07.2025 06:34
Wolfgang • Zugriffe: 2325
Alben der Bildergalerie zugeklappt anzeigen!
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 0 28.05.2020 20:56
Wolfgang • Zugriffe: 946
Drucker-Button in der Bildergalerie!
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 0 01.01.2020 11:02
Wolfgang • Zugriffe: 1167
Kleine Iconbar in der Bildergalerie!
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 2 27.03.2025 12:19
Dankeschön • Zugriffe: 1837

Smileys für Themen-Markierungen einfügen und bearbeiten! - Teil 1+2
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

21.04.2025 18:20
von

Kipper-Spedition • Zugriffe: 2800

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

Das neue Template Xobor (v6). » Bilder drehen - In der Bildergalerie & In Beiträgen - 2 Teile

Foren Spende

Hallo !

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

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

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

Deine Spende hilft!

Spendenziel: 45 €

41%