Introduction

Well, first get the correct files on your server:

    * goto the downloads section
    * download the latest zip file
    * unzip the zipfile in the root of your site (will create a pwi folder)
    * open up the html file you want your gallery in
    * Find a div that has an ID or create one to be the container of your gallery
    * Add the following code and includes to your header: 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> //-->This can be your local jquery lib, but why not have it hosted by google

<link href="css/pwi.css" rel="stylesheet" type="text/css"/> //--contains the css used by PWI, change the settings in this file to create your own skin
<script src="js/jquery.pwi.js" type="text/javascript"></script> //-- The actual script :-)

<script src="js/jquery.blockUI.js" type="text/javascript"></script> //--optional, shows the loading-box during ajax calls, little overhead
<script src="js/jquery.slimbox2.js" type="text/javascript"></script> //-- makes a nice popup when clicking on a photo, otherwise your users are redirected to google-picasa-web, you can make your own, see the option onclickThumb and popupExt below

<script type="text/javascript">
$(document).ready(function() {  //-- default jQuery call, do stuff when page is loaded
            $("#container").pwi({  //--specify your DIV's ID here
                username: 'tester'  //--REPLACE WITH YOUR PICASA NAME!!!! (see the url when visiting your albums at google, you notice it right after the domain. It's NOT your username by default!!!
            });
        });
    </script>

That's it :-)

To have more options set, here's an example how to do an options override:

$(document).ready(function() {

        var options = {
                username: 'jquery.pwi',
                mode: 'albums',
                albums: ["Album1","Album2"],
                thumbCss: { margin: '5px' },
                onclickThumb: ""
        };

        $("#container").pwi(options);

});
   

OPTIONS

                username: '',           <-- REQUIRED TO SET, NOT OPTIONAL, THE REST IS!!!
                mode: 'albums',         //-- can be: album, albums, latest (default: "albums")
                album: "",              //-- specify an album id if mode is 'album', default: ""
                authKey: "",            //-- specify the authKey if you choose mode 'album' and specified an unlisted album from picasa, default: ""
                albums: [],             //-- specify a lits of album id's if mode is 'albums', leave as [] to show all albums (ex. ['album1','album2'], default: []) 
                albumCrop: 1,           //-- crop the thumbs of the albums (1 = yes / 0 = no, default: 1)
                albumTitle: "",         //-- displays alternative album title if no title is specified in Picasa, default: ""
                albumThumbSize: 160,    //-- specify thumbnail size of albums (default: 160, supported: 32, 48, 64, 72, 144, 160)
                albumMaxResults: 999,   //-- display maximum number of albums (default: 999)
                albumStartIndex: 1,     //-- Start album index, if albumMaxResults is set to less then the available albums. (default: 1)
                albumTypes: "public",   //-- default: "public", currently not supported: "private", "all", "visible"
                page: 1,                //-- default: 1, Set to page if mode is 'album' and you want to start at a certain page of the album when the page is loaded.
                photoSize: 800,         //-- Photo size to link to in the album (default: 800, supported: 200, 288, 320, 400, 512, 576, 640, 720, 800)
                maxResults: 50,         //-- Maximum amount of photo's per album page (default: 50)
                thumbSize: 72,          //-- specify thumbnail size of photo's (default: 72, supported (un)cropped: 32, 48, 64, 72, 144, 160 and uncropped only: 200, 288, 320, 400, 512, 576, 640, 720, 800) 
                thumbCrop: 0,           //-- crop the thumb of the photo's (default: 0, 1 = yes / 0 = no) cropping makes the thumbs square and gives consistent layout
                thumbCss: {'margin' : '5px'}, //-- override and add custom styles for the thumbs (see http://docs.jquery.com/CSS/css#properties for specification)
                onclickThumb: "",       //-- override click on single photo thumb. specify a function to replace slimbox,see demo 3 for an example
                popupExt: "",   //-- override click on photo thumb with other jQuery plugin. specify a function to replace slimbox2,see demo 6 for an example
                showAlbumTitles: true,  //-- Display title underneath album thumbs
                showAlbumdate: true,    //-- Display date underneath album thumbs
                showAlbumPhotoCount: true,//-- Display amount of photo's in album underneath album thumb
                showAlbumDescription: true,//-- Display album description on photo page
                showAlbumLocation: true,//-- Display location (if specified) of album in album description on photo page
                showSlideshowLink: true,//-- Display link to slideshow (native Picasa Web Album slideshow) on photo page
                showPhotoCaption: false,//-- Show caption underneath photo thumb (not recommended to prevent layout issues)
                showPhotoDate: true,//-- Show photo date in caption
                labels: {photo:"photo", //-- override labels, to translate into your required language
                                photos: "photos",
                                albums: "Back to albums",
                                slideshow: "Display slideshow",
                                loading: "PWI fetching data...",
                                page: "Page",
                                prev: "Previous",
                                next: "Next",
                                devider: "|"
                },
                months: ["January","February","March","April","May","June","July","August","September","October","November","December"], --tranlate into your lanugage if needed
                slimbox_config: {       //-- override default slimbox configuration and behaviour (see for details: http://code.google.com/p/slimbox/wiki/jQueryManual)
                        loop: false,
                        overlayOpacity: 0.6,
                        overlayFadeDuration: 400,
                        resizeDuration: 400,
                        resizeEasing: "swing",
                        initialWidth: 250,
                        initlaHeight: 250,
                        imageFadeDuration: 400,
                        captionAnimationDuration: 400,
                        counterText: "{x}/{y}",
                        closeKeys: [27, 88, 67, 70],
                        prevKeys: [37, 80],
                        nextKeys: [39, 83]
                },
                blockUIConfig: {        //-- override default blockUI configuration and behaviour (see for details: http://malsup.com/jquery/block/#options )
                        message: "<div class='lbLoading pwi_loader'>loading...<div>",
                        css: "pwi_loader"
                }