Florian Fiegel 15. Januar 2009

Smile-Designer Smile – jQuery-Plugin für pixelgenaues Design

Kein Beitragsbild

Einige werden das Firefox-Firebug-Plugin Pixel Perfect kennen, das sich unter anderem auch im Artikel Mehr Power für Firebug findet. Es ermöglicht den Overlay eines Screendesigns auf einer Webseite um Designs pixelgenau vergleichen zu können. Eine wunderbare Geschichte, leider funktioniert das Plugin nicht in den anderen Browsern für die regelmäßig nachgebessert werden muss.

Den Jungs von 9elements ist zwar das Plugin entgangen, aber dafür haben sie gleich einen Schritt weitergedacht, denn sie haben ein jQuery-Plugin gebaut das unabhängig vom Firefox auch in allen anderen Browsern funktioniert.

Das kleine Helferlein benötigt natürlich jQuery und das Plugin selbst, sowie ein paar Zeilen Code zur Initialisierung. Nach dem Einbinden lässt sich das Screenlayout einfach mittels eines Doppelklicks einblenden und verschieben. So sieht der benötigte Code dann beispielsweise aus:

//Initialisierung jQuery(document).ready(function() { jQuery('#dummy').smileDesignerSmile('my_awesomelayout', { backgroundPosition : "-100px 100px", opacity : "0.7"} ); });

Den Beitrag zum Smile Designer Smile findet man im Blog von 9elements und auch eine Demo kann man sich direkt anschauen.

Florian Fiegel

Seit 2008 freier Webworker mit Schwerpunkt auf journalistischer Berichterstattung und (Online-)PR. Täglich konfrontiert mit unzähligen Tools und Technologien im Web.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

2 Kommentare

  1. > Das kleine Helferlein benötigt natürlich jQuery und das Plugin selbst, …

    Das Plugin braucht jQuery und das Plugin. Und das Plugin benötigt das Plugin. Und…

    ;-)

  2. ui nicht schlecht. das werde ich bei gelegenheit mal ausprobieren denke ich :)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.