Gabi und Sascha
Kategorien : Alle | Berlin | Bücher | Fotografie | Java | Linkhalde | Weichware | Verfassung

Ich habe mich heute morgen mal ein wenig mit jQuery beschäftigt – einfach um einmal zu verstehen, wie es arbeitet. Da ich mich wenig mit Webentwicklung beschäftige ist das eine andere Welt für mich. jQuery mach Spass. Es ist unwahrscheinlich einfach damit schnell einfache Verhalten hin zu bekommen. Die Dokumentation ist vorbildlich und das API logisch, sauber und durchdacht – zumindest der Teil, den ich auf die Schnelle überblicke.

Und damit ich auch einen Bezug zur Realität habe war die Aufgabenstellung: EXIF Daten als Overlay in den Bildern zu zeigen. Die EXIF Daten selbst habe ich im JSON Format in einem HTML 5 data Attribut des <img> Elements hinterlegt. So sind die EXIF Daten auch logisch nah bei den Bildinformationen hinterlegt. Als data Erweiterung habe ich -exif verwendet. a ich mich noch nicht näher mit dem data Attribut beschäftigt habe, weiss ich nicht exakt, ob dies semantisch korrekt ist.

Eine JavaScript Routine, basierend auf jQuery liesst bei einem hover() die JSON EXIF Daten aus und wandelt sie in eine Tabelle um. Die Tabelle wird logisch vor dem <img> Element abgelegt und mittels der jQuery fadeIn() Methode eingeblendet. Das funktioniert auch mit den Slideshows. Damit es bei den Slideshows keine Probleme mit der Aktualisierung gibt, wird diese jetzt bei einem hover angehalten. Ein Beispiel findet ihr hier.

Probleme und offene Punkte

  • Bei den Einzelansichten der Artikel wird die Transparenz des Overlays aus den CSS korrekt wieder gegeben. Bei der Artikelübersicht nicht.
    Falsches Verständnis über Selektoren und registrieren von Eventhandlern.
  • Die Positionierung bei Slideshowbildern unterschiedlicher horizontaler Breite ist nicht korrekt.
  • Wird data Attribut Semantik korrekt verwendet?
    In der beschreibenen Verwendung ist es semantisch und syntaktisch in Ordnung. Nur der Name exif ist sehr allgemein gehalten. Er sollte einen Prefix bekommen, um nicht eventuell mit später verwendeten Tools in Konflikt zu kommen. Hm… werde wohl speexx- davor klatschen.
    data-exif wurde in data-speexx-exif umbenannt.
  • Falscher Platz für Tabelle. Nicht erlaubt innerhalb eines inline Elements. Mögliche Lösungen sind entweder ein verschieben des <table> Elements vor das Anchor Element oder die Verwendung von inline <span> Elementen mit einer CSS display: table Formatierung. Leider wird letzteres auch vom IE 7 noch nicht unterstützt. Was wieder einmal beweisst: M$ Gerede über die Unterstützen offener Web-Standards ist heisse Luft.

Beispiel

[KÜHLERFIGUR EINES JAGUARS]
Mit dem Mauszeiger über das Bild fahren, um die EXIF sichtbar zu machen

Code

Contentformat des Attribut data-exif (Beispiel):


  data-exif='{"Kamera":"OLYMPUS IMAGING CORP.", "Modell":"E-P2", "ISO":"100", "Belichtung":"1/30 Sek.", "Blende":"8", "Brennweite":"42mm"}'

Bisheriger JavaScript Code

 
  $(function() {
      $('.speexxExifImg').hover(
        function() {
          var text = $(this).attr("data-exif");
          var json = jQuery.parseJSON(text);
          var toInsert = "<table class='speexxExifImgData'>";
          $.each(json, function(key, value) {
              toInsert += "<tr><td class='speexxExifImgKey'>";
              toInsert += key;
              toInsert += ":";
              toInsert += "</td><td class='speexxExifImgValue'>";
              toInsert += value;
              toInsert += "</td></tr>";
          });
          toInsert += "</table>";
          $(this).before(toInsert);
          $('.speexxExifImgData').fadeIn('fast', function() {});
        }, 
        function() {
          $('.speexxExifImgData').fadeOut('fast', function() {
            $(this).parent().find("table:last").remove();
          });
        }
      );
  });