Anzeige
Anzeige
News
Artikel merken

FocusPoint: jQuery-Plugin für fokales Cropping

Der Einsatz von Bildern im Responsive Webdesign bringt einige Herausforderungen mit sich. FocusPoint hilft dabei, den wichtigsten Bildausschnitt immer im Vordergrund zu halten. Wir stellen das jQuery-Plugin kurz vor.

Von Ilja Zaglov
2 Min. Lesezeit
Anzeige
Anzeige

(Screenshot: FocusPoint)

Webseiten haben schon seit langem kein feststehendes Layout mehr. Mit Responsive Webdesign haben Webworker die Möglichkeit, hochdynamische Webseiten zu schaffen, die sich jeder Geräteklasse anpassen können. Die zahlreichen Möglichkeiten bringen aber auch einige Herausforderungen mit sich – eine davon ist der Umgang mit Bildern. Mit Responsive Images stehen serverseitige Techniken zur Verfügung, um Bilder der Gerätegröße anzupassen. Ein Problem behebt eine automatische Lösung jedoch meistens nicht: den Bildausschnitt.

Anzeige
Anzeige

Bilder in responsiven Webseiten können durch die Skalierung auf die entsprechende Viewport-Größe schnell ihre Wirkung verlieren und aus dem Kontext gerissen werden. Focalpoint.js sagt dieser Problematik den Kampf an.

Wie FocusPoint funktioniert

FocusPoint Beispiel

Ohne Fokuspunkt können Bilder in responsiven Layouts schnell aus dem Kontext gerissen werden. (Grafik: FocusPoint)

Die Grundidee von FocusPoint ist, den wichtigsten Punkt eines Bildes – den so genannten „focal point“ – immer sichtbar zu lassen, egal wie das Bild durch die Änderungen am Layout der Webseite skaliert werden sollte. Hierfür benötigt FocusPoint nur die Koordinaten dieses Punktes und arbeitet dann im Hintergrund, um sicherzustellen, dass er nie „ausgecroppt“ wird.

Anzeige
Anzeige
FocusPoint Koordinatensystem

FocusPoint errechnet ein koordinatensystem mit dem der Fokuspunkt des Bildesbestimmt werden kann. (Grafik: FocusPoint)

FocusPoint unterteilt das Bild mit zwei Achsen, die von der Mitte des Bildes ausgehen. So entsteht ein Koordinatensystem mit vier Bereichen. Durch Angabe von positiven (rechts, oben) oder negativen (links, unten) X- und Y-Werten kannst du jetzt den Fokuspunkt des Bildes bestimmen.

Anzeige
Anzeige

FocusPoint einsetzen

Für die Verwendung von FocusPoint brauchst du jQuery (1.9+) und die FocusPoint-JavaScript- sowie CSS-Dateien.

<link rel="stylesheet" href="focuspoint.css">
<script src="jquery.js"></script>
<script src="focuspoint.js"></script>

Mit dem nachfolgenden Markup kannst du die Größe des Bildes und die Position des Fokuspunktes definieren.

Anzeige
Anzeige
<div class="focuspoint"
data-focus-x="0.331"
data-focus-y="-0.224"
data-image-w="400"
data-image-h="300">
<img src="image.jpg" />
</div>

Das Setzen von data-image-w und data-image-h ist zwar optional, aber empfehlenswert, da das Koordinatensystem sonst erst dann berechnet werden kann, wenn das Bild geladen wurde, was dazu führen kann, dass der korrekte Bildausschnitt erst nach dem Laden sichtbar wird. Wenn dir die Berechnung des Fokuspunktes zu kompliziert ist, kannst du das Fokuspunkt Helper-Tool von FocusPoint benutzen.

Abschließend muss FocusPoint initialisiert werden. In der Regel würde das innerhalb der $(document).ready()-Funktion passieren.

$('.focuspoint').focusPoint();

Mit der adjustFocus()-Methode kannst du den Fokuspunkt jederzeit neu berechnen lassen. Das ist vor allem wichtig, wenn du ausgeblendete Elemente nach dem ersten Fokussieren sichtbar machst. Da diese Elemente keine Größe haben, wird der Fokuspunkt nicht korrekt sein. mit adjustFocus() behebst du dieses Problem.

Anzeige
Anzeige

Im GitHub-Repository von FocusPoint findest du das jQuery-Plugin und einige Beispiele für die Anwendung von FocusPoint.

 

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
2 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Andreas Kroll

Sowas gibt es bereits als reine css-Variante:
https://github.com/adamdbradley/focal-point

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige