Freitag, 31. Oktober 2014

Bildergalerie mit Google+ Fotos und Lightroom Anbindung

Ich mag es wenn Dinge automatisch funktionieren. Die Pflege meiner Galeriebilder ist so ein Thema.
Bisher habe ich ein kleines Javascript Program für eine Slideshow genutzt. Leider fehlten ein paar wichtige Features, wie das gezielte Anzeigen eines Bildes. Also musste was neues her. Randbedingung war dabei, es muss Javascript sein (iPad und Co mögen kein Flash). Da mein Blog bei Google Blogger gehostet ist, kann ich keine Scripte die auf dem Server laufen benutzen.


Fündig wurde ich bei Fotorama. Das ist eine Javascript Library, die jQuery nutzt. Die Library ist toll. Ich kann die Bilder mit Mausklicks, der Tastatur oder beim iPad mit Wischgesten durchscrollen. Es gibt einen Navigator mit Thumbnails und einen Fullscreen Mode. Funktioniert richtig gut.

Was noch fehlte war die Möglichkeit die Software mit den Alben auf Google+ zu verheiraten.
Das fehlende Glied fand ich bei Lance Pollard mit seinem jQuery Picasa Plugin. Mit seinen Javascript Routinen kann man die Bilder eines Albums auflisten.  Was jetzt noch fehlte, Google hat Picasaweb zu Google+ Foto umgewandelt. Was früher sehr komfortabel war wurde damit für Otto Normalverbraucher etwas angenehmer, aber so coole Features, wie ein RSS Feed für die Bilder, war mit einem Schlag weg. Aber zum Glück stimmt das nicht ganz. PicasaWeb ist immer noch da, man muss nur wissen wie man dran kommt. Ihr braucht einfach nur diese URL: https://picasaweb.google.com/lh/myphotos?noredirect=1 . Damit kommt ihr zu der alten Oberfläche.

Also jetzt losgelegt. In der Webseite wird fotorama initialisiert und ein leeres div für die Bilder angelegt:

<!-- get jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- fotorama.css & fotorama.js. -->
<link href="http://fotorama.s3.amazonaws.com/4.6.2/fotorama.css" rel="stylesheet"></link> 
<script src="http://fotorama.s3.amazonaws.com/4.6.2/fotorama.js"></script<

<!-- 2. Add images to <div class="fotorama">
<div id="picasa-gallery" class="fotorama" data-allowfullscreen="native" 
  data-arrows="false" data-auto="false" data-click="true" data-fit="scaledown" 
  data-hash="true" 
  data-keyboard="{"space": true, "home": true, "end": true, 
                  "up": true, "down": true}" 
  data-nav="thumbs" data-ratio="3/2" data-swipe="true" 
  data-thumbheight="48" data-width="100%" id="bilder">
<div>

Die Zeile mit jQuery kann man sich sparen wenn man die Library sowieso schon eingebunden hat.

Als nächstes habe ich das Script von Lance Pollard in eine Datei auf Google Drive gelegt und diese eingebunden (man kann das Script auch einfach in die Webseite kopieren)

<script src="http://googledrive.com/host/0B_TfQB8tSWlsZmQ3SXJyVHJUZGM/picasa.js"></script>


Jetzt müssen die Bilder nur noch aus dem Album eingelesen und zu der Slide Show hinzugefügt werden. Also die PicasaWeb Userid und Album ID besorgen. Geht dazu mit obigen Link in euer PicasaWeb Album hinein und sucht rechts den Punkt RSS. Mit der rechten Maustaste könnt ihr den Link kopieren. Aus dem Link braucht ihr die Userid, welche direkt nach /user/ kommt und die Album ID, welche nach /albumid/ kommt.

https://picasaweb.google.com/data/feed/base/user/10508073...76165/albumid/571429...2673?alt=rss&kind=photo&hl=de

Mit diesen Angaben wird die images Funktion von Lance aufgerufen:

<script>
$.picasa.images("10508073.....76165", "571429...2673", function(images) {
    // 1. Initialize fotorama manually.
    var $fotoramaDiv = $('#picasa-gallery').fotorama();
    // 2. Get the API object.
    var fotorama = $fotoramaDiv.data('fotorama');
   
  $.each(images, function(i, element) {
    var l_pos = element.url.lastIndexOf("/");
    var img = element.url.substr(0,l_pos) + "/s800" + element.url.substr(l_pos);
    var full = element.url.substr(0,l_pos) + "/s1600" + element.url.substr(l_pos);
    
    fotorama.push({img: img, full: full , thumb: element.thumbs[0].url , 
        thumbratio: element.thumbs[0].width/element.thumbs[0].height });
  });
});
</script>

Das Script liest die Bilder mit 800 Pixel Breite für die Show in der Webseite aus (/s800) und mit 1600 Pixel für den Fullscreen Modus (/s1600). Die Thumbnails werden mit der kleinsten Grösse genutzt. Damit man im Navigator keine quadratischen Bilder sieht, muss man das Seitenverhältnis ausrechnen und fotorama mitteilen. Mehr ist es nicht.

Das absolut geniale. Ich habe in Lightroom von Jeffrey Friedl einen Veröffentlichungsservice für PicasaWeb. Also einfach ein Bild reinziehen, veröffentlichen und schon ist es in der Galerie sichtbar. Bequemer geht es kaum.

1 Kommentar:

Peter Heuchert hat gesagt…

Hatte vergessen das man jQuery einbinden muss. Das ist jetzt korrigiert.