Bild-Dreh-Button im V6

28.12.2020 23:32 (zuletzt bearbeitet: 28.12.2020 23:41)
#1 Bild-Dreh-Button im V6
avatar
Mitglied


Wollte den "Bild-Dreh-Button" auch im V6 ermöglichen (Für alle Fälle...).
Bilder Drehen-Funktion in der Galerie des Forums
Aber!

Ich bekomme das Bild mit jQuery im V6 nicht gedreht und den Button erst gar nicht gesetzt!
Habe auch mit den folgenden Zeilen so einiges probiert, funktioniert aber nicht:

1
2
3
 
<script>{{footerjs.start}}{{footerjs}} ... {{footerjs.end}}</script>
oder
<script>window.addEventListener('load', function () { ... });</script>
 


Irgendwie wird das Script nicht umgesetzt!


Per CSS funktioniert aber so einiges:

1. Bild drehen um 90 Grad nach links, funktioniert in der CSS:

1
 
.ekko-lightbox-item img { transform:rotate(-90deg); }
 


2. Text mittig setzen zwischen Bild-Titel und Schließen-Button (X), funktioniert auch in der CSS / Button setzen mit "content" geht nicht - HTML wird nicht umgesetzt :

1
 
.close::before { content: "Bild-Dreh-Button"; position:absolute;left:0px;width: 100%; }
 


Das jQuery-Script müsste so funktionieren, will aber nicht:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<style>
.buttonRotate {display:block !important; position:absolute;left:0px;width: 100%;}
.buttonRot a:hover {text-decoration: underline;}
.buttonRot img {border: none; vertical-align: middle; padding-right: 3px;}
.buttonRot small {font-size:12px !important;}
</style>
 
<script>
window.addEventListener('load', function () {
 
// Button setzen - wird nicht gesetzt....
$('.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 - wird nicht gedreht, weil auch kein Button da ist....
$('.buttonRot').toggle(function(){
$('.ekko-lightbox-item img').css({'transform': 'rotate(-90deg)'});
}, function(){
$('.ekko-lightbox-item img').css({'transform': 'rotate(0deg)'});
});

});
</script>
 


Wo liegt der Fehler?
Wer kann helfen?
@Ingmar @Olaf @Mike48 @creator

Schon mal besten Dank im Voraus
Wolfgang

29.12.2020 01:00 (zuletzt bearbeitet: 29.12.2020 01:05)
avatar  creator
#2 RE: Bild-Dreh-Button im V6
cr
Mitglied

Zitat von Wolfgang im Beitrag #1
Das jQuery-Script müsste so funktionieren, will aber nicht

Grund dafür ist, dass der entsprechende JavaScript-Code zu früh ausgeführt wird. Direkt nach dem Laden der Seite sind das Bild im "Vollbild" und der Rotieren-Button noch nicht auf der Seite verfügbar. Beides wird dynamisch über JavaScript der Seite hinzugefügt. Du musst also das richtige JavaScript-Event verwenden, um den Code zum richtigen Zeitpunkt zu laden.

Passende Events wären $(window).on('shown.bs.modal' zum Erkennen des Bilder-Modals und $(document.body).on('click', ".buttonRot" zum Erkennen des Klicks des Rotieren-Buttons. Letzteres funktioniert nicht mit toggle. Stattdessen kannst du toggleClass mit einer weiteren CSS-Klasse verwenden.

Außerdem ist .modal-header .close zu unspezifisch als Selektor - der Rotieren-Button wird somit allen Modal-Fenstern angehängt, auch beispielsweise der Moderatoren-Aktionen. Zusätzlich .ekko-lightbox müsste ausreichen.

Die obengenannten Änderungen habe ich unter CSS/SCSS Addon und Eigenes HMTL/JS → Eigenes Javascript getestet und funktionieren bei mir einwandfrei:

CSS:

1
 
.rotate90{ transform: rotate(-90deg); }
 

JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<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>
 


 Antworten

 Beitrag melden
29.12.2020 08:54
#3 RE: Bild-Dreh-Button im V6
avatar
Mitglied

Wow!
Einfach Klasse!
Das hätte ich so nicht hinbekommen!

Besten Dank, auch für Deine super schnelle Antwort!


Wolfgang

31.12.2020 13:41 (zuletzt bearbeitet: 31.12.2020 14:02)
#4 RE: Bild-Dreh-Button im V6
avatar
Mitglied

Hallo creator,
habe mir nochmal Deine "passenden Events" angeschaut und nachgelesen......
Ist alles schon ziemlich speziell.

  • Schade ist es, dass das normale "jQuery-Click" einfach nicht funktionieren will.
  • So klasse "toggle" auch ist, hakt es hier und da. Habe ich auch im "Profil" schon festgestellt. Es funktioniert nicht überall!
  • Besonders ist "shown.bs.modal". Hier geht es schon in Richtung "Modalkomponente von Bootstrap ".
  • Speziell ist auch $(document.body)....... $("body") würde auch funktionieren, aber "document.body" hat wohl noch andere Vorteile!

Noch etwas:
Die 90Grad-Korrektur wird wohl nur selten genutzt, aber wenn sie dann doch gebraucht wird und verfügbar ist, ist das schon super!
Für bestimmte Bilder ist es gut, sie auch zu drehen. Besonders technische Bilder und Zeichnungen profitieren hiervon! Man kann somit Details besser sehen und beurteilen!
Deswegen hier ein Vorschlag für einen Bild-Dreh-Button mit einem Raster von 45 Grad!
Beginnend mit einer Drehung linksherum.

Hier das Skript mit CSS-Eintrag, damit der Button und das Bild gut platziert und der Button nicht vom drehenden Bild verdeckt wird.
Funktioniert auch in älteren Browserversionen.
Frage:
Wenn Du Zeit hast, kannst Du einen Blick darauf werfen?

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
 
<style>
.buttonRot { position:absolute; width: 100%; z-index:99999; }
.buttonRot a:hover { text-decoration: underline; }
.buttonRot img { border: none; margin: -2px 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; }

.rotate315 { padding-top:200px !important; padding-bottom:200px !important; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); -ms-transform: rotate(-315deg); transform: rotate(-315deg); }
.rotate270 { padding-top:170px; padding-bottom:6%; -webkit-transform: rotate(-270deg); -moz-transform: rotate(-270deg); -ms-transform: rotate(-270deg); transform: rotate(-270deg); }
.rotate225 { -webkit-transform: rotate(-225deg); -moz-transform: rotate(-225deg); -ms-transform: rotate(-225deg); transform: rotate(-225deg); }
.rotate180 { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); }
.rotate135 { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); }
.rotate90 { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); }
.rotate45 { -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>
 

Bitte anklicken!

Auch hier: Bilder drehen in der Bildergalerie - Für alle Templates





Bis dann und besten Dank!
Ein guten Rutsch für Dich, allen Mitglieder und dem Xobor-Team
Wolfgang

04.01.2021 07:11 (zuletzt bearbeitet: 04.01.2021 07:12)
avatar  creator
#5 RE: Bild-Dreh-Button im V6
cr
Mitglied

Hallo Wolfgang,

ich wünsche dir noch nachträglich ein frohes neues Jahr.

Mit dem Code sehe ich keine Probleme und auf dem Desktop funktioniert der Ansatz.

Allerdings gibt es bei kleineren Bildschirmgrößen (wie einem Smartphone) noch ein paar Probleme:
Der Drehen-Button überdeckt teilweise den Bildtitel.

Sieht so aus, als ob das position: absolute auf .buttonRot die Ursache dafür ist.
Wenn du das width: 50% von .buttonRot entfernst und mit margin: 0 auto ersetzt, wird der Button dennoch zentriert auf einer Zeile angezeigt.

1
 
.buttonRot {margin: 0 auto; z-index:99999;}
 




Außerdem ist das Bild bei einer Drehung um 315° und 217° auf dem Smartphone nicht sichtbar. Grund dafür ist das padding für diese Klassen. Wenn du das padding-top und padding-bottom aus den Klassen für das Rotieren entfernst wird das Bild auch auf der kleinen Bildschirmgröße korrekt angezeigt.


 Antworten

 Beitrag melden
05.01.2021 06:55 (zuletzt bearbeitet: 05.01.2021 07:00)
#6 RE: Bild-Dreh-Button im V6
avatar
Mitglied

Hallo creator,
besten Dank....
Habe Deine Vorschläge durchgearbeitet.
Gar nicht so einfach alles in der mobile Version und in der Desktop-Version (v6) in Einklang zu bringen!

Zu 1. Super Idee und funktioniert!
Wichtig ist wohl, dass "auto" in "margin-left" steht.
Habe .buttonRot etwas angepasst. Jetzt steht der Dreh-Button in einer Linie zur Überschrift, hat sogar einen Abstand zum X-Button und wird nicht umgebrochen!

1
 
.buttonRot {margin: 5px 5px 0 auto ; z-index:999999;white-space:nowrap;}
 



Zu 2. Da hatte ich wohl nicht alles getestet...
In der Destop-Version ging es....
Mit "padding" wollte ich das Bild auf eine Größe halten, hat in der Destop-Version (v6) auch funktioniert...

Aber!

Ich denke es gibt noch ein Konflikt in der Mobilen-Version zwischen "Antippen Bild weiter" (weiße Pfeile) und "Wischen Bilder weiter".
Beides funktioniert, stört sich aber....

Besonders schlecht für den Dreh-Button, der auch angetippt werden muss.
Hier kann es passieren, dass das Bild durch das Tippen ein Bild weiter springt.
Wenn es hierzu keine Lösung gibt, ist es besser, denke ich, den Drehbutton in der mobilen Version zu deaktivieren!

Gruß
Wolfgang

07.01.2021 13:46
avatar  844er
#7 RE: Bild-Dreh-Button im V6
avatar
Mitglied

Hallo @Wolfgang

Die Idee mit dem Bild drehen in den Galerien habe ich für ein Forum schon mal übernommen. Habe es aber optisch etwas aufgebessert (siehe Bild)


Was ich aber noch viel viel besser finden würde wäre, wenn man diese Möglichkeit bei Bildern im Forum anwenden könnte, Hintergrund ist der, das es immer mal wieder Bilder in Forumsbeiträgen gibt, die in der Vollbildansicht falsch gedreht werden.

Hier mal ein Beispiel/Beitrag in einem meiner Foren, wo das Bild im Forumsbeitrag richtig steht, aber sobald man das Bild anklickt, dann wird es in der Vollbildansicht falsch gedreht.
Klick mal bitte diesen Beitrag an https://www.caseih-forum.de/t2324f12-quo...6.html#msg18720 und dort dann auf dieses Bild in dem Beitrag
(ist das 2. Bild im Beitrag)

Wenn man da jetzt im Vollbildmodus einen Button zum drehen von Bildern hätte, dann wäre das richtig GEIL

Hättest du für sowas eine Lösung. Ich bin da leider ein totaler Laie....

Gruß 844er

Fehlende PS werden durch Wahnsinn ersetzt

 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!