find-templates - Picasa Galerie

Picasa Galerie

Ein Picasa-Album einbinden

Hier ein Beispiel mit meinen Sylt-Album.
Die Anzahl der Vorschau-Bilder, sowie Größe, Titel, Rahmen ect. lassen sich einstellen.
Unten Rechts kann weiter geblättert werden (Next).

Schritt 1: Javascript einbinden

auf "Eigene Seiten editieren"
- Seiteauswählen, wo die Picasa Galerie hinein soll
- im Editor (Werkzeugleiste) oben links auf "Quellcode" klicken
- folgendes Script zu Beginn der Seite einfügen:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

<script src="http://dl.dropbox.com/u/12178319/javascripts/jquery.pwi-min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            $("#picasa").pwi({
                username: '1179648543867737729',
                 mode: 'album',
                 album: 'Flensburg',
                 authKey: '',
                 thumbSize: '145',
                 showAlbumdate: 'true',
                 maxResults: '6',
                 thumbCrop: '1'
              });
           });
    </script>
<div id="picasa" style="overflow:hidden;"> </div>
<div style="clear:both;"></div>

username: Eure Picasa-ID findet Ihr nach dem Einloggen in der Adresszeile des Browser
album: Name des Albums, das Ihr einbinden möchtet
thumbSize: Bildbreite. Je kleiner, desto mehr passen nebeneinander
showAlbumdate: Datum über dem Album anzeigen
maxResults: Anzahl der sichtbaren Bilder
Hier Übersicht aller Einstellungsmöglichkeiten: http://code.google.com/p/pwi/wiki/Configuration

Schritt 2: Der CSS-Code für das Aussehen

- den CSS Code mit im Seiteninhalt einfügen, am besten vor / über dem ersten Code aus Schritt 1

<style type="text/css">
<!--
/* diese Zeile benötigen User mit Design Clean */
#main img{max-width:100%!important;}

/* Titelfeld über Galerie */
.title {
  font-weight: bold;
  float: left;
  overflow: hidden;
  margin-right: 10px; }

/* Bilder nebeneinander - Rahmen - Abstand */
.pwi_photo {
  float: left;
  margin: 8px;
  padding: 5px;
  border: 1px solid #c9c9c9; }

/* Feld mit Bläterfunktion */
.pwi_pager {
  overflow: hidden;
  border: 1px solid #c9c9c9;
  border-radius: 5px;
  width: 80%;
  margin:10px 0px 0px 0px;
  padding:5px 10px 5px 10px;
  display: block;
  float: left; }


.pwi_pager_page{display:none;}
.pwi_prevpage{float:left;width:200px;}
.pwi_prevpage:hover{color:chocolate;}
.pwi_nextpage{float:right;}
.pwi_nextpage:hover{color:chocolate;}
.pwi_pager_current{float:left;width:50px;color:blue;}
-->
</style>