-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathREADME
108 lines (90 loc) · 7.07 KB
/
README
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
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"
}