MyBB.de Forum

Seiten: 1 2 3 4

(15.03.2017, 12:03)MrBrechreiz schrieb: [ -> ]Aber trotzdem lassen sie sich bei dir nicht drehen.

ja stimmt.
Habe es auch mit unerschiedlichen Browsern versucht und mit Android Handy.
Funzt leider nicht

Bei dir werden die Skripte nicht geladen, weil sie nicht über https eingebunden sind, bzw. das eine Skript über https gar nicht verfügbar ist.
Speichere es am besten von hier ab (als jQueryRotate.js):
http://jqueryrotate.com/
und lade es hoch in den Ordner jscripts deines Forums.

Dann änderst du dein Template "postbit_attachments_thumbnails_thumbnail" zu:

Code:
<span style="display:inline-block"><a href="attachment.php?aid={$attachment['aid']}" target="_blank"><img src="attachment.php?thumbnail={$attachment['aid']}" class="attachment bild{$attachment['aid']}" alt="" title="{$lang->postbit_attachment_filename} {$attachment['filename']}

{$lang->postbit_attachment_size} {$attachment['filesize']}

{$attachdate}" /></a>&nbsp;&nbsp;&nbsp;

<br />

<input type="button" id="button{$attachment['aid']}" value="90° drehen" />

</span>

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jQueryRotate.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<script type="text/javascript">

$("body").on("click", "#button{$attachment['aid']}", function () {

   $(".bild{$attachment['aid']}, canvas").rotate(getNextAngle());

});

nextAngle = 0;

function getNextAngle() {

   nextAngle += 90;

   if (nextAngle >= 360) {

       nextAngle = 0;

   }

   return nextAngle;

}

</script>

Hab es eingebaut.
Die Drehung geht schon mal.

Wenn man allerdings 1 Bilder dreht überlappt es ein anderes Bild bzw. kann man ein zweites Bild nicht mehr in die gleiche Postion drehen. Es springt dann um 180° weiter.

Ihr könnt das gerne in meinem Forum testen
https://modernvespa.info/Thread-Meine-Diva

Danke waldo.

Ja sehe es, da müsste man nun die CSS anpassen.

(15.03.2017, 12:48)MrBrechreiz schrieb: [ -> ]Danke waldo.

Ja sehe es, da müsste man nun die CSS anpassen.

Und da waren Sie wieder meine Probleme (speziell beim Wort "nur"):
1.) in welcher CSS?
2.) was muss man eintragen?

Thx
Tom

Niemand eine Idee was man da machen könnte?

ich vermute, es funktuniert nicht weil es keinen bezihung zu den Bildern gibt zum Beispiel Bild id1 id2 id3 usw...
Auf dem http://jqueryrotate.com/ ist ja nur Schablone also als hättest du einen HTML Formular aber ohne Funktion.

Sinnvoller ist es einen Cropper einzubauen https://fengyuanchen.github.io/cropperjs/

https://foliotek.github.io/Croppie/

oder

https://www.google.de/search?q=image+edi...image+crop&*

Wie Erkan schrieb, ohne Verwendung von IDs können nicht alle Bilder korrekt angesprochen werden.

Am einfachsten ist es, die Breite beim Drehen automatisch nach den Dimensionen des Bildes anzupassen und je nach Winkel Höhe oder Breite zu verwenden, dann sieht das Template "postbit_attachments_thumbnails_thumbnail" zB so aus:

Code:
<div id="att_thumb{$attachment['aid']}" style="display:inline-block;"><a href="attachment.php?aid={$attachment['aid']}" target="_blank"><img src="attachment.php?thumbnail={$attachment['aid']}" class="attachment" id="bild{$attachment['aid']}" alt="" title="{$lang->postbit_attachment_filename} {$attachment['filename']}

{$lang->postbit_attachment_size} {$attachment['filesize']}

{$attachdate}" /></a>&nbsp;&nbsp;&nbsp;

<br />

<input type="button" id="button{$attachment['aid']}" value="90° drehen" />

</div>

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jQueryRotate.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<script type="text/javascript">

$("body").on("click", "#button{$attachment['aid']}", function () {

   $("#bild{$attachment['aid']}, canvas").rotate(getNextAngle{$attachment['aid']}());

});

nextAngle = 0;

h = $("#bild{$attachment['aid']}").height()+10;

w = $("#bild{$attachment['aid']}").width()+10;

function getNextAngle{$attachment['aid']}() {

   nextAngle += 90;

   if (nextAngle >= 360) {

       nextAngle = 0;

   }

   iif (nextAngle == 90 || nextAngle == 270) {

      h = $("#bild{$attachment['aid']}").height()+10;

      w = $("#bild{$attachment['aid']}").width()+10;     

   } else {

        h = $("#bild{$attachment['aid']}").width()+10;

      w = $("#bild{$attachment['aid']}").height()+10; 

   }

   $("#att_thumb{$attachment['aid']}").css("width",h+"px");

   $("#att_thumb{$attachment['aid']}").css("height",w+"px");

   return nextAngle;

}

Oder eine Fancybox nehmen die die Dreh Funktion on Board hat.

Um nicht unter jedem Bild einen Button haben zu müssen und sich das JaveScript zu sparen, habe ich mich mal an ein kleines Plugin gesetzt, das die Bilder automatisch beim Hochladen dreht. Vorhandene Bilder können außerdem über einen eigenen Button im "Neu zählen & aktualisieren" Bereich im ACP gedreht werden.
Damit die Bilder gedreht werden können, müssen sie ihre Ausrichtung in ihren Metadaten (Exif Orientation) gespeichert haben, aber das machen inzwischen ja die meisten aktuellen mobilen Geräte.
Wer Interesse hat, die Funktion schon mal zu testen, findet das Plugin hier.

Seiten: 1 2 3 4

Vespa

doylecc

Vespa

MrBrechreiz

Vespa

Vespa

Erkan

doylecc

MrBrechreiz

doylecc