Image bei Klick vergrößern

[Andre0909]

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

[redlav]

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

[Andre0909]

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

[redlav]

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:

Code Auswählen Erweitern

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

[Andre0909]

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:

Code Auswählen Erweitern

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

Code Auswählen Erweitern

  <div data-type="image"
     data-size="60%"
     data-get="dummyKamerabild:reading_'1p'"
     id="Bild">
  </div>

und in meiner user:css ergänzt:

Code Auswählen Erweitern

  #Bild:hover{
    width: 704px;
    height: 576px;
    transition: 3s ease-in-out;
}

Aber leider passiert noch nix...

[redlav]

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.

[Andre0909]

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

[redlav]

Ich habes bei mir mit einem Link auf ein Wettericon so getestet:

Code Auswählen Erweitern


<div id="Bild">
   <div data-type="image"
           data-size="60%"
           data-get="Wetter3:fc0_weatherDayIcon">
    </div>
</div>


[Andre0909]

Ich habes bei mir mit einem Link auf ein Wettericon so getestet:

Code Auswählen Erweitern


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

[redlav]

Hast du in deiner Index.html deine User-Css auch eingebunden?

Code Auswählen Erweitern


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


[Andre0909]

Hast du in deiner Index.html deine User-Css auch eingebunden?

Code Auswählen Erweitern


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

[redlav]

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

Puh, da bin ich aber mit meinem Latein bald am Ende. Cache des Browser mal gelöscht?

[Andre0909]

Manchmal habe ich das mit dem lesen und verstehen nicht wirklich drauf

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

[redlav]

Kennst du w3schools? Die haben so einen try-Editor.Geh mal hier hin:
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_hover

und füge dann da auf der linken Seite folgendes ein:

Code Auswählen Erweitern


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

[Andre0909]

Das funktioniert...