Ich schon wieder :) Kennt jemand eine Möglichkeit per Image-Widet eingebundene Bilder per "onclick" zu vergrößern? Bilder werden in einer Tabelle dargestellt und sind eigentlich in HD Auflösung... DANKE :)
Mit einem Popup kannst du das Bild in der gewünschten Größe darstellen, wenn du auf das Bild klickst.
Oder per css, wenn du dem Bild eine ID verpasst und in der User-Css den Hover dafür definierst:
#ID:hover{
width: 704px;
height: 576px;
transition: 3s ease-in-out;
}
Okay, wie verpasse ich dem Bild denn eine ID?
Weil das bild ist immer ein anderes und der Link wird aus einem Reading eingelesen...
Alternativ: Arbeite zwar mit Popups, aber wie wäre die Syntax bei einem Klick auf das Bild? Oder Einbidnung wie bei normalem Popup auch? Danke dir
Das Bild wird ja mit Sicherheit in einem <div> dargestellt. Dann sschreibst du einfach <div id="bild"> In der CSS schreibst du dann #bild:hover.
Dann wird das Bild bis auf die angegebene Größe vergrößert, wenn du mit der Maus draufklickst oder am Tablet den Finger draufhälst.
So hatte ich das mal bei meiner Kamera:
<img id="Kamera" src='http://192.168.1.24:5000/webapi/entry.cgi?api=SYNO.SurveillanceStation.VideoStreaming&version=1&method=Stream&cameraId=1&format=mjpeg&_sid="XbuvxloKlkRfw1580MIN802002"' alt width="100%" height="100%">
Beim Popup ist alles wir wie anderen auch, sehe da keine andere vorgehensweise.
Zitat von: redlav am 22 Januar 2017, 12:24:13
Das Bild wird ja mit Sicherheit in einem <div> dargestellt. Dann sschreibst du einfach <div id="bild"> In der CSS schreibst du dann #bild:hover.
Dann wird das Bild bis auf die angegebene Größe vergrößert, wenn du mit der Maus draufklickst oder am Tablet den Finger draufhälst.
So hatte ich das mal bei meiner Kamera:
<img id="Kamera" src='http://192.168.1.24:5000/webapi/entry.cgi?api=SYNO.SurveillanceStation.VideoStreaming&version=1&method=Stream&cameraId=1&format=mjpeg&_sid="XbuvxloKlkRfw1580MIN802002"' alt width="100%" height="100%">
Beim Popup ist alles wir wie anderen auch, sehe da keine andere vorgehensweise.
Hmm..klappt leider noch nicht.. Habe die Id eingebunden:
<div data-type="image"
data-size="60%"
data-get="dummyKamerabild:reading_'1p'"
id="Bild">
</div>und in meiner user:css ergänzt:
#Bild:hover{
width: 704px;
height: 576px;
transition: 3s ease-in-out;
}Aber leider passiert noch nix...
Bin jetzt auch nicht der html/css-Held....
Vielleicht liegt es daran, das ich das im <img>-Tag direkt hatte und du im Image-Wigdet.
Eventuell noch mal ein separates div drumherum und da die ID vergeben?
Habe ich gerade mal ausprobiert Funktioniert mit dem zustätzlichem <div> mit der ID.
Zitat von: redlav am 22 Januar 2017, 12:42:39
Bin jetzt auch nicht der html/css-Held....
Vielleicht liegt es daran, das ich das im <img>-Tag direkt hatte und du im Image-Wigdet.
Eventuell noch mal ein separates div drumherum und da die ID vergeben?
Habe ich gerade mal ausprobiert Funktioniert mit dem zustätzlichem <div> mit der ID.
öhm wie meinst das denn genau..also die Image DIV in eine ID-div legen?
<div id="Bild">
<div data-type="image"
data-size="60%"
data-get="dummyKamerabild:reading_'1p'">
</div></div>
klappt leider auch nicht
Ich habes bei mir mit einem Link auf ein Wettericon so getestet:
<div id="Bild">
<div data-type="image"
data-size="60%"
data-get="Wetter3:fc0_weatherDayIcon">
</div>
</div>
Zitat von: redlav am 22 Januar 2017, 13:01:31
Ich habes bei mir mit einem Link auf ein Wettericon so getestet:
<div id="Bild">
<div data-type="image"
data-size="60%"
data-get="Wetter3:fc0_weatherDayIcon">
</div>
</div>
Hmm das habe ich ja exakt genauso? stimmt beim CSS part evtl was nicht? ..seltsam
In der CSS habe ich genau das eingetragen:
#Bild:hover{
width: 704px;
height: 576px;
transition: 3s ease-in-out;
}
Und es ist auch die richtige, habe da nämlich auch die Gridster gerade auf abgerundete Ecken gestellt und das klappte auch ?!
Hast du in deiner Index.html deine User-Css auch eingebunden?
<link rel="stylesheet" href="/tablet/css/fhem-tablet-ui-user.css" />
Zitat von: redlav am 22 Januar 2017, 13:09:37
Hast du in deiner Index.html deine User-Css auch eingebunden?
<link rel="stylesheet" href="/tablet/css/fhem-tablet-ui-user.css" />
Jaja klar, deswegen meinte ich, dass ich darin auch die gridster elemente abgerundet habe und das auch funktioniert. Die wird also korrekt eingelesen...
Zitat von: Andre0909 am 22 Januar 2017, 13:04:09
Und es ist auch die richtige, habe da nämlich auch die Gridster gerade auf abgerundete Ecken gestellt und das klappte auch ?!
Manchmal habe ich das mit dem lesen und verstehen nicht wirklich drauf 8)
Puh, da bin ich aber mit meinem Latein bald am Ende. Cache des Browser mal gelöscht?
Zitat von: redlav am 22 Januar 2017, 14:52:22
Manchmal habe ich das mit dem lesen und verstehen nicht wirklich drauf 8)
Puh, da bin ich aber mit meinem Latein bald am Ende. Cache des Browser mal gelöscht?
Alles gut :)
Ne es klappt einfach nicht :( habe cache gelöscht und 2. Browser geteset. Es passiert einfach nix :(
Kennst du w3schools? Die haben so einen try-Editor.Geh mal hier hin:
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_hover (http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_hover)
und füge dann da auf der linken Seite folgendes ein:
<!DOCTYPE html>
<html>
<head>
<style>
#Bild:hover{
width: 200px;
height: 200px;
transition: 3s ease-in-out;
}
</style>
</head>
<body>
<img src="http://www.proplanta.de/wetterdaten/images/symbole/n2.gif" id=Bild>
<p><b>Note:</b> The :hover selector style links on mouse-over.</p>
</body>
</html>
Dann sollte nach dem Klick auf run auf der rechten Seite das Icon erscheinen und beim Mouseover größer werden.
Das funktioniert...
Das ist ja seltsam. Hast du es mal mit einem anderen Link auf das Bild versucht?
Eventuell hast du ja auch ein Wetterdevice, von dem du mal das Reading so einbinden
kannst, wie ich das gemacht habe.
Zitat von: redlav am 22 Januar 2017, 15:34:32
Das ist ja seltsam. Hast du es mal mit einem anderen Link auf das Bild versucht?
Eventuell hast du ja auch ein Wetterdevice, von dem du mal das Reading so einbinden
kannst, wie ich das gemacht habe.
Redlav, ich danke dir es geht jetzt. Warum verstehe ich aber nicht. Habe die ID in der CSS und in FTUI jeweils auf Bildgross umbenannt. Und schon ging es ?!?! Vielleicht war "Bild" iregdnwie belegt? Kein PLAN! :> DANKE DIR!!!
Hallo, dein Bild kommt doch auch aus einer reading URL, Oder?
Bei mir zeigt er das Bild nicht an.<li data-row="5" data-col="2" data-sizex="1" data-sizey="1" class="halbTransparent">
<header>Snapshot</header>
<div data-type="image"
data-device="netatmo_webhook"
data-get="snapshot"
data-size="20%"
class"cell">
Hatte es so probiert:
Zitat von: Badflex am 22 Januar 2017, 15:45:00
Hallo, dein Bild kommt doch auch aus einer reading URL, Oder?
Bei mir zeigt er das Bild nicht an.<li data-row="5" data-col="2" data-sizex="1" data-sizey="1" class="halbTransparent">
<header>Snapshot</header>
<div data-type="image"
data-device="netatmo_webhook"
data-get="snapshot"
data-size="20%"
class"cell">
Hatte es so probiert:
Versuch mal:
<div data-type="image"
data-get="netatmo_webhook:snapshot"
data-size="20%"
class"cell">
Die Url des hinterlegten Readings muss aber auch funktionieren also würde ich mal mit data-url="<url>des Readings" testen.
Bei mir klappte das auch nicht deswegen musste ich beim reading .././ davor setzen... Aber vielleicht hat hier auch jmd eine andere Lösung
Da tut sich auch nichts.
Mit: data-url="http://www.jdhfhfhfhfh" geht's.
Irgendwie holt er das wohl nicht aus dem reading.
Fehler gefunden. ein Leerzeichen hat wohl das bild blockiert.
Zitat von: Badflex am 22 Januar 2017, 15:52:19
Da tut sich auch nichts.
wie gesagt der link des readings muss passen ... versuch den mit data-url direkt einzubinden, wenn das nicht geht stimmt die Verzweigung nicht. Soweit ich das Verstanden habe geht das image widget immer davon aus, das der Link vom Verzeichnis der Seite ausgehen muss, alslo liegt das Bild von der Seite aus im Ordner image und heisst snapshot, muss das reading images/Snapshot.jpg heißen. Ansonsten muss das Reading verändert werden...meine ich