Support Bereich Hier finden Sie Antworten auf alle Fragen zu Ihrem Xobor Forum.
Wählen Sie zunächst einen Hilfe-Bereich.

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:

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

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

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

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

<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

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

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


Wolfgang

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!

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

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!

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