Expertise
Hover-Scale Widget (images)
Automatische Formatierung von Bildern mit HoverScale-Effekt in Zoom-Container bei MouseOver
Anwendungen
Verknüpfte Bilder/Lightbox-zoom
Bilder in Spaltenelementen
Bilder in Galerie-Elementen
format upper img hoverscale
...Bilder oben mit "echtem" Rahmen!
Funktionsweise
- Das Hover-Scale Widget formatiert das jeweils darüber liegende Element bzw. die darin enthaltenen Bilder so, dass eine leichte Vergrößerung erfolgt, sobald mit der Maus über das entsprechende Bild gefahren wird. Dabei spielt es keine Rolle, ob das jeweilige Bild verlinkt* ist, oder nicht.
- Die Vergrößerung erfolgt innerhalb eines unsichtbaren Rahmens (virtueller Container)**, sodass die äußeren Abmessungen des Bildes durch den Effekt nicht berührt werden.
- Das Widget ist so aufgebaut, dass es sowohl auf einzelne Bilder anwendbar ist, als auch auf Bilder in übergeordneten Sammel-Elementen (z.B. Spaltenelemente oder Galerien). Bei letzteren werden alle Bilder innerhalb des Sammelelementes automatisch mit dem Effekt versehen, sobald das Widget unterhalb desselben eingesetzt wird.
*...bei Bildern mit Lightbox-Zoom überschneidet sich der Effekt auf mobilen Geräten manchmal mit der Lightbox-Funktion!
**...Bilder dürfen beim Einsetzen in Jimdo nicht händisch skaliert werden, sonst funktioniert der virtuelle Container nicht!
Widget:
Das Widget wird einfach unterhalb der zu formatierenden Bilder eingesetzt (html-Widget-Element). Die Formatierung wird dann automatisch über die dem Widget zugeordneten Skripte vorgenommen.
Beispiele
Hoverscale-Effekt für verknüpfte Jimdo-Standardbildelemente oder Lightbox-Zoom
format upper img hoverscale
format upper img hoverscale
format upper img hoverscale
Hoverscale-Effekt für einzelnes Jimdo Standardbild
format upper img hoverscale
Hoverscale-Effekt bei Jimdo Spaltenelement
(...automatisch für alle Bilder im Spaltenelement)
Service 1
Consectetur adipiscing elit. Inscite autem medicinae et gubernationis ultimum cum ultimo sapientiae comparatur.
Service 2
Mihi quidem Antiochum, quem audis, satis belle videris attendere. Hanc igitur quoque transfer in animum dirigentes.
Service 3
Tamen a proposito, inquam, aberramus. Non igitur potestis voluptate omnia dirigentes aut tueri aut retinere virtutem.
format upper img hoverscale
Hoverscale-Effekt für Jimdo Standard Galerie ...hier horizontal und per CSS zentriert
(...funktioniert mit virtuellem Rahmen nur mit Abstand=0,
automatischer Abstand: 5px)
format upper img hoverscale
Hoverscale-Effekt für Jimdo Standard Galerie-Slider
(...funktioniert mit virtuellem Rahmen nur innerhalb eines Spaltenelements)
format upper img hoverscale
hoverscale-Skript