-
Notifications
You must be signed in to change notification settings - Fork 46
/
index.html
154 lines (135 loc) · 7.19 KB
/
index.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
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carson Shold's Facebook Photo Selector</title>
<meta name="description" content="Social share buttons with shared count. Built with Sass and jQuery">
<meta name="author" content="Carson Shold">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="facebook photo selector plugin">
<meta name="og:description" content="jQuery Facebook photo selector plugin">
<meta name="og:url" content="http://labs.carsonshold.com/fb-photo-selector/">
<meta name="og:image" content="http://labs.carsonshold.com/fb-photo-selector/demo.png">
<meta name="og:type" content="website">
<meta name="og:site_name" content="Carson Shold's Facebook Photo Selector">
<link rel="stylesheet" href="http://labs.carsonshold.com/demos.css">
<link rel="stylesheet" href="csphotoselector.css">
</head>
<body>
<div id="fb-root"></div>
<a href="http://carsonshold.com" class="carsonshold"><img src="http://carsonshold.com/wp-content/themes/carsonshold/img/carson-shold.png" alt="Carson Shold" /></a>
<h1>jQuery Facebook Photo Selector</h1>
<p>This is an interface component that allows you to select a photo from your albums as if you were inside of Facebook. It mimics the <em>Change your profile picture</em> dialogue, but allows you to customize it as you like.</p>
<p>While this is a good start, improvement and customizations can be made. Feel free to take this to the next level for your projects.</p>
<h2>How to implement</h2>
<a href="https://github.com/cshold/jQuery-Facebook-Photo-Selector" title="View on GitHub" class="github-button">jQuery Facebook Photo Selector on GitHub</a>
<h3>Example</h3>
<ul>
<li>Status: <span id="login-status">Not logged in</span> | <a href="#" id="btnLogin">Login</a> | <a href="#" id="btnLogout">Log out</a></li>
<li><a href="#" class="photoSelect">Select from your photos</a> (You'll need to log in first)</li>
</ul>
<div id="results">
<p>ACTIVITY LOG</p>
</div>
<h3>Features</h3>
<ul>
<li>Browse through albums to find photos</li>
<li>Search the current user's photos</li>
<li>API calls only made when an album is selected</li>
<li>Max 500 photos per album</li>
<li>Facebook-like styling</li>
</ul>
<div id="thesedays">
<h4>This is based on the Friend Selector plugin created by <a href="http://www.thesedays.com/">These Days</a>. Their plugin can be found on <a href="https://github.com/thesedays/Facebook-friend-selector">GitHub</a>.</h4>
<p>The friend selector is a more complete plugin right now. While this photo selection plugin is based on theirs, it has yet to tap into the following areas:</p>
<ul>
<li>Multiple photo selections</li>
<li>Photo/album exclusion</li>
<li>Searching</li>
<li>Pagination for photo page</li>
</ul>
</div>
<!-- Markup for Carson Shold's Photo Selector -->
<div id="CSPhotoSelector">
<div class="CSPhotoSelector_dialog">
<div class="CSPhotoSelector_form">
<div class="CSPhotoSelector_header">
<a href="#" id="CSPhotoSelector_buttonClose">x</a>
<p>Choose from Photos</p>
</div>
<div class="CSPhotoSelector_content CSAlbumSelector_wrapper">
<p>Browse your albums until you find a picture you want to use</p>
<div class="CSPhotoSelector_searchContainer CSPhotoSelector_clearfix">
<div class="CSPhotoSelector_selectedCountContainer">Select an album</div>
</div>
<div class="CSPhotoSelector_photosContainer CSAlbum_container"></div>
</div>
<div class="CSPhotoSelector_content CSPhotoSelector_wrapper">
<p>Select a new photo</p>
<div class="CSPhotoSelector_searchContainer CSPhotoSelector_clearfix">
<div class="CSPhotoSelector_selectedCountContainer"><span class="CSPhotoSelector_selectedPhotoCount">0</span> / <span class="CSPhotoSelector_selectedPhotoCountMax">0</span> photos selected</div>
<a href="#" id="CSPhotoSelector_backToAlbums">Back to albums</a>
</div>
<div class="CSPhotoSelector_photosContainer CSPhoto_container"></div>
</div>
<div id="CSPhotoSelector_loader"></div>
<div class="CSPhotoSelector_footer CSPhotoSelector_clearfix">
<a href="#" id="CSPhotoSelector_pagePrev" class="CSPhotoSelector_disabled">Previous</a>
<a href="#" id="CSPhotoSelector_pageNext">Next</a>
<div class="CSPhotoSelector_pageNumberContainer">
Page <span id="CSPhotoSelector_pageNumber">1</span> / <span id="CSPhotoSelector_pageNumberTotal">1</span>
</div>
<a href="#" id="CSPhotoSelector_buttonOK">OK</a>
<a href="#" id="CSPhotoSelector_buttonCancel">Cancel</a>
</div>
</div>
</div>
</div>
<p><small>Please respect your users and adhere to the <a href="http://developers.facebook.com/policy/" target="_blank">Facebook Platform Policies</a> when using this plugin.</small></p>
<footer class="demo-footer">
<p>Author: Carson Shold | <a href="https://twitter.com/cshold" title="Carson Shold on Twitter">@cshold</a></p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="4UU7LKJYTU4UC">
<input type="submit" name="submit" value="Buy me a beer" class="text-link">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '203534596466008',
xfbml : true,
version : 'v2.6'
});
FB.getLoginStatus(function(response) {
if (response.authResponse) {
$("#login-status").html("Logged in");
} else {
$("#login-status").html("Not logged in");
}
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script src="csphotoselector.js"></script>
<script src="example.js"></script>
<!-- Don't use this code in your pages -->
<script>
// These analytics are here for the page at http://labs.carsonshold.com/fb-photo-selector/
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-8697235-1']);
_gaq.push(['_setDomainName', 'carsonshold.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;g.src="//www.google-analytics.com/ga.js";s.parentNode.insertBefore(g,s);}(document,"script"));
</script>
</body>
</html>