Image widget / Zoom to Fullscreen on click

[texel]

Hallo zusammen,

ich hatte das Problem, dass ich Images auf klick Fullscreen vergrößern möchte (Anwendungsfall ist ein Webcam image).

Schließlich kam ich auf folgende Lösung.

CSS anlegen (am besten in css/fhem-tablet-ui-user.css)

Code Auswählen Erweitern


.imgclick .ZoomImage {
    position: fixed;
    top: 0px;
    left: 0px;
    width:100%;
    height: 100%;
    z-index: 9999;
}


dieses dann in der index.html einbinden:

Code Auswählen Erweitern

<link rel="stylesheet" href="/fhem/www/tablet/css/fhem-tablet-ui-user.css" />

Da ich javascript-code benötige, hier eine nicht so schöne Lösung (aber es funktioniert):
js/fhem-tablet-ui.js editieren und folgendes nach "init: function () {" einfügen:

Code Auswählen Erweitern

      $(document).on('click', '.imgclick', function (){
        $(this).find("img").toggleClass("ZoomImage");
      });

dies ist nicht so schön, da nach einem Update der tablet UI der Code verloren geht, aber vielleicht hat jemand eine bessere Lösung?

Im html:

Code Auswählen Erweitern

      <div class="imgclick">
          <div  data-type="image" data-width="100%" data-height="580px" data-refresh=45 data-url="/fhem/www/tablet/123.png" data-opacity="1"></div>
      </div>

viele Grüße,

Texel

[Thorsten Pferdekaemper]

Danke für die Anregung!

dies ist nicht so schön, da nach einem Update der tablet UI der Code verloren geht, aber vielleicht hat jemand eine bessere Lösung?

Dich zwingt ja keiner, das in die fhem-tablet-ui.js zu schreiben. Du kannst das auch in eine eigene Datei schreiben und dann den entsprechenden <script>-Tag Deinen FTUI-Seiten hinzufügen. ...oder sogar das ganze direkt in Deine FTUI-Seiten schreiben.

Folgendes funktioniert sogar in FUIP in einem HTML-View: 

Code Auswählen Erweitern


<style type="text/css">
.imgclick .ZoomImage {
    position: fixed;
    top: 0px;
    left: 0px;
    width:100%;
    height: 100%;
    z-index: 9999;
}
</style>

<script type="text/javascript">
$(document).on('click', '.imgclick', function (){
        $(this).find("img").toggleClass("ZoomImage");
      });
</script>

<div class="imgclick">
<div  data-type="image" data-width="100%" data-height="100%" data-refresh=45 data-url="/fhem/uilocal/fuip/images/pexels-gleitschirm.jpg" data-opacity="1"></div>
</div>


Das müsste auch direkt im HTML-Text in einer "normalen" FTUI-Seite gehen.

Texel

Nordsee oder Finn Alexander aus 2062?

Gruß,
   Thorsten

[Bischemer]

Hallo zusammen,

bevor ich ein neues Thema aufmache wollte ich es mal hier versuchen da ihr schon eine "on click" Lösung für die Darstellung von Bildern habt . Ich habe mir letzte Woche eine Alexa Show 2 geholt und dachte mir das sich diese auch prima zur Darstellung von TabletUI eignet. Dann aber ohne die störende Firefox Kopfzeile
Daher suche ich nun nach einer Lösung die, die TabletUI Seite automatisch beim starten in den Fullscreen Mode versetzt. Kann man euren "on click" Ansatz auf die ganze Darstellung erweitern ?
... ich sage schon mal Danke
VG
Stephan