Forum - RE: Bilder in Beiträgen ohne zusätzlichen Forencode drehen - Teil 4

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 2 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 & 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. 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

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

05.05.2022 20:26

Irgendwie funzt es bei mir nicht

Aber das wundert mich nicht wirklich :-)

Liebe Grüße von Mato

Antworten

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

06.05.2022 07:57

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

Hallo Mato,
wo willst Du die Bilder drehen?

Teil 1 ist fürs Drehen in der Bildergalerie zuständig!
Die anderen Teile sind fürs Drehen in Beiträgen und Bilder gedacht, die über "Datei anhängen" hochgeladen worden sind!

Ich habe mal probeweise Teil 3 bei Dir eingebaut,
Wie es aussieht, funktioniert es...

Link: Bilder drehen

VG
Wolfgang

Mato findet das Top!

Antworten

#13 | Bilder in Beiträgen ohne zusätzlichen Forencode drehen - Teil 5 datum

03.06.2022 21:14 (zuletzt bearbeitet: 06.07.2024 08:31)

Wolfgang

Administrator

Informationen anzeigen

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

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

Bilder in Beiträgen ohne zusätzlichen Forencode drehen - Teil 5
Aktualisiert 06.07.24

Mit der folgenden Version bekommen die Bilder in der Voransicht jetzt 3 Optionen, die per Mouseover eingeblendet werden!
Es können ausgewählt werden: "Bild drehen", "Bild zurück drehen" und "Direkt zur Xobor-Vollansicht, ohne Optionen"!
Mit einem Bild-Klick kommt man in die vergrößerte Modal-Ansicht und hat hier ebenfalls 3 Optionen zur Verfügung.
Klickt man auf das X (Exit) gelangt man direkt zurück zum Beitrag und nicht wie bei der Xobor-Vollansicht zur Startseite!

Alles ohne zusätzlichen Forencode, der das Bild umschließen würde!

Das Skript ist so aufgebaut, dass die Werbung nicht überschrieben wird und somit auch für kostenlose Foren verwendbar ist!

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!
In beiden Ansichten gelangt man direkt zur Xobor-Vollansicht
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 Xobor-Vollansicht gebracht werden!
Auch der Textfluss "links" und "rechts" 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 + Mobil in "Untere Leiste / Header" eingetragen werden!
Wichtig! Im Plugin müssen rechts oben die "Unterstützten Templates" markiert werden, z.B.: Business - Template (144) und Mobile - Template (177) (Auswahl mit Mausklick oder Strg + Mausklick)!

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
 
<!-- 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%; ooverflow-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 {float:right; right:1%; margin-top:-20px; color: #f1f1f1; font-size: 40px; padding:0 10px 10px 10px;width:80px; font-weight:bold;}
  .closeImg_4:hover {color: #ff8000; text-decoration: none;}
 
  .buttonRotate_4 {position:absolute;width:98%; top: 30px; color:#222222 !important; text-align:center !important;  z-index:999999 !important;bborder:1px solid #eeeeee;}
  .buttonRotate_4 div, .buttonRotate_4 span {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, .image_bigger_4 {position:absolute; margin:2px;  padding:3px 2px 2px 3px; background:#eeeeee; border-radius:3px; z-index:999; border:1px solid #aaaaaa; opacity:1.0 !important;}
  .image_exit_4, .image_bigger_4 {margin-left: 27px; font-family:Arial; color:#000000; padding:5px 3px 2px 3px; font-size:26px; line-height:15px; font-weight:bold; text-decoration:none !important;}
  .image_bigger_4 {margin-left: 51px;}
  .image_turn_4:hover, .image_exit_4:hover, .image_bigger_4:hover {background:#cccccc; cursor:pointer;}
  .image_turn_4 {width:17px;}
  .row .image_turn_4 {width:35px;padding:6px;}
  .row .image_exit_4 {margin-left: 38px; padding:9px; font-size:35px;}
  .row .image_bigger_4 {margin-left: 78px; padding:9px; font-size:35px;}
  
  .xembedded {display:inline-block; }
  .xembedded .img-responsive {border-radius:6px; z-index:99999 !important; cursor:pointer; border: 1px solid #aaaaaa !important; padding-top:0px;}
  a.xembedded:hover {text-decoration:none !important;}
 
/* Linksymbol für Bilder ausblenden */
/* https://www.hilfe-tricks-tipps.de/t1446f31-External-Link-Grafik-Links-deutlicher-darstellen.html */
  a.xembedded, a.xembedded a {background:none; } 
  
/* z-index fürs Business-Template + Xobor (v6) */
  .boxheader, .topnavigation_wrap, .searchli, #xQuotesBase, #korrekturIndex2, .card {z-index:auto  !important;}
</style>
 
<script>
$(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><span title="Bild vergrößern" class="image_bigger_4">+</span>');
 
/* Button einblenden */
  if (screen.width >= 768) {
    $('.xembedded span').hide();
    $(".xembedded").hover(function(){ 
        $('span',this).show();  
        $('.img-responsive',this).css({'opacity':'0.9'}); 
    },function(){  
      $('span',this).hide();
      $('.img-responsive',this).css({'opacity':'1.0'});
    });
  };
 
/* Bild drehen Vorschau */
  $('.image_turn_4').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 - Vorschau */
  $('.image_exit_4').on('click', function(){
      $(this).closest('.xembedded').find('.img-responsive').removeClass().addClass('img-responsive img-fluid');
      return false;
    });
  
  $('.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, '').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>');    
 
/* Bild drehen - Modal */
  $('.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 - Modal */
   $('.defaultrot_4').on('click', function(){
      $(this).closest('.xembedded').find('.img-responsive').removeClass().addClass('img-responsive img-fluid');
      return false;
    });
    
/* Korrektur Business Template */
   $('body, .container, .xembedded span, .xembedded span img').css({'margin-left':'-10000px','overflow':'hidden'});
   $('.scoll_page').hide();
 
/* Modalansicht schließen */
    $('.closeImg_4').on('click', function(){ 
      location.reload();
      return false;
    });    
  
  return false;
  });
  
/* Bildbeschreibung */
  $('dl.img_text dd, dl.bildmodal dd').click(function(){
    $(this).toggleClass('imgtext');
  });
  
});
</script>
 

Schließen

Das gesamte Skript kann im Xobor (v6) oder Mobil in "Eigenes Javascript" oder "Eigene Fußzeile" kopiert werden!
Oder als PIugin in "Untere Leiste / Header" eingetragen werden!
Wichtig! Im Plugin muss rechts oben das "Unterstützte Template" markiert werden, Mobile - Template (177) (Auswahl mit Mausklick oder Strg + Mausklick)!

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
 
<!-- 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%; ooverflow-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 {float:right; right:1%; margin-top:-20px; color: #f1f1f1; font-size: 40px; padding:0 10px 10px 10px;width:80px; font-weight:bold;}
  .closeImg_4:hover {color: #ff8000; text-decoration: none;}
 
  .buttonRotate_4 {position:absolute;width:98%; top: 30px; color:#222222 !important; text-align:center !important;  z-index:999999 !important;bborder:1px solid #eeeeee;}
  .buttonRotate_4 div, .buttonRotate_4 span {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, .image_bigger_4 {position:absolute; margin:2px;  padding:3px 2px 2px 3px; background:#eeeeee; border-radius:3px; z-index:999; border:1px solid #aaaaaa; opacity:1.0 !important;}
  .image_exit_4, .image_bigger_4 {margin-left: 27px; font-family:Arial; color:#000000; padding:5px 3px 2px 3px; font-size:26px; line-height:15px; font-weight:bold; text-decoration:none !important;}
  .image_bigger_4 {margin-left: 51px;}
  .image_turn_4:hover, .image_exit_4:hover, .image_bigger_4:hover {background:#cccccc; cursor:pointer;}
  .image_turn_4 {width:17px;}
  .row .image_turn_4 {width:35px;padding:6px;}
  .row .image_exit_4 {margin-left: 38px; padding:9px; font-size:35px;}
  .row .image_bigger_4 {margin-left: 78px; padding:9px; font-size:35px;}
  
  .xembedded {display:inline-block; }
  .xembedded .img-responsive {border-radius:6px; z-index:99999 !important; cursor:pointer; border: 1px solid #aaaaaa !important; padding-top:0px;}
  a.xembedded:hover {text-decoration:none !important;}
 
/* Linksymbol für Bilder ausblenden */
/* https://www.hilfe-tricks-tipps.de/t1446f31-External-Link-Grafik-Links-deutlicher-darstellen.html */
  a.xembedded, a.xembedded a {background:none; } 
  
/* z-index fürs Business-Template + Xobor (v6) */
  .boxheader, .topnavigation_wrap, .searchli, #xQuotesBase, #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><span title="Bild vergrößern" class="image_bigger_4">+</span>');
 
/* Button einblenden */
  if (screen.width >= 768) {
    $('.xembedded span').hide();
    $(".xembedded").hover(function(){ 
        $('span',this).show();  
        $('.img-responsive',this).css({'opacity':'0.9'}); 
    },function(){  
      $('span',this).hide();
      $('.img-responsive',this).css({'opacity':'1.0'});
    });
  };
 
/* Bild drehen Vorschau */
  $('.image_turn_4').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 - Vorschau */
  $('.image_exit_4').on('click', function(){
      $(this).closest('.xembedded').find('.img-responsive').removeClass().addClass('img-responsive img-fluid');
      return false;
    });
  
  $('.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, '').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>');    
 
/* Bild drehen - Modal */
  $('.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 - Modal */
   $('.defaultrot_4').on('click', function(){
      $(this).closest('.xembedded').find('.img-responsive').removeClass().addClass('img-responsive img-fluid');
      return false;
    });
    
/* Korrektur Business Template */
   $('body, .container, .xembedded span, .xembedded span img').css({'margin-left':'-10000px','overflow':'hidden'});
   $('.scoll_page').hide();
 
/* Modalansicht schließen */
    $('.closeImg_4').on('click', function(){ 
      location.reload();
      return false;
    });    
  
  return false;
  });
  
/* Bildbeschreibung */
  $('dl.img_text dd, dl.bildmodal dd').click(function(){
    $(this).toggleClass('imgtext');
  });
  
});
</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

Mato und Daishi finden das Top!

Antworten

Moderations-Kommentar:

z-index für Symbole angepasst!

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

03.06.2022 22:17

Komisch, ich habe das gesamte Script mit dem Alten getauscht,
aber dann wurden die 3 Zeichen nicht mehr angezeigt.

Hab es daher wieder Rückgängig gemacht

Liebe Grüße von Mato

Antworten

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

04.06.2022 00:15

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

Hallo Mato,
danke für das Testen und das schnelle Feedback!

Habe den Fehler gefunden!

Die gezeigte Installation in Beitrag #13 hat nur als Plugin funktioniert.
Im Xobor (v6) unter Eigenes HMTL/JS werden keine Variablen erkannt.
Hier hat die Anpassung der Templates nicht geklappt!
Habe die Variablen herausgenommen und für die Templates (v1-4) und Xobor (v6)+Mobil zwei Installationsbeschreibungen in Beitrag #13 nachgetragen!

Bis dann und nochmal besten Dank
Wolfgang

Mato und 844er finden das Top!

Antworten

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

04.06.2022 13:28

Hallo Wolfgang und allen Beteiligten

Ganz großes Kino !! Vielen vielen Dank für das erarbeiten des tollen Script, was ich direkt mal ausprobiert habe.

Ich habe allerdings in meinen Foren leider ein kleines Problem (was die Optik) anbelangt, da ich einen zusätzlichen CSS-Code installiert habe, der die Vollbildansicht von Bildern in Beiträgen auf 45 % begrenzt. Das hat wohl -in Verbindung mit diesem Script- zur Folge, das das Linksymbol neben den Bildern zu weit nach rechts ausgelagert wird...

(siehe Link zum Forum: https://www.land-forum.de/t132f26366-t-R...Rat.html#msg213)

Hier der CSS-Code, den ich in meinem Forum eingefügt habe, damit Vollbilder im Beitrag nicht mit 100 %, sondern nur mit 45 % Bildgröße angezeigt werden.
.xquoteable img {
max-width: 45%;
height: auto;
box-shadow: 0 0.05rem 0.35rem rgba(0, 0, 0, 0) !important;
margin-top: 0.6rem;
}

Bestände da irgendwie die Möglichkeit, das speziell für diesen CSS-Code anzupassen, damit das Linksymbol näher zum Bild kommt ?

Lieben Gruß
Alfred

Antworten

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

04.06.2022 15:08

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

Hallo Alfred,
habe da eine Frage:

Was genau wolltest Du mit dem Eintrag bewirken, die maximale Größe der Bilder begrenzen?
Eigentlich müsste man die maximale Größe in Beiträgen in "Eigenschaften der Benutzergruppe" anpassen können!
Scheint im V6 nicht so richtig zu funktionieren! Mal schauen!
Dein Eintrag in % bewirkt eine verkleinerte Bild-Darstellung auf 45% der eingestellten Breite!
Ich frage deswegen, weil genau dieser Eintrag das Linksymbol so weit nach rechts verschiebt, allerdings nur im V6 und Mobil!
So gewollt?

.xquoteable img {
max-width: 45%;
}

Lösung 1:
Würdest Du für die Zeile mit folgenden Eintrag austauschen, funktioniert das Linksymbol korrekt!

.xquoteable img {
max-width: 900px;
}

Lösung 2:
Das Linksymbol für bestimmte Bilder ausblenden!
Da ich hier im Forum auch das Linksymbol eingebaut habe, kenne ich das Problem.
Ich hatte es schon in der Modal-Ansicht ausgeblendet, wo es nur stört und nicht hilfreich ist!
Hatte es im Laufe der Tests aus den Augen verloren!

Über Zeile 38 kann man das Linksymbol ausblenden!
Habe den Eintrag nochmals erweitert, sollte funktionieren!
Habe alles in Beitrag #13 korrigiert!

a.xembedded, a.xembedded a {background:none;}

Auch Dir besten Dank fürs Ausprobieren und das schnelle Feedback
Wolfgang

844er findet das Top!

Antworten

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

Tastenkombinationen (Shortcuts) fürs eigene Forum (v4 + v6) � � Minimierter Styleswitcher / Hintergrundwechsler für alle Template (auch V6)

Seite 2 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: 805

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

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

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

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

24.07.2024 11:08
von

Wolfgang • Zugriffe: 2696

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: 774
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: 901
Kleine Iconbar in der Bildergalerie!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 1 Heute 10:50
Wolfgang • Zugriffe: 1459
Punktesystem in der Bildergalerie
Erstellt im Forum Ank�ndigungen & Termine, wichtige News! von Wolfgang 0 08.09.2016 11:37
Wolfgang • Zugriffe: 875

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 €

58%

Forum - RE: Bilder in Beiträgen ohne zusätzlichen Forencode drehen - Teil 4 - 2

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

Bilder in Beiträgen ohne zusätzlichen Forencode drehen - Teil 5Aktualisiert 06.07.24

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

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

Bilder in Beiträgen ohne zusätzlichen Forencode drehen - Teil 5
Aktualisiert 06.07.24