Bildanzeige - auf Klick vergrößern oder Link öffnen?

[Morg]

Moin!

Nachdem ich mir jetzt erstmal einen grundlegenden Überblick über die CV verschafft habe, versuche ich so die eine oder andere "Spielerei".

Z.B. habe ich die (bekannten) Wetterkarten vom DWD und von yr.no eingebunden. Ich möchte diese gern in kleiner Darstellung anzeigen; mit Klick auf das Bild soll entweder des Bild in Originalgröße angezeigt werden (als Overlay, als neues Fenster, als href=bild.jpg o.ä.).

Ich weiß, dass das in "reinem" HTML mit anchor-Tag, onclick-JS oder mit CSS-Erweiterungen möglich ist. Gibt es (derzeit) Möglichkeiten, dies direkt im Widget, mit einem anderen Widget oder per Attribut zu nutzen? (Kann man in der visu-Config style-Argumente "durchreichen"?)

Vielleicht hat jemand von Euch schon sowas gemacht und kann dazu was sagen / zeigen?

Gruß
Sebastian

[Chris M.]

Du solltest ein class-Attribut setzen können, dass dann "durchgereicht" wird.
Dazu kannst Du außerdem eine custom-CSS erstellen, die darauf reagiert. (Schau mal auf http://www.cometvisu.org/wiki/CometV...onfig/swiss/de nach ein paar Hinweisen dafür)

Außerdem kannst Du natürlich über die custom-JS einen JavaScript-Code einbinden.

Die "richtige" Lösung für so ein Pop-Up-Bild wäre natürlich ein eigenes Widget oder (vermutlich besser) eine Erweiterung des bestehenden Image-Widgets

[Morg]

Ich habe mal zwei einfache Varianten eingebaut, schön ist aber anders. Zum Testen / Demonstrieren: link="1" öffnet das Bild bei Klick in neuem Tab; zoom="1" vergrößert das Bild auf die doppelte Größe, aber nur innerhalb des Widgets -> die Ränder verschwinden, das Innere wird größer.

Alle aufwendigeren Varianten ("Lightbox" usw) bekomme ich nicht auf Anhieb portiert; ich habe zum Testen jetzt erstmal die aktuelle git-Version installiert, mit der aus dem .tar.gz ging es nämlich gar nicht...

[code="image.js"]
[...]

// create the main structure
var ret_val = basicdesign.createDefaultWidget('image', $e, path, flavour, type);
// and fill in widget specific data
var data = templateEngine.widgetDataInsert( path, {
'width' : $e.attr('width'),
'height' : $e.attr('height'),
'src' : $e.attr('src'),
'zoom' : $e.attr('zoom'),
'link' : $e.attr('link'),
'refresh': $e.attr('refresh') ? $e.attr('refresh') * 1000 : 0
});

// create the actor
var imgStyle = '';
var imgClass = '';

if (data.width) {
imgStyle += 'width:' + data.width + ';';
}
else {
imgStyle += 'width: 100%;';
}
if (data.height) {
imgStyle += 'height:' + data.height + ';';
}
if (data.zoom == "1") {
imgClass = 'class="img_zoom"';
}

if (data.link) {
var actor = '<div class="actor"><a target="_blank" href="' + data.src + '"><img src="' + data.src + '" ' + imgClass + ' style="' + imgStyle + '" /></a></div>';
} else {
var actor = '<div class="actor"><img src="' + data.src + '" ' + imgClass + ' style="' + imgStyle + '" /></div>';
}
[...]
[/code]

und CSS:

[code="custom.css"]
img.img_zoom {
transition: -webkit-transform 0.25s ease;
}

img.img_zoom:active {
-webkit-transform: scale(2);
}
[/code]


Ich halte das nicht für sinnvoll - neuer Tab ist a) für das Design zu simpel, b) auf versch. Visu-Geräten ggf. im Vollbildmodus unsinnig. Zoom geht bei mir nur im Chromium, nicht im Firefox (es gibt noch einen Fix für IE, aber das ist bei CV wohl nicht so wichtig ).

Vielleicht versuche ich mich trotzdem nochmal an einer Lightbox; ich befürchte aber, dass - nach allem, was ich bisher gesehen habe - das "Hineinoperieren" nicht so ganz ohne sein wird...