-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
143 lines (132 loc) · 6.97 KB
/
example.html
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!doctype html public>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://satansoft.de/fancybox/jquery.fancybox.css"></link>
</head>
<body>
<h1>jQGallery examples page</h1>
(all examples are carefully selected from my personal holiday pictures...)<br/>
<h2>TOC</h2>
<ol>
<li><a href="#c1">Picasa: single photos</a></li>
<li><a href="#c2">Picasa: whole albums</a></li>
<li><a href="#c3">Picasa: album teasers</a></li>
<li><a href="#c4">twitpic</a></li>
</ol>
jQGallery generally only supports public albums, but why not make them public if you are going to share them anyways?<br/>
<!-- single photos section -->
<h2><a name="c1">Picasa: single photos</a></h2>
the <strong>picasaPhoto()</strong> function renders adds an image to the current element that displays the photo thumbnail
surrounded by an anchor tag that links to the actual image.
<h3><a name="c1.1">single photo /w default values:</a></h3>
jQGallery uses <strong>data-*</strong> attributes to gather information about what photo to display, this makes for very
simple Javascript code when calling the plugin, while still providing a lot of flexibility. The best way to find those IDs is
to click on the "RSS"-link in your picasa web albums pages, look for urls like this one:
<pre>
https://picasaweb.google.com/data/entry/base/user/108363071077152262865/albumid/5679796410312675457/photoid/5679796436624162050
</pre>
<script src="https://gist.github.com/2365314.js"> </script>
<div class="singlephotodefault" data-userid="108363071077152262865" data-albumid="5683888656794856785" data-photoid="5683889469063601058"></div>
<h3><a name="c1.2">single photo /w several options set:</a></h3>
please see jQGallery.js for possible options, also please note the use of the callback option to implement a fancybox gallery:
<script src="https://gist.github.com/2365389.js"> </script>
<div class="singlephotooptions" data-userid="108363071077152262865" data-albumid="5683888656794856785" data-photoid="5683889484032671730"></div>
<!-- picasa albums section -->
<h2><a name="c2">Picasa: whole albums</a></h2>
For albums you don't need to specify the data-photoid attribute. The <strong>picasaAlbum()</strong> function calls the callback function passed as
a parameter in the options map once per album, passing the element it was called upon. Because of the way jQuery handles the calls on selector return
values we need to employ a little hack in order to be able to have a working fancybox()-gallery: we need to set a css-class on the anchor element
and then select elements with this class. Because fancybox uses the "rel" attribute to group images into galleries jQGallery will automagically chose
a rel that's unique for a picasa album.
<script src="https://gist.github.com/2366981.js"> </script>
<div class="album1" data-userid="108363071077152262865" data-albumid="5682777468479729649"></div>
This even works across multiple picasa albums:
<script src="https://gist.github.com/2366990.js"> </script>
<div class="album2" data-userid="108363071077152262865" data-albumid="5684490602047224481"></div>
<div class="album2" data-userid="108363071077152262865" data-albumid="5679796410312675457"></div>
<!-- picasa album teasers section -->
<h2><a name="c3">Picasa: album teasers</a></h2>
Each Picasa photo album has a teaser image, and jQGallery's <strong>picasaTeaser()</strong> function provides an easy way to access it:
<script src="https://gist.github.com/2368984.js"> </script>
<span class="teaserimage" data-userid="108363071077152262865" data-albumid="5684490602047224481"></span><br/>
... and just because a common use-case for such an image is to create a gallery from it, jQGallery has the <strong>picasaTeaserGallery()</strong> function.
It renders an anchor element around the teaser image and also renders an empty anchor for each photo in that album:
<script src="https://gist.github.com/2369009.js"> </script>
<span class="teasergallery" data-userid="108363071077152262865" data-albumid="5684490602047224481"></span><br/>
<br/>
the <strong>picasaUserGalleries()</strong> function does the same thing, just for all of the user's galleries:
<script src="https://gist.github.com/2376561.js"> </script>
<span class="usergalleries" data-userid="108363071077152262865"></span>
<!-- twitpic section -->
<h2><a name="c3">Twitpic</a></h2>
Twitpic's api is kinda limited, but at least you can use the <strong>twitpicMedia()</strong> function to display a single image:
<script src="https://gist.github.com/2378331.js"> </script>
<div class="twitpicimage" data-photoid="7ej9qe"></div>
... and the <strong>twitpicUserGallery()</strong> function to display a user's gallery. If you want to create a fancybox gallery
remember to set the type to "iframe", as twitpic's EULA demands that you link to the image page instead of the image directly:
<script src="https://gist.github.com/2378357.js"> </script>
<div class="twitpicuser" data-userid="pneis"></div>
<!-- load jQuery and plugin scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://satansoft.de/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="jQGallery.js"></script>
<!-- init script, would normally be in it's own file -->
<script type="text/javascript">
$(document).ready(function(){
// render single photos
// default
$(".singlephotodefault").picasaPhoto();
// passing some options
$(".singlephotooptions").picasaPhoto({
"thumbsize" : "192c",
"imageMax" : "640",
"callback" : function (element) {
$(element).fancybox();
}
});
// render whole albums
$(".album1").picasaAlbum({
"linkStyleClass" : "gallery1",
"callback" : function (elements) {
$(".gallery1").fancybox();
}
}
);
$(".album2").picasaAlbum({
"linkStyleClass" : "gallery2",
"thumbsize" : "94c",
"callback" : function (elements) {
$(".gallery2").fancybox();
}
}
);
// render album teasers
$(".teaserimage").picasaTeaser();
$(".teasergallery").picasaTeaserGallery({
"linkStyleClass" : "gallery3",
"callback" : function (elements) {
$(".gallery3").fancybox();
}
}
);
$(".usergalleries").picasaUserGalleries({
"linkStyleClass" : "gallery4",
"callback" : function (elements) {
$(".gallery4").fancybox();
}
}
);
// render twitpic media
$(".twitpicimage").twitpicMedia();
$(".twitpicuser").twitpicUserGallery({
"linkStyleClass" : "gallery5",
"twthumbsize" : "mini",
"linkRel" : "twitpic",
"callback" : function (elements) {
$(".gallery5").fancybox({"type" : "iframe"});
}
});
});
</script>
</body>
</html>