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 - Teil 1-5

Seite 1 von 2 � Seite 1 2 Seite �

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 11, 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 11, 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 | Bilder drehen - In der Bildergalerie & In Beiträgen - Teil 1-5 datum

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

Wolfgang

Administrator

Informationen anzeigen

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

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

Bilder drehen in der Bildergalerie - Teil 1
Aktualisiert 13.01.21

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 zu drehen.
In den meisten Fällen ist das Bild immer um 90 Grad nach Links verdreht (-90°).
In Version 1 führt ein Button diese Korrektur durch!
Die erweiterte Version 2 ermöglicht es, 4 Positionen zu korrigieren.
Beginnend mit 90 Grad nach links und zurück zum Original-Bild!
Wer noch einen drauf legen möchte, hat in Version 3 die Möglichkeit mit einem Button und einen Verdrehwinkel von 45 Grad, Bilder auch in anderen Positionen besser zu sehen oder zu beurteilen!

Installation für alle Templates & Mobil

Business (v4)

Gaia (v3)

ProSilver (v2)

Standard (v1)

Schlie�en

Das Skript und der CSS-Eintrag kann in die "Kopf- oder Fußzeile" oder als PIugin in den "Bildergalerie - Bild anzeigen / footer" eingetragen werden!
In Zeile 1-23 werden Schriftgröße und Position vom Drehbutton und Counter eingestellt und korrigiert!
Die "Zugriffe" werden nicht mehr vom Bild verdeckt!
In Zeile 29 wird der Button erzeugt. Am Ende der Zeile, kann die Button-Beschriftung "Drehen" angepasst werden!
In Zeile 31 wird das Bild um 90 Grad nach links gedreht.
Auch der Abstand zum oberen und unteren Rand wird hier eingestellt.
Evtl. muss "margin" angepasst werden.
In Zeile 33 wird das Bild wieder zurückgedreht!

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
 
<style>
.buttonRot {white-space:nowrap;}
.buttonRot a:hover {text-decoration: underline;}
.buttonRot img {border: none; vertical-align: middle; padding-right: 3px;}
 
/* Standard (v1) */
.tbhi .hitcounter {bottom:-20px !important;}
.tbhi .buttonRot small{font-size:11.5px !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;}
 
/* Gaia (v3) */
#PhotoContainer .buttonRot a {text-decoration: none;}
#PhotoContainer .buttonRot a:hover {text-decoration: underline !important;}
 
/* Business-Template (v4) */
/* .page_gallery_viewpic .buttonRot {margin-left:100px !important} */
.page_gallery_viewpic .buttonRot small{font-size:13px !important;}
.page_gallery_viewpic .buttonRot img {margin-top: -4px;}
</style>
 
<script>
$(function(){
 
$('.tbhi #PicMainCont,.Photo #PicMainCont,.page_gallery_viewpic .gallpic').css({'margin-top':'5px','margin-bottom':'20px'});
$('.tbhi #nav_picture, .inner td:nth-child(2), #PhotoContainer td:first, .page_gallery_viewpic .gallpic').before('<span class="buttonRot"><a href="#"><img src="https://files.homepagemodules.de/b2001010/a_231.png"><small>Drehen</small></a></span>');
$('.buttonRot').toggle(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':'5px','margin-bottom':'20px','-webkit-transform': 'rotate(0deg)', '-moz-transform': 'rotate(0deg)', '-ms-transform': 'rotate(0deg)', 'transform': 'rotate(0deg)'});
});
 
});
</script>
 

Schlie�en

Das Skript und der CSS-Eintrag wird in "Eigenes Javascript" eingetragen und funktioniert dann im V6 und Mobil!
In Zeile 2-5 werden Schriftgröße, Hintergrund und Position vom Drehbutton eingestellt!
In Zeile 21 wird der Button erzeugt. Am Ende der Zeile, kann die Button-Beschriftung "Drehen" geändert werden!
Durch Zeile 13+28 wird das Bild um 90 Grad nach links gedreht.
Auch der Abstand zum oberen und unteren Rand wird hier eingestellt.
Evtl. muss "padding" in Zeile 13 angepasst 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
 
<style>
.buttonRot { margin: 0 5px -45px auto ; z-index:999999;white-space:nowrap; padding:0px 50px 50px 50px !important;}
.buttonRot a:hover { text-decoration: underline; }
.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;}
}
 
.rotate90 { padding-top:10%; padding-bottom:10%; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); }
</style>
 
<script>
window.addEventListener('load', function() {
 
// Button setzen
$(window).on('shown.bs.modal', function() {
$('.ekko-lightbox .modal-header .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('rotate90');
});
 
});
</script>
 

Schlie�en

Das Skript und der CSS-Eintrag kann in die "Kopf- oder Fußzeile" oder als PIugin in den "Bildergalerie - Bild anzeigen / footer" eingetragen werden!
In Zeile 1-23 werden Schriftgröße und Position vom Drehbutton und Counter eingestellt und korrigiert!
Die "Zugriffe" werden nicht mehr vom Bild verdeckt!
In Zeile 29 wird der Button erzeugt. Am Ende der Zeile, kann die Button-Beschriftung "Drehen" angepasst werden!
In Zeile 31 wird das Bild beginnend um 90 Grad nach links gedreht,
in Zeile 33 wird das Bild um 180 Grad nach links gedreht,
in Zeile 35 wird das Bild um 270 Grad nach links gedreht,
in Zeile 37 wird das Bild wieder zurückgedreht und erreicht den Ausgangszustand!
Auch der Abstand zum oberen und unteren Rand wird hier eingestellt.
Evtl. muss "margin" angepasst 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
39
40
41
 
<style>
.buttonRot {white-space:nowrap;}
.buttonRot a:hover {text-decoration: underline;}
.buttonRot img {border: none; vertical-align: middle; padding-right: 3px;}
 
/* Standard (v1) */
.tbhi .hitcounter {bottom:-20px !important;}
.tbhi .buttonRot small{font-size:11.5px !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;}
 
/* Gaia (v3) */
#PhotoContainer .buttonRot a {text-decoration: none;}
#PhotoContainer .buttonRot a:hover {text-decoration: underline !important;}
 
/* Business-Template (v4) */
.page_gallery_viewpic .buttonRot {margin-left:100px !important}
.page_gallery_viewpic .buttonRot small{font-size:13px !important;}
.page_gallery_viewpic .buttonRot img {margin-top: -4px;}
</style>
 
<script>
$(function(){
 
$('.tbhi #PicMainCont,.Photo #PicMainCont,.page_gallery_viewpic .gallpic').css({'margin-top':'5px','margin-bottom':'20px'});
$('.tbhi #nav_picture, .inner td:nth-child(2), #PhotoContainer td:first, .page_gallery_viewpic .gallpic').before('<span class="buttonRot"><a href="#"><img src="https://files.homepagemodules.de/b2001010/a_231.png"><small>Drehen</small></a></span>');
$('.buttonRot').toggle(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':'10px','margin-bottom':'10px','-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':'150px','margin-bottom':'150px','-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':'5px','margin-bottom':'20px','-webkit-transform': 'rotate(0deg)', '-moz-transform': 'rotate(0deg)', '-ms-transform': 'rotate(0deg)', 'transform': 'rotate(0deg)'});
});
 
});
</script>
 

Schlie�en

Das Skript und der CSS-Eintrag wird in "Eigenes Javascript" eingetragen und funktioniert dann im V6 und Mobil!
In Zeile 2-5 werden Schriftgröße, Hintergrund und Position vom Drehbutton eingestellt!
In Zeile 23 wird der Button erzeugt. Am Ende der Zeile, kann die Button-Beschriftung "Drehen" geändert werden!
In Zeile 13-15 und 30-32 wird das Bild jeweils um 90 Grad linksherum gedreht.
Auch der Abstand zum oberen und unteren Rand wird hier eingestellt.
Evtl. muss "padding" in Zeile 13-15 angepasst 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
 
<style>
.buttonRot { margin: 0 5px -45px auto ; z-index:999999;white-space:nowrap; padding:0px 50px 50px 50px !important;}
.buttonRot a:hover { text-decoration: underline; }
.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;}
}
 
.rotate270 {  padding-top:10%; padding-bottom:10%;  -webkit-transform: rotate(-270deg); -moz-transform: rotate(-270deg); -ms-transform: rotate(-270deg); transform: rotate(-270deg); }
.rotate180 { padding-top:0%; padding-bottom:0%;  -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); }
.rotate90 { padding-top:10%; padding-bottom:10%; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); }
</style>
 
<script>
window.addEventListener('load', function() {
 
// Button setzen
$(window).on('shown.bs.modal', function() {
$('.ekko-lightbox .modal-header .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('rotate270');
$('.rotate270').toggleClass('rotate180');
$('.rotate180').toggleClass('rotate90');
});
 
});
</script>
 

Schlie�en

Das Skript und der CSS-Eintrag kann in die "Kopf- oder Fußzeile" oder als PIugin in den "Bildergalerie - Bild anzeigen / footer" eingetragen werden!
In Zeile 1-23 werden Schriftgröße und Position vom Drehbutton und Counter eingestellt und korrigiert!
Die "Zugriffe" werden nicht mehr vom Bild verdeckt!
In Zeile 29 wird der Button erzeugt. Am Ende der Zeile, kann die Button-Beschriftung "Drehen" angepasst werden!
In Zeile 31 wird das Bild beginnend jeweils um 45 Grad nach links gedreht, erreicht in Zeile 43, 315 Grad.
in Zeile 41 wird das Bild wieder zurückgedreht und erreicht den Ausgangszustand!
Auch der Abstand zum oberen und unteren Rand wird hier eingestellt.
Evtl. muss "margin" angepasst 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
39
40
41
42
43
44
45
46
47
48
49
 
<style>
.buttonRot {white-space:nowrap;}
.buttonRot a:hover {text-decoration: underline;}
.buttonRot img {border: none; vertical-align: middle; padding-right: 3px;}
 
/* Standard (v1) */
.tbhi .hitcounter {bottom:-20px !important;}
.tbhi .buttonRot small{font-size:11.5px !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;}
 
/* Gaia (v3) */
#PhotoContainer .buttonRot a {text-decoration: none;}
#PhotoContainer .buttonRot a:hover {text-decoration: underline !important;}
 
/* Business-Template (v4) */
.page_gallery_viewpic .buttonRot {margin-left:100px !important}
.page_gallery_viewpic .buttonRot small{font-size:13px !important;}
.page_gallery_viewpic .buttonRot img {margin-top: -4px;}
</style>
 
<script>
$(function(){
 
$('.tbhi #PicMainCont,.Photo #PicMainCont,.page_gallery_viewpic .gallpic').css({'margin-top':'5px','margin-bottom':'20px'});
$('.tbhi #nav_picture, .inner td:nth-child(2), #PhotoContainer td:first, .page_gallery_viewpic .gallpic').before('<span class="buttonRot"><a href="#"><img src="https://files.homepagemodules.de/b2001010/a_231.png"><small>Drehen</small></a></span>');
$('.buttonRot').toggle(function(){
$('.tbhi #PicMainCont, .inner #PicMainCont,.Photo #PicMainCont,.page_gallery_viewpic .gallpic').css({'margin-top':'220px','margin-bottom':'220px','-webkit-transform': 'rotate(-45deg)', '-moz-transform': 'rotate(-45deg)', '-ms-transform': 'rotate(-45deg)', 'transform': 'rotate(-45deg)'});
}, 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':'10px','margin-bottom':'10px','-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':'150px','margin-bottom':'150px','-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)'});
});
 
});
</script>
 

Schlie�en

Das Skript und der CSS-Eintrag wird in "Eigenes Javascript" eingetragen und funktioniert dann im V6 und Mobil!
In Zeile 2-5 werden Schriftgröße, Hintergrund und Position vom Drehbutton eingestellt!
In Zeile 27 wird der Button erzeugt. Am Ende der Zeile, kann die Button-Beschriftung "Drehen" geändert werden!
In Zeile 13-19 und 34-40 wird das Bild jeweils um 45 Grad linksherum gedreht.
Auch der Abstand zum oberen und unteren Rand wird hier eingestellt.
Evtl. muss "padding" in Zeile 13+19 angepasst 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
39
40
41
42
43
44
 
<style>
.buttonRot { margin: 0 5px -45px auto ; z-index:999999;white-space:nowrap; padding:0px 50px 50px 50px !important;}
.buttonRot a:hover { text-decoration: underline; }
.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-header .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>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Hilfreiche Links:

  • Exif Daten Programme und Tools
  • Bilder drehen-Funktion in der Galerie des Forums

  • Chip: Exif Daten auslesen & ändern / Die besten Gratis-Tools für Foto-Metadaten

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

Wolfgang

Antworten

#2 | RE: Bilder in Beiträgen drehen - Teil 2 datum

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

Wolfgang

Administrator

Informationen anzeigen

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

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

Bilder in Beiträgen drehen - Teil 2!
Aktualisiert 09.05.22

Mit dem folgenden Skript ist es möglich Bilder auch in Beiträgen manuell zu drehen.
In der folgenden Version hat man einen Verdrehwinkel von 45 Grad.
Bilder können hier auch in anderen Positionen besser gesehen oder beurteilet werden!
Es ist auch möglich die Bildverschiebung right + left zu berücksichtigen!
Bilder mit Bildbeschreibung lassen sich auch nebeneinander darstellen!
Externe Bilder mit [img] ... [/img] lassen sich ebenfalls einbinden!
Über eine Button-Leiste im Modal-Modus können die Bilder gedreht, zurückgesetzt oder auch als Vollbild im Browser angezeigt werden!
In der mobilen Ansicht haben alle Button einen großen Aktionsradius und können dadurch leicht bedient werden!
Die Bildbeschreibung hat einen Überlauf.
Überlange Texte werden mit 3 Punkten abgeschlossen.
Ein Klick auf die Beschreibung ermöglicht den gesamten Text zu lesen!
Wichtig! Interne und externe Bilder müssen mit dem selbst erstellten Foren-Coden umschlossen werden!
Siehe Spoiler 2: "Neuen Foren-Code anlegen"!

Installation für alle Templates + Mobil

Vorschaubild mit Bildbeschreibung

Vorschaubild mit Bildbeschreibung Vorschaubild mit Bildbeschreibung

Foren-Code:

[clickImg=Vorschaubild mit Bildbeschreibung Vorschaubild mit Bildbeschreibung] [[File:2021.02.11 - 05.png|none|400px|400px]] [/clickImg]

Vorschaubild mit geöffneter Bildbeschreibung.
Größe 400px

Foren-Code:

[clickImg=Vorschaubild mit geöffneter Bildbeschreibung.
Größe 400px][[File:2021.02.11 - 02.png|none|300px|400px]] [/clickImg]

Modalmodus mit allen Optionen

Foren-Code:

[clickImg=Modalmodus mit allen Optionen] [[File:2021.02.11 - 03.png|none|400px|400px]] [/clickImg]

Foren-Code:
Bilder drehen mit externen Bildern - Breite 300px!

[clickImg=Bilder drehen mit externen Bildern - Breite 300px] [img=300px]//files.homepagemodules.de/b104774/a_4_b5327b69.jpg[/img][/clickImg]

Foren-Code:
Bilder drehen mit externen Bildern - Breite 100px!

[clickImg=Bilder drehen mit externen Bildern - Breite 100px] [img=100px]//files.homepagemodules.de/b104774/a_4_b5327b69.jpg[/img][/clickImg]

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!

Für Bilder ohne Bildbeschreibung:

Ersetze:

1
2
3
 
[clickImg]
 ... 
[/clickImg]
 

Mit:

1
2
3
 
<div class="clickImgModal_2"><div class="clickModal_2" style="display:none;"><div class="clickcloseImg_2" title="Ansicht schließen">&times;</div><a class="xembedded"><img class="img-responsive img-fluid" style="border:none;"></a></div><div class="clickin_2">
 ... 
</div></div>
 

Für Bilder mit Bildbeschreibung:

Ersetze:

1
2
3
 
[clickImg={{text}}]
 ... 
[/clickImg]
 

Mit:

1
2
3
 
<div class="clickImgModal_2"><div class="clickModal_2" style="display:none;"><div class="clickcloseImg_2" title="Ansicht schließen">&times;</div><a class="xembedded"><img class="img-responsive img-fluid" style="border:none;"></a><center><h5 class="clicktextmo_2">{{text}}</h5></center></div><dl class="clickin_2">
 ... 
<center><dd class="clicktext_2" title="Gesamten Text öffnen & schließen" style="display:none;">{{text}}</dd></center></dl></div>
 

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

Ersetze:

1
2
3
 
[img={{size}}]
 ... 
[/img]
 

Mit:

1
2
3
 
<img width="{{size}}" src="
 ...
">
 

Grafik:

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

Weitere Einsrtellungen > Reihenfolge:

1
 
0

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

Bilder mit Bild-Code ohne Bildbeschreibung:

[clickImg][[File:Pflanze.jpg|right|200px|200px]][/clickImg]

Bilder mit Bilder-Code mit Bildbeschreibung:

[clickImg=Bildbeschreibung zum Bild][[File:Pflanze.jpg|right|200px|200px]][/clickImg]

Externes Bild ohne Bildbeschreibung und 200px:

[clickImg][img=200px]https://files.homepagemodules.de/b104774/a_4_b5327b69.jpg[/img][/clickImg]

Externes Bild mit Bildbeschreibung und 200px:

[clickImg=Bildbeschreibung zum Bild][img=200px]https://files.homepagemodules.de/b104774/a_4_b5327b69.jpg[/img][/clickImg]

Schlie�en

Das Skript und der CSS-Eintrag wird als PIugin 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 22-25 wird das Aussehen der Buttonleiste eingestellt!
In Zeile 110 wird die Buttonleiste erzeugt. Die Titel der Button können hier angepasst werden!
In Zeile 27-34 und 117-123 wird das Bild jeweils um 45 Grad linksherum gedreht.
In Zeile 49 + 53 werden die Div-Container ausgeblendet, die im Modal-Modus gesehen werden!
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
 
<style>
/** Mit Mouseklick Bild vergrößern **/
  .clickImgModal_2 {display:inline;clear:both;}
  .clickImgModal_2 div {display:inline;z-index:1000;}
  .clickImgModal_2 a {padding-top:0px !important;padding-bottom:0px !important;}
  .clickImgModal_2 img {margin:0;object-fit: scale-down;border:1px solid #333360 !important;border-radius:9px 9px 0 0;}
  .clickImgModal_2 img:hover {opacity: 0.7;}
  .clickModal_2  {position: fixed;left: 0;top:0;width: 100%; height: 100%; overflow-y:auto !important;background-color: #000000;cursor:pointer;z-index:999999;}
  .clickModal_2 img {object-fit: scale-down; max-height: 85%; max-width: 97%; width:auto !important;height:hidden !important; cursor:pointer;border-radius:9px;opacity: 1.0 !important; position:absolute; border:none !important;border-radius:9px;top: -105%;bottom: -100%;left: -100%;right: -100%;margin: auto;} 
  .clickcloseImg_2 {position:absolute;right:1%;top:1%;color: #f1f1f1; font-size: 40px; font-weight: bold;background:#000000;border-radius:0 0 0 100%;z-index:9999999 !important;padding:0 10px 10px 20px;}
  .clickcloseImg_2:hover {color: #ff8000; text-decoration: none;}
  .clicktext_2 {margin-top:3px;min-width:100px;max-width:350px;max-height:36px;line-height:17px;background:#eeeeee;color:#383838 !important;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:3px;font-weight:bold;padding:1px 10px;border:none;}
  .clicktext_2:hover {background:#cccccc;cursor:pointer;}
  .clicktextclick_2 {max-height:200px;float:left;font-size:95%;text-overflow:ellipsis;white-space:normal;overflow:hidden;position:relative;border:1px solid #383838;left: 50%;transform: translate(-50%);text-align:left !important;}
  .clicktextmo_2 {background:#eeeeee;color:#383838 !important;font-size:120%;border-radius:9px;padding:10px 15px;top: 92% ;left: 50%; margin-right:-40%;transform: translate(-50%);position:absolute;text-align:left;}
  .clickin_2 {display: table-cell;  padding-left:20px;}
  .clickin_2 a  {padding:0 !important;}
  .clickin_2 img {cursor:pointer;}
  .xquoteable a.xembedded, .xquoteable .clickModal_2 a {background:none;} /* Linksymbol für Bilder ausblenden */
 
  /** Bild drehen **/
  .buttonRotate_2 {position:absolute; left: 50%; transform: translate(-50%);margin-top: 20px; padding:15px 5px !important; z-index:999999;border-radius:9px;color:#222222 !important;text-align:center !important;line-height:35px;}
  .buttonRotate_2 a {color:#222222 !important;}
  .buttonRotate_2 img { margin: 0 3px -2px 0; border:none !important;}
  .buttonRotate_2 small { font-size:12px !important;padding:5px 10px; border-radius:10px;border:1px solid #aaaaaa;background:#eeeeee;white-space:nowrap; }
  .clickModal_2 .img-responsive {max-height:85%;}
  .rotate315_2 { max-height:50% !important; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); -ms-transform: rotate(-315deg); transform: rotate(-315deg); }
  .rotate270_2 { max-height:50% !important; -webkit-transform: rotate(-270deg); -moz-transform: rotate(-270deg); -ms-transform: rotate(-270deg); transform: rotate(-270deg); }
  .rotate225_2 { max-height:50% !important; -webkit-transform: rotate(-225deg); -moz-transform: rotate(-225deg); -ms-transform: rotate(-225deg); transform: rotate(-225deg); }
  .rotate180_2 { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); }
  .rotate135_2 { max-height:50% !important; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); }
  .rotate90_2 {  max-height:50% !important; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); }
  .rotate45_2 { max-height:50% !important; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
  .rotate0_2 { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
</style>
 
<script>
  window.addEventListener('load', function() {
    
  //** Modalansicht einschalten **//
  $('.clickImgModal_2').click(function() {
    $('nav.navbar').hide();
    $('body').css('overflow','hidden');
    $('.clickModal_2', this).fadeIn(100).click(function(e) {
    $('.clickModal_2').hide();
    $('nav.navbar').show();
    $('body').css('overflow','auto');
    // Wieder einblenden (Modalmodus)
    $('.boxheader,.options,#obere_leiste,#donationbox_table,.scoll_page,.topnavigation_wrap,#xQuotesBase,#breadcrumbs,.cc-window.cc-banner,#scrollUpImg').css('visibility', 'visible');
    return false;
    });
    // Ausblenden  (Modalmodus)
    $('.boxheader,.options,#obere_leiste,#donationbox_table,.scoll_page,.topnavigation_wrap,#xQuotesBase,#breadcrumbs,.cc-window.cc-banner,#scrollUpImg').css('visibility', 'hidden');
    return false;
  });
    
  //** Bild in den Modal-Container kopieren **//
  $('.clickin_2 img').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();
    
  //** Breite der Bildbeschreibung anpassen **//      
   function resizeHeading() {
   $('.clickin_2').each(function() {
    var width_u = $('img',this).width();
    $('.clicktext_2',this).css('max-width',width_u - 50);
   }); 
   }
   resizeHeading();
   $('.hpm_spoiler_headinput').click(function(){
    resizeHeading();
   });
    
  //** Bild "float: right + left" **//
  $('.clickin_2 .xembedded').val(function () {
    if($(this).css('float') == 'right') {
    $(this).parent().css({'float': 'right', 'width': ''});
    }
  });
 
  //** Buttonleiste einblenden **//
  if (screen.width <= 768) {
    var moveTimer = 6000
    } else {
    var moveTimer = 2000
    }
    var movementTimer = null;
 
    $(document).mousemove(function() {
    $('.buttonRotate_2').fadeIn(5);
    clearTimeout(movementTimer);
    movementTimer = setTimeout(function() {
    $('.buttonRotate_2').fadeOut(1000);
    }, moveTimer);
          });
    
  //** Buttonleiste setzen **//
  $(".clickModal_2 .xembedded").prepend('<span class="buttonRotate_2"><a href="#"><small class="defaultrot_2">Bild zurück drehen</small></a> <a href="#"><small>Bild um 45° drehen</small></a> <a><small class="norot_2">Vollbild</small></a></span>');
 
  //** Bild drehen **//
  $(".clickModal_2 .xembedded").on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    $('img', this).toggleClass('rotate315_2');
    $('.rotate315_2', this).toggleClass('rotate270_2');
    $('.rotate270_2', this).toggleClass('rotate225_2');
    $('.rotate225_2', this).toggleClass('rotate180_2');
    $('.rotate180_2', this).toggleClass('rotate135_2');
    $('.rotate135_2', this).toggleClass('rotate90_2');
    $('.rotate90_2', this).toggleClass('rotate45_2');
  });
 
  //** Rotation zurücksetzen **//
  $(".defaultrot_2").on('click', function(e) {
    e.preventDefault(); 
    e.stopPropagation();
    e.stopImmediatePropagation();
    $(this).closest('.buttonRotate_2').next().removeClass().addClass('img-responsive img-fluid');
  });
    
  //** Vollbild einschalten **// 
  $(".norot_2").click(function(e) {
    e.stopPropagation();
    // Vollbild einblenden
    var img = $(this).closest('.buttonRotate_2').next().attr('src')
	window.open(img, "_blank")
  });
    
});
</script>
 
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Hilfreiche Links:

  • Exif Daten Programme und Tools
  • Bilder drehen-Funktion in der Galerie des Forums

  • Chip: Exif Daten auslesen & ändern / Die besten Gratis-Tools für Foto-Metadaten

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

#3 | RE: Bilder in Beiträgen drehen - Teil 2 datum

10.03.2021 09:03 (zuletzt bearbeitet: 10.03.2021 09:09)

Testbild über den Weg Dateien einfügen im Beitrag hochgeladen

Läßt sich das Bild beim Anklicken im Browserfenster per Button drehen ??

Leider läßt sich das Bild im Browserfenster nicht drehen. Was habe ich falsch gemacht, oder ist die Funktion zum Bilder drehen für angehängte/hochgeladene Bilder über den Weg Dateien anhängen nicht gedacht ?

Gruß Alfred

Antworten

#4 | Fehlersuche & Fragen: Bilder in Beiträgen drehen - Teil 2 datum

10.03.2021 14:12

Fehlersuche & Fragen: Bilder in Beiträgen drehen - Teil 2
Aktualisiert 09.05.22

Hallo Alfred,
habe den Beitrag #2 noch etwas genauer geschrieben....
Die Bilder müssen erst mit dem neu erstellten Foren Code umschlossen werden, dann funktioniert es (siehe Spoiler 2)!

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 Bilder über "Datei anhängen" und externe Bilder mit "Browser-Adresse" eingesetzt werden!

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

Bilder mit Bild-Code ohne Unterschrift:

[clickImg][[File:Pflanze.jpg|right|200px|200px]][/clickImg]

Bilder mit Bilder-Code mit Unterschrift:

[clickImg=Unterschrift zum Bild][[File:Pflanze.jpg|right|200px|200px]][/clickImg]

Externes Bild ohne Unterschrift und 200px:

[clickImg][img=200px]https://files.homepagemodules.de/b104774/a_4_b5327b69.jpg[/img][/clickImg]

Externes Bild mit Unterschrift und 200px:

[clickImg=Unterschrift zum Bild][img=200px]https://files.homepagemodules.de/b104774/a_4_b5327b69.jpg[/img][/clickImg]

Aus "Datei anhängen", mit Bildbeschreibung

Wolfgang

844er findet das Top!

Antworten

#5 | RE: Fehlersuche & Fragen: Bilder in Beiträgen drehen - Teil 2 datum

20.11.2021 20:18

Hallo Wolfgang

Ich möchte dieses Thema nochmal aufgreifen.
Mit persönlich ist die Vorgehensweise zu kompliziert...

Könnte man das Plugin (3. Version) nicht so umschreiben, das beim Einfügen von Bilder in Beiträgen per Dateianhang das Bild beim öffnen automatisch mit Drehoption angezeigt werden kann ??
Dann würde ein zusätzliches Umschließen bei Beitragserstellung entfallen und die Handhabung wäre für ungeübte User viel viel einfacher...

LG, Alfred

Antworten

#6 | RE: Fehlersuche & Fragen: Bilder in Beiträgen drehen - Teil 2 datum

20.11.2021 23:38 (zuletzt bearbeitet: 20.11.2021 23:43)

Zitat von 844er im Beitrag #5
Könnte man das Plugin (3. Version) nicht so umschreiben, das beim Einfügen von Bilder in Beiträgen per Dateianhang das Bild beim öffnen automatisch mit Drehoption angezeigt werden kann ??

Das könnte ein Problem für werbefinanzierte Foren darstellen. Bilder als Dateianhänge, welche zu groß für einen Beitrag sind, werden in werbefinanzierten Foren in einem neuen Tab geöffnet. Auf dieser Seite wird über dem Bild ein Werbebanner und der Text "Zurück zur Forum Übersicht" angezeigt. Diese Ansicht lässt sich nicht bearbeiten, da diese Stelle nicht über ein Template erreichbar ist.

Eine Möglichkeit wäre, den Standard-Link zu dem Bild mit Werbung zu entfernen und mit der eigenen Ansicht zum Drehen der Bilder auszutauschen. Das wiederum wäre ein Verstoß gegen die Nutzungsbedinungen von Xobor (§5 c, Verändern oder Löschen von Werbung) und ist daher nur für werbefreie Foren umsetzbar.

Die Dateinanhang-Ansicht innerhalb vom Forum, die sich in der aktuellen Seite öffnet (ohne "file.php" in der Adressleiste), ist davon nicht betroffen. Dafür müsste sich auch für werbefinanzierte Foren eine Lösung finden lassen.

Wolfgang und 844er finden das Top!

Antworten

#7 | Bilder in Beiträgen ohne zusätzlichen Forencode drehen - Teil 3 datum

09.12.2021 22:52 (zuletzt bearbeitet: 11.12.2021 16:01)

Wolfgang

Administrator

Informationen anzeigen

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

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

Bilder in Beiträgen ohne zusätzlichen Forencode drehen - Teil 3
Aktualisiert 10.05.22

Zitat von 844er im Beitrag #5
Hallo Wolfgang

Ich möchte dieses Thema nochmal aufgreifen.
Mit persönlich ist die Vorgehensweise zu kompliziert...

Könnte man das Plugin (3. Version) nicht so umschreiben, das beim Einfügen von Bilder in Beiträgen per Dateianhang das Bild beim öffnen automatisch mit Drehoption angezeigt werden kann ??
Dann würde ein zusätzliches Umschließen bei Beitragserstellung entfallen und die Handhabung wäre für ungeübte User viel viel einfacher...

LG, Alfred

Hallo Alfred,
habe da eine Möglichkeit gefunden, das eingefügte Bild im Beitrag ohne zusätzlichen Forencode zu drehen, allerdings nur in der Vorschau!

Man würde hier auch in keinster Weise gegen Nutzungsbedingungen verstoßen!

Was kann das Skript?

Alle Bilder aus "Datei anhängen" bekommen automatisch ohne zusätzlichen Forencode einen Dreh-Button!
In der Desktop-Version wird der Dreh-Button erst nach einem Mouseover angezeigt!
In der Mobilen Version ist der Dreh-Button ständig eingeblendet!
Das Bild wird um je 45° gedreht, kann aber verändert werden!
Das Bild dreht schrittweise linksherum!
Ein Klick auf das Bild zeigt wie gewohnt das Vollbild!
Wurde das Vollbild angezeigt, dreht das Vorschaubild wieder automatisch zurück!

Installation für alle Templates

Bilder drehen in Beiträgen ohne zusätzlichen Forencode

Das Skript und der CSS-Eintrag wird als PIugin in "Untere Leiste - Header" kopiert!
Wichtig! Im Plugin müssen rechts oben die "Unterstützte Templates" markiert werden, z.B.: Business - Template (144) und Mobile - Template (177) (Auswahl mit Mausklick oder Strg + Mausklick)!
Funktioniert für die Templates (v1-4) auch in der "Kopf- oder Fußzeile"!
In Zeile 2-9 wird die Drehung des Bildes bestimmt!
In Zeile 22 steckt die Grafik des Dreh-Buttons!
In Zeile 16 wird das Linksymbol für Bilder und Grafiken ausgeblendet!
In Zeile 36 wird die Drehung nach Ansicht des Vollbildes zurückgesetzt!
Kann aber auch deaktiviert 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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
<style>
  .rotate315_1 { max-height:45% !important; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); -ms-transform: rotate(315deg); transform: rotate(315deg);}
  .rotate270_1 { max-height:47% !important; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg);}
  .rotate225_1 { max-height:45% !important; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg);}
  .rotate180_1 { max-height:88% !important; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);}
  .rotate135_1 { max-height:45% !important; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg);}
  .rotate90_1  { max-height:47% !important; -webkit-transform: rotate(90deg);  -moz-transform: rotate(90deg);  -ms-transform: rotate(90deg);  transform: rotate(90deg); }
  .rotate45_1  { max-height:45% !important; -webkit-transform: rotate(45deg);  -moz-transform: rotate(45deg);  -ms-transform: rotate(45deg);  transform: rotate(45deg); }
 
  .image_turn_1 {position:absolute; margin:3px; background:#eeeeee; padding:3px 0 3px 3px; border-radius:3px; z-index:99999;border:1px solid #aaaaaa;}
  .row .image_turn_1 {padding:2px 4px 4px 4px;}
  .image_turn_1:hover {background:#cccccc; cursor:pointer;}
  .image_turn_1 img {border:none; opacity:1.0 !important}
  
  .xembedded {display:inline-block;}
  .xembedded .img-responsive {border-radius:6px;z-index:99999;}
 
/* Linksymbol für Bilder ausblenden */
  a.xembedded a {background:none;} 
  
/* z-index fürs Business-Template + Xobor (v6) */
  .boxheader, .searchli, #korrekturIndex2 {z-index:auto  !important;}
</style>
 
<script>
window.addEventListener('load', function(){
/* Button setzen */
  $(".xembedded").prepend('<span title="Bild drehen" class="image_turn_1"><img src="//files.homepagemodules.de/b104774/a_385_24b6a0f6.png" width="20px"></span>');
 
/* Button einblenden */
  if (screen.width >= 768) {
  $('.image_turn_1').css('visibility','hidden');
  $(".xembedded").hover(function(){
    $('.image_turn_1',this).css({'visibility':'visible'});
    $('.img-responsive',this).css({'opacity':'0.9'}); 
  },function(){  
    $('.image_turn_1',this).css('visibility','hidden');
    $('.img-responsive',this).css({'opacity':'1.0'});
  });
  };
  
/* Rotation nach dem Vollbild zurücksetzen */
  $(".xembedded img").on('click', function() {
    $(this).removeClass().addClass('img-responsive img-fluid');
  });
  
/* Bild drehen */
  $(".xembedded .image_turn_1").on('click', function(e) {
    e.preventDefault();
    $(this).closest('.xembedded').each(function() {  
      $('.img-responsive',this).toggleClass('rotate315_1');
      $('.rotate315_1', this).toggleClass('rotate270_1');
      $('.rotate270_1', this).toggleClass('rotate225_1');
      $('.rotate225_1', this).toggleClass('rotate180_1');
      $('.rotate180_1', this).toggleClass('rotate135_1');
      $('.rotate135_1', this).toggleClass('rotate90_1');
      $('.rotate90_1', this).toggleClass('rotate45_1');
   });
  });
  
});
</script>
 

Schlie�en

Bilder drehen in Beiträgen mit zusätzlichen Return-Button, ohne zusätzlichen Forencode

Das Skript und der CSS-Eintrag wird als PIugin in "Untere Leiste - Header" kopiert!
Wichtig! Im Plugin müssen rechts oben die "Unterstützte Templates" markiert werden, z.B.: Business - Template (144) und Mobile - Template (177) (Auswahl mit Mausklick oder Strg + Mausklick)!
Funktioniert für die Templates (v1-4) auch in der "Kopf- oder Fußzeile"!
In Zeile 2-8 wird die Drehung des Bildes bestimmt!
In Zeile 30 steckt die Grafik des Dreh-Buttons und der html Entity-X Button!
In Zeile 21 wird das Linksymbol für Bilder und Grafiken ausgeblendet!
In Zeile 44-47 wird die Drehung nach Ansicht des Vollbildes zurückgesetzt! Kann aber auch deaktiviert werden!
In Zeile 49-5 wird die Drehung in der Normal- Ansicht zurückgesetzt!

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
 
<style>
  .rotate315_2 { max-height:45% !important; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); -ms-transform: rotate(315deg); transform: rotate(315deg);}
  .rotate270_2 { max-height:47% !important; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg);}
  .rotate225_2 { max-height:45% !important; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg);}
  .rotate180_2 { max-height:88% !important; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);}
  .rotate135_2 { max-height:45% !important; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg);}
  .rotate90_2  { max-height:47% !important; -webkit-transform: rotate(90deg);  -moz-transform: rotate(90deg);  -ms-transform: rotate(90deg);  transform: rotate(90deg); }
  .rotate45_2  { max-height:45% !important; -webkit-transform: rotate(45deg);  -moz-transform: rotate(45deg);  -ms-transform: rotate(45deg);  transform: rotate(45deg); }
 
  .image_turn_2, .image_exit_2 {position:absolute; margin:3px; background:#eeeeee; padding:3px 0 3px 3px; border-radius:3px; z-index:99999;border:1px solid #aaaaaa;}
  .image_exit_2 {margin-left: 33px; font-family:Arial; color:#000000; font-size:35px;line-height:20px; font-weight:bold;padding:3px;}
  .row .image_exit_2 {line-height:22px;margin-left: 35px;}
  .row .image_turn_2 {padding:2px 4px 4px 4px;}
  .image_turn_2:hover, .image_exit_2:hover {background:#cccccc; cursor:pointer;}
  .image_turn_2 img {border:none; opacity:1.0 !important}
  
  .xembedded {display:inline-block;}
  .xembedded .img-responsive {border-radius:6px;z-index:99999;}
 
/* Linksymbol für Bilder ausblenden */
  a.xembedded a {background:none;} 
  
/* z-index fürs Business-Template + Xobor (v6) */
  .boxheader, .searchli, #korrekturIndex2 {z-index:auto  !important;}
</style>
 
<script>
window.addEventListener('load', function(){
/* Button setzen */
  $(".xembedded").prepend('<span title="Bild drehen" class="image_turn_2"><img src="//files.homepagemodules.de/b104774/a_385_24b6a0f6.png" width="20px"></span><span title="Rotation zurücksetzen" class="image_exit_2">&times</span>');
 
/* Button einblenden */
  if (screen.width >= 768) {
  $('.image_turn_2, .image_exit_2').css('visibility','hidden');
  $(".xembedded").hover(function(){
    $('.image_turn_2, .image_exit_2',this).css({'visibility':'visible'});
    $('.img-responsive',this).css({'opacity':'0.9'}); 
  },function(){  
    $('.image_turn_2, .image_exit_2',this).css('visibility','hidden');
    $('.img-responsive',this).css({'opacity':'1.0'});
  });
  };
  
/* Rotation nach dem Vollbild zurücksetzen */
  $(".xembedded img").on('click', function() {
    $(this).removeClass().addClass('img-responsive img-fluid');
  });
  
/* Rotation Normalansicht zurücksetzen */
  $('.xembedded').each(function(){
    $('.image_exit_2',this).on('click', function(){
      $(this).next().removeClass().addClass('img-responsive img-fluid');
      return false;
    });
  });
  
/* Bild drehen */
  $(".xembedded .image_turn_2").on('click', function(e) {
    e.preventDefault();
    $(this).closest('.xembedded').each(function() {  
      $('.img-responsive',this).toggleClass('rotate315_2');
      $('.rotate315_2', this).toggleClass('rotate270_2');
      $('.rotate270_2', this).toggleClass('rotate225_2');
      $('.rotate225_2', this).toggleClass('rotate180_2');
      $('.rotate180_2', this).toggleClass('rotate135_2');
      $('.rotate135_2', this).toggleClass('rotate90_2');
      $('.rotate90_2', this).toggleClass('rotate45_2');
   });
  });
  
});
</script>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Bis dann, viel Geduld und Erfolg beim Umsetzen!

Wolfgang

844er und Mato finden das Top!

Antworten

#8 | RE: Bilder in Beiträgen ohne zusätzlichen Forencode drehen - Teil 3 datum

10.12.2021 08:12 (zuletzt bearbeitet: 10.12.2021 09:40)

Hallo Wolfgang

Viele vielen Dank für die viele Arbeit und das tolle Ergebnis, welches ich natürlich sofort installiert habe. Funktioniert super bei Bildern in Beiträgen. 👍

Frage: Besteht auch die Möglichkeit den Drehbutton in die Vollbildansicht zu bekommen ? Muss ich das in Zeile 32 ändern ? Wenn ja, was muss ich da ändern ? Bin da leider ein Laie...

Nachtrag: Nach dem erstellen des Plugin werden die Bilder in Beiträgen nicht mehr nebeneinander angezeigt, sondern untereinander (siehe Bild).

Kann man das noch irgendwie verfeinern ?

LG, Alfred

Antworten

#9 | Fehlersuche: Bilder in Beiträgen ohne zusätzlichen Forencode drehen - Teil 3 datum

10.12.2021 17:17

Wolfgang

Administrator

Informationen anzeigen

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

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

Fehlersuche: Bilder in Beiträgen ohne zusätzlichen Forencode drehen - Teil 3

Hallo Alfred,
was wären die Skripte ohne Dein unermüdliches Testen?

Lösung:
Jetzt werden die Bilder wieder in einer Reihe angezeigt!
Es war nur eine kleine Änderung in Zeile 12 notwendig!
Sie bewirkt auch, dass die Dreh-Button an der richtigen Stelle bleiben. Wichtig für die mobile Version, wo alles zusammengedrängt wird!
Die Link-Symbole sollten auch richtig platziert sein.
Bitte auch mobil testen!
Habe die Lösung bereits in Beitrag #7 eingetragen!

1
 
.xembedded {display:inline-block;}

PS:
Für die Vollansicht habe ich noch nichts Brauchbares hinbekommen, dauert noch....

Bis dann

Wolfgang

844er findet das Top!

Antworten

#10 | Bilder in Beiträgen ohne zusätzlichen Forencode drehen - Teil 4 datum

05.05.2022 18:11

Wolfgang

Administrator

Informationen anzeigen

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

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

Bilder in Beiträgen ohne zusätzlichen Forencode drehen - Teil 4
Aktualisiert 28.05.22

Zitat von 844er im Beitrag #8
Hallo Wolfgang

Vielen, vielen Dank für die Arbeit und das tolle Ergebnis, welches ich natürlich sofort installiert habe. Funktioniert super bei Bildern in Beiträgen. 👍

Frage: Besteht auch die Möglichkeit den Drehbutton in die Vollbildansicht zu bekommen ? Muss ich das in Zeile 32 ändern ? Wenn ja, was muss ich da ändern ? Bin da leider ein Laie...

Nachtrag: Nach dem erstellen des Plugin werden die Bilder in Beiträgen nicht mehr nebeneinander angezeigt, sondern untereinander (siehe Bild).

Kann man das noch irgendwie verfeinern ?

LG, Alfred

Hallo Alfred,
mit der folgenden Version können die Bilder auch nebeneinander platziert werden und man kann per Klick in die Vollansicht gelangen und per Klick wieder direkt zum Beitrag!

In Teil 4 ist es möglich ein Bild, das über "Datei anhängen" eingefügt wurde, ohne zusätzlichen Forencode zu drehen, modal darzustellen und in die Vollansicht zubringen!

Was genau kann das neue Skript ?

Für hochgeladene Bilder über "Datei anhängen"
Das Bild kann in der Voransicht und in der Modalansicht gedreht und wieder zurückgesetzt werden!
Die Button werden in der Voransicht per Mouseover eingeblendet und mobil dauerhaft angezeigt!
Das Bild wird über einem Mausklick modal dargestellt, kann hier gedreht, zurückgesetzt und in die Vollansicht gebracht werden!
Auch der Textfluss wird beibehalten!

Installation für alle Templates

Das Skript und der CSS-Eintrag kann für die Templates (v1-4) in die "Kopf- oder Fußzeile"!
Oder besser als PIugin für alle Templates in "Untere Leiste / Header" eingetragen werden!
Wichtig! Im Plugin müssen rechts oben die "Unterstützte Templates" markiert werden, z.B.: Business - Template (144) und Mobile - Template (177) (Auswahl mit Mausklick oder Strg + Mausklick)!
Das gesamte Skript kann im Xobor(v6) oder Mobil auch in "Eigenes Javascript" oder "Eigene Fußzeile" kopiert 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
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
 
<!-- Bilder in Beiträge drehen und Modal ansehen  -->
<style>
  /* Rotation */
  .rotate315_4 { max-height:45% !important; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); -ms-transform: rotate(315deg); transform: rotate(315deg);}
  .rotate270_4 { max-height:47% !important; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg);}
  .rotate225_4 { max-height:45% !important; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg);}
  .rotate180_4 { max-height:88% !important; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);}
  .rotate135_4 { max-height:45% !important; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg);}
  .rotate90_4  { max-height:47% !important; -webkit-transform: rotate(90deg);  -moz-transform: rotate(90deg);  -ms-transform: rotate(90deg);  transform: rotate(90deg); }
  .rotate45_4  { max-height:45% !important; -webkit-transform: rotate(45deg);  -moz-transform: rotate(45deg);  -ms-transform: rotate(45deg);  transform: rotate(45deg); }
  
  .clickModal_4  {position: fixed;left: 0;top:0;width: 100% ; height: 100%; overflow-y:auto !important; background: #000000 !important; cursor:pointer; z-index:99999;}
  .clickModal_4 img {object-fit: scale-down; max-height: 80%; max-width: 90%; width:auto;height:hidden !important; border-radius:9px;position:absolute; top: -100%;bottom: -100%;left: -100%;right: -100%;margin: auto; z-index:99999; opacity:1.0 !important; } 
 
  .closeImg_4 {position:absolute; right:1%; top:1%; color: #f1f1f1; font-size: 40px; padding:10px;width:80px; font-weight:bold;}
  .closeImg_4:hover {color: #ff8000; text-decoration: none;}
 
  .buttonRotate_4 {width:100%; display:inline-block; margin-top: 30px; color:#222222 !important; text-align:center !important;}
  .buttonRotate_4 div {display:inline-block;}
  .buttonRotate_4 small {font-size:12px !important; padding:5px 10px; border-radius:10px; border:1px solid #aaaaaa; background:#eeeeee; white-space:nowrap; font-weight:bold;}
  .buttonRotate_4 small:hover {background:#bbbbbb;}
 
  .image_turn_4, .image_exit_4 {position:absolute; margin:3px; background:#eeeeee; padding:3px; border-radius:3px; z-index:99999;border:1px solid #aaaaaa; opacity:1.0 !important;}
  .image_exit_4 {margin-left: 33px; font-family:Arial; color:#000000; font-size:35px;line-height:20px; font-weight:bold; text-decoration:none !important;}
  .image_turn_4:hover, .image_exit_4:hover {background:#cccccc; cursor:pointer;}
  .image_turn_4 {width:20px;}
  .row .image_turn_4 {width:28px;}
  .row .image_exit_4 {margin-left: 40px;}
  .row .image_turn_4, .row .image_exit_4 {padding:6px;width:35px;}
  
  .xembedded {display:inline-block;}
  .xembedded .img-responsive {border-radius:6px;z-index:99999 !important;cursor:pointer;border: 1px solid #aaaaaa !important;}
 
/* Linksymbol für Bilder ausblenden */
/* https://www.hilfe-tricks-tipps.de/t1446f31-External-Link-Grafik-Links-deutlicher-darstellen.html */
  a.xembedded a {background:none;} 
  
/* z-index fürs Business-Template + Xobor (v6) */
  .boxheader, .topnavigation_wrap, .searchli, #korrekturIndex2, .card {z-index:auto  !important;}
</style>
 
<script>
window.addEventListener('load', function(){
/* Button setzen */
    $(".xembedded").prepend('<span><img title="Bild drehen" class="image_turn_4" src="//files.homepagemodules.de/b104774/a_385_24b6a0f6.png"></span><span title="Rotation zurücksetzen" class="image_exit_4">&times</span>');
 
/* Button einblenden */
  if (screen.width >= 768) {
    $('.xembedded span').hide();
    $(".xembedded").hover(function(){ 
 
     $('span',this).show(100);  
      $('.img-responsive',this).css({'opacity':'0.9'}); 
 
    },function(){  
      $('span',this).hide();
      $('.img-responsive',this).css({'opacity':'1.0'});
    });
  }; 
  
  function bild_drehen(){  
/* Bild drehen */
  $('.image_turn_4,.drehen').on('click', function() {
    $(this).closest('.xembedded').each(function() { 
      $('.img-responsive',this).toggleClass('rotate315_4');
      $('.rotate315_4', this).toggleClass('rotate270_4');
      $('.rotate270_4', this).toggleClass('rotate225_4');
      $('.rotate225_4', this).toggleClass('rotate180_4');
      $('.rotate180_4', this).toggleClass('rotate135_4');
      $('.rotate135_4', this).toggleClass('rotate90_4');
      $('.rotate90_4', this).toggleClass('rotate45_4');
    });
    return false;
  });
    
/* Rotation Normalansicht zurücksetzen */
    $('.image_exit_4,.defaultrot_4').on('click', function(){
      $(this).closest('.xembedded').find('.img-responsive').removeClass().addClass('img-responsive img-fluid');
      return false;
    });
  };
  onload = bild_drehen();
  
  $('.xembedded .img-responsive').on('click', function(){
/* Ins Vollbild konvertieren, auch Thumbs */    
    $(this).closest('.xembedded').addClass('clickModal_4').html(function( index,link){ 
    return link.replace(/resize\/[0-9]+x[0-9]+\//i, 'resize/1920x1200/').replace('-thumb',''); 
    });
    
/* Buttonleiste im Modal-Modus setzen */    
    $(".xembedded").prepend('<div class="buttonRotate_4"><div class="defaultrot_4" title="Bild zurückdrehen"><small>Reset</small></div> <div class="drehen" title="Bild um 45° weiterdrehen"><small>Bild drehen</small></div> <div class="norot_4" title="Zur Vollansicht"><small>Vollbild</small></div><div class="closeImg_4" title="Ansicht schließen">&times</div></div>');    
    onload = bild_drehen();
    
/* Korrektur Business Template */
    $('body, .container, .xembedded span, .xembedded span img').css({'margin':'-10000px','overflow':'hidden'});
 
/* Modalansicht schließen */
    $('.closeImg_4').on('click', function(){ 
      location.reload();
      return false;
    });    
  
  return false;
  });
  
});
</script>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Bis dann und viel Erfolg beim Umsetzen!
Besten Dank für die Unterstützung von Creator!

Wolfgang

Antworten

Tastenkombinationen (Shortcuts) fürs eigene Forum (v4 + v6) � � VAR-Funktion in der CSS + CSS/SCSS

Seite 1 von 2 � Seite 1 2 Seite �

�hnliche Themen

Antworten

Letzter Beitrag

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

Auswahlmenü Bild-Einstellungen und Bilder verlinken optisch anpassen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

28.05.2023 12:56
von

Wolfgang • Zugriffe: 358

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

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

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: 724
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: 851
Bildergalerie: Direkt zu den neusten Bildern!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 0 29.10.2018 20:51
Wolfgang • Zugriffe: 663
Kleine Iconbar in der Bildergalerie!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 0 30.01.2017 16:18
Wolfgang • Zugriffe: 1346
Punktesystem in der Bildergalerie
Erstellt im Forum Ank�ndigungen & Termine, wichtige News! von Wolfgang 0 08.09.2016 11:37
Wolfgang • Zugriffe: 845

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 €

17%

Zum Einbau: Google-Translator!

Favoriten speichern

Forum - Bilder drehen - In der Bildergalerie & In Beiträgen - Teil 1-5

Bilder drehen in der Bildergalerie - Teil 1
Aktualisiert 13.01.21

Bilder in Beiträgen drehen - Teil 2!
Aktualisiert 09.05.22

Fehlersuche & Fragen: Bilder in Beiträgen drehen - Teil 2
Aktualisiert 09.05.22

Bilder in Beiträgen ohne zusätzlichen Forencode drehen - Teil 3
Aktualisiert 10.05.22

Bilder drehen in Beiträgen ohne zusätzlichen Forencode

Bilder drehen in Beiträgen mit zusätzlichen Return-Button, ohne zusätzlichen Forencode

Fehlersuche: Bilder in Beiträgen ohne zusätzlichen Forencode drehen - Teil 3

Bilder in Beiträgen ohne zusätzlichen Forencode drehen - Teil 4
Aktualisiert 28.05.22

Forum Lesezeichen ❌

Forum - Bilder drehen - In der Bildergalerie & In Beiträgen - Teil 1-5

Bilder drehen in der Bildergalerie - Teil 1Aktualisiert 13.01.21

Bilder in Beiträgen drehen - Teil 2!Aktualisiert 09.05.22

Fehlersuche & Fragen: Bilder in Beiträgen drehen - Teil 2Aktualisiert 09.05.22

Bilder in Beiträgen ohne zusätzlichen Forencode drehen - Teil 3Aktualisiert 10.05.22

Bilder drehen in Beiträgen ohne zusätzlichen Forencode

Bilder drehen in Beiträgen mit zusätzlichen Return-Button, ohne zusätzlichen Forencode

Fehlersuche: Bilder in Beiträgen ohne zusätzlichen Forencode drehen - Teil 3

Bilder in Beiträgen ohne zusätzlichen Forencode drehen - Teil 4Aktualisiert 28.05.22

Forum Lesezeichen ❌

Bilder drehen in der Bildergalerie - Teil 1
Aktualisiert 13.01.21

Bilder in Beiträgen drehen - Teil 2!
Aktualisiert 09.05.22

Fehlersuche & Fragen: Bilder in Beiträgen drehen - Teil 2
Aktualisiert 09.05.22

Bilder in Beiträgen ohne zusätzlichen Forencode drehen - Teil 3
Aktualisiert 10.05.22

Bilder in Beiträgen ohne zusätzlichen Forencode drehen - Teil 4
Aktualisiert 28.05.22