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

Nachdem einblenden von EXIF Informationen bei mouseover fertig war, ging es an die Umsetzung der nächsten Idee.

Viele Bilder kommen bei dem blauen Hintergrund der Site nicht sonderlich gut zur Geltung. Besser würde es sein, wenn die Bilder vor einem dunklen Hintergrund zu sehen sind. Dazu hätte ich die Seite umgestalten müssen. Nicht, dass ich dazu keine Lust hätte. Das aktuelle Design ist schon ziemlich alt und ich mag es nicht mehr sonderlich. Aber auch bei eine Neugestaltung würde das Problem weiter bestehen. Denn ich würde niemals einen dunkeln Hintergrund mit heller Schrift verwenden. So etwas lässt sich nur schwer lesen.

Eine Abhilfe bietet der Lightbox Effekt. Den könnt ihr jetzt bei einigen Bildern einschalten, wenn ihr auf die Lampe rechts oben neben dem Bild klickt. Ausgeschaltet wird der Effekt wieder, wenn ihr auf den Hintergrund klickt. Klickt ihr auf das Bild, werdet ihr normalerweise auf ein Picasa Album weiter geleitet. Auch der hover Effekt für die EXIF Informationen funktioniert weiter. Die Diashows arbeiten auch mit der Lightbox Umsetzung zusammen.

Grösstes Problem bei der Umsetzung des Effekts war die Art, wie ich es haben wollte. Es gibt einige fertige Lightbox Module im Netz. Diese legen das Bild meistens zentral über den Fensterinhalt. Es ist dann losgelöst aus seiner Umgebung. Dies wollt ich nicht. Das Bild soll an Ort und Stelle bleiben, nur der Hintergrund soll abgedunkelt werden. Liesst sich trivial, war es auch… am Ende.

Zuerst habe ich die Lampe und die Funktionalitäten Trigger (Lampe) einblenden wollen. Dies soll nicht innerhalb des Markups angesiedelt sein, sondern nachträglich eingeblendet werden. Grund: der Effekt soll eventuell ausgetauscht order geändert werden. Ist er hart im Markup codiert sind Änderungen eine elendige Fleissaufgabe. Das Problem des automatischen einblenden mit JavaScript war recht schnell erledigt.

Problematischer war die Funktion zum Abdunkeln. Da habe ich gleich mehrere Fehler gemacht. Mir war klar, dass ich mit dem CSS z-index arbeiten muss. Im ersten Anlauf vollkommen in die Hose gegangen. Funktionierte hervorragend mit dem Chrome, aber schon bei Firefox und Safari hat meine z-index Implementierung nicht funktioniert. Karsten hat mir dann geholfen und mir ein Template gebaut, auf welchem die jetzige Lösung basiert. Dank dir dafür. Er knallt den Hintergrund beim Klick einfach als letztes Blockelement an <body>. Ich hatte es filigraner und komplexer gemacht, aber eben auch nicht funktionierend. In der Analyse liegt die Ursache für meine komplexe Lösung in der mangelnden Kenntnis des jQuery APIs.

Am kompliziertesten war hinterher die Anpassung der unterschiedlichsten z-index Ebenen. Das Twitter Widget war teilweise sichtbar, wenn die Bilder schon nicht mehr sichtbar waren. Und das jQuery cycle Plugin belegt mehrere z-index Ebenen. Zwischen all diese Ebenen musste dann der Lightbox Layer gelegt werden.

Probleme und offene Punkte

Problematisch ist jetzt noch Flash Plugins unter Chrome. Die sind auf dem Mac immer sichtbar. Beim Safari und beim Firefox (ab Version 3.6) sind Flash Plugins nicht sichtbar. Unter Windows und Linux habe ich das noch nicht getestet.

Offen: Karsten meinte, dass es unter dem IE nicht funktioniert. Würde mich über ein Feedback in den Kommentaren freuen.


Beispiel

[MENSCHEN SITZEN AUF EINER LANGEN UND BREITEN SITZBANK AUF BEIDEN SEITEN. IM VORDERGRUND LIESST EIN MANN ZEITUNG. UNGEFÄHR IN DER MITTE SITZT EIN PAAR, ER DEM BILD ABGEWAND, SIE SCHAUT IN DIE KAMERA. ES SCHEINT, ALS OB SIE SICH KÜSSEN.]
A kiss - Berlin - Alexanderplatz

Code

HTML


  <div>
    <div class='speexxThumbnails'>
      <div class='speexxThumbnail speexxPhoto' id='a_kiss_20110703' >
        <div>
          <a href='https://picasaweb.google.com/sascha.kohlmann/Menschliches#' title='Menschliches@Picasa'>
            <img src="https://lh3.googleusercontent.com/-xRbAv5Lyd3k/TgCQpdldVfI/AAAAAAAAQaQ/JTHtqlDsQG0/s640/street%25252020110619-12.jpg" width="640" height='480' alt='[]' title='' style='border-color: black' data-speexx-exif='{"Kamera":"OLYMPUS IMAGING CORP.","Modell":"E-P2","ISO":"160","Belichtung":"1/250 Sek.","Blende":"6.7","Brennweite":"22mm","Breite": "52.521172° N", "Länge":"13.413846° O"}'  class='speexxExifImg'  />
           </a><br />A kiss - Berlin - Alexanderplatz
         </div> 
      </div>
    </div>
  </div>

Javascript

Zur Zeit noch id basiert, bis sich der Code stabilisiert hat.


  // Lampen Icon einblenden
  $("#a_kiss_20110703").after("<div style='display: inline;text-align: right;  position:absolute; margin:0px; margin-left:0px; margin-top: 0px;' class='simpleLightbox'><img src='http://www.speexx.de/blog/images/icons/icon_lamp1_28x45.png' width='14' height='23' style='cursor: pointer;border:none;z-index:0' title='Lightbox on' /></div>");

  var lightuse = 0;	// Boolean zur Ermittlung Status Bildklicks

  $(".simpleLightBox").click(function() {
    if (lightuse == 0) {
      // fuege Underlay hinzu
      $('<div class="speexxImgLightBox"></div>')
          .css('z-index', '2')
          .css('opacity', '0')
          .css('background-color', '#000000')
          .animate({'opacity': '0.85'}, 333)
          .appendTo('body');

      // Sperre hinzufuegen Underlay (sonst Dimmereffekt)				      
      lightuse = 1;

      $('.speexxImgLightBox').click(function() {
        $(this).fadeOut(333, function() {
          $(this).remove();
          // Sperre wieder entfernen
          lightuse = 0;
        });
      });
    }
  });


Nächstes Ziel

Wenn sich Geo Koordinaten in den data-speexx-exif befinden, eine OSM Karte als Spoiler einblenden :-)


Pflegst Du die GPS-Informationen manuell ein oder hast Du einen geeigneten GPS-Receiver gefunden? Ich finde es sehr schade, dass Canon da noch immer nichts Vernünftiges auf dem Markt hat -- der völlig überteuerte WFT-E4A ist zusätzlich noch auf einen externen Empfänger (USB) angewiesen, das ist bei dem Preis schon blanker Hohn...

Ich pflege die GPS Informationen manuell ein. Soweit ich weiss gibt es für die PENs da nichts automatisches. Dabei verwende ich Google Earth und ein Mac Tool namens Geotagger von Craig Stanton. Dieses liesst die Position aus Google Earth aus und baut die Geoinformationen dann in das JPEG ein. Dazu muss ich nur die JPEGs auf das Geotagger Icon im Doc fallen lassen. Nervig ist nur das ansteuern in Google Earth. Leider kann das Tool nicht die Richtung der Aufnahme bestimmen. Aber da ich weniger Landschaftsaufnahmen mache ist das eher sekundär.