Skip to content

Commit 30f159e

Browse files
hppycoderhppycoder
committed
Fixed the IIFE scope issue. The initial code was not taking into account DOM ready state.
1 parent f8a8ede commit 30f159e

File tree

1 file changed

+115
-114
lines changed

1 file changed

+115
-114
lines changed

‎js/main.js

+115-114
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,122 @@
1-
jQuery(function($){
2-
3-
var newcount = 0,
4-
photos = $('photos'),
5-
min_ID = photos.data('next-min-ID'),
6-
load_photos = function() {
7-
8-
// Hides the notification
9-
$("#count-bar").addClass("hidden");
10-
11-
$.getJSON(
12-
'https://api.instagram.com/v1/tags/' + tag
13-
+ '/media/recent?callback=?',
14-
{
15-
'access_token': $.QueryString['access_token'],
16-
'count': 16,
17-
'min_id': min_ID
18-
}
19-
)
20-
.done(function(response){
21-
var new_photos = response.data,
22-
pagination = response.pagination,
23-
delay = 0,
24-
anim_speed = 200;
25-
26-
// Removes the loading LI if present
27-
$("#photos").find('.loading').hide(400).delay(400).remove();
28-
29-
// Resets the new photo count
30-
newcount = 0;
31-
32-
// Sets the new min ID for loading images
33-
min_ID = pagination.next_min_id;
34-
35-
// Loops through the loaded photos
36-
for (x in new_photos) {
37-
var photoCont = $("#photos"),
38-
photo = new_photos[x],
39-
caption = null;
40-
41-
// If a caption exists, sets it
42-
if (photo.caption!==null) {
43-
caption = photo.caption.text;
44-
}
45-
46-
// Creates a new image element
47-
$('<img />', {
48-
src: photo.images.thumbnail.url,
49-
alt: caption,
50-
data: {
51-
info: photo // Passes photo info to the callback
52-
}
53-
})
54-
.load(function(){
55-
56-
// Sets up shortcut vars and byline markup
57-
var cont = $("#photos"),
58-
photo = $(this).data('info'), // Reads photo data
59-
byline = $('<strong />', {
60-
text: 'Photo by ' + photo.user.username
61-
});
62-
63-
// Creates a new link around the image
64-
$('<a />', {
65-
href: photo.link,
66-
html: this
67-
})
68-
.css({opacity: 0}) // Starts the effect
69-
.delay(delay) // Adds a delay
70-
.prependTo(cont) // Adds the new element to the DOM
71-
.append(byline) // Inserts the attribution
72-
.wrap('<li />') // Wraps the whole thing in a LI
73-
.animate({
74-
opacity: 1
75-
}, anim_speed); // Finishes the effect
76-
77-
delay += anim_speed // Simulates sequential loading
78-
});
79-
}
80-
})
81-
.error(function(data){
82-
console.log(data);
83-
});
84-
};
85-
86-
// Adds a realtime listener
87-
channel.bind('new-photo', function(data){
88-
89-
// Keeps a running tally of new photos not yet loaded
90-
newcount += data.newcount;
91-
92-
// Grammar stuffs
93-
var plural = (newcount===1) ? 'photo' : 'photos';
94-
phrase = newcount+' new '+plural+' uploaded.';
95-
96-
// Updates the count bar with the new information
97-
$('#count-bar').removeClass('hidden').find('#count').text(phrase);
98-
99-
});
100-
101-
// Click handler for the "Load the New Images" button
102-
$("#image-loader").bind('click', function(event){
103-
event.preventDefault();
104-
105-
load_photos();
106-
});
107-
108-
// For initialization purposes, loads the photos once the DOM is ready
109-
load_photos();
110-
111-
});
1+
(function($){
2+
$(function() {
3+
var newcount = 0,
4+
photos = $('photos'),
5+
min_ID = photos.data('next-min-ID'),
6+
load_photos = function() {
7+
8+
// Hides the notification
9+
$("#count-bar").addClass("hidden");
10+
11+
$.getJSON(
12+
'https://api.instagram.com/v1/tags/' + tag
13+
+ '/media/recent?callback=?',
14+
{
15+
'access_token': $.QueryString['access_token'],
16+
'count': 16,
17+
'min_id': min_ID
18+
}
19+
)
20+
.done(function(response){
21+
var new_photos = response.data,
22+
pagination = response.pagination,
23+
delay = 0,
24+
anim_speed = 200;
25+
26+
// Removes the loading LI if present
27+
$("#photos").find('.loading').hide(400).delay(400).remove();
28+
29+
// Resets the new photo count
30+
newcount = 0;
31+
32+
// Sets the new min ID for loading images
33+
min_ID = pagination.next_min_id;
34+
35+
// Loops through the loaded photos
36+
for (x in new_photos) {
37+
var photoCont = $("#photos"),
38+
photo = new_photos[x],
39+
caption = null;
40+
41+
// If a caption exists, sets it
42+
if (photo.caption!==null) {
43+
caption = photo.caption.text;
44+
}
45+
46+
// Creates a new image element
47+
$('<img />', {
48+
src: photo.images.thumbnail.url,
49+
alt: caption,
50+
data: {
51+
info: photo // Passes photo info to the callback
52+
}
53+
})
54+
.load(function(){
55+
56+
// Sets up shortcut vars and byline markup
57+
var cont = $("#photos"),
58+
photo = $(this).data('info'), // Reads photo data
59+
byline = $('<strong />', {
60+
text: 'Photo by ' + photo.user.username
61+
});
62+
63+
// Creates a new link around the image
64+
$('<a />', {
65+
href: photo.link,
66+
html: this
67+
})
68+
.css({opacity: 0}) // Starts the effect
69+
.delay(delay) // Adds a delay
70+
.prependTo(cont) // Adds the new element to the DOM
71+
.append(byline) // Inserts the attribution
72+
.wrap('<li />') // Wraps the whole thing in a LI
73+
.animate({
74+
opacity: 1
75+
}, anim_speed); // Finishes the effect
76+
77+
delay += anim_speed // Simulates sequential loading
78+
});
79+
}
80+
})
81+
.error(function(data){
82+
console.log(data);
83+
});
84+
};
85+
86+
// Adds a realtime listener
87+
channel.bind('new-photo', function(data){
88+
89+
// Keeps a running tally of new photos not yet loaded
90+
newcount += data.newcount;
91+
92+
// Grammar stuffs
93+
var plural = (newcount===1) ? 'photo' : 'photos';
94+
phrase = newcount+' new '+plural+' uploaded.';
95+
96+
// Updates the count bar with the new information
97+
$('#count-bar').removeClass('hidden').find('#count').text(phrase);
98+
99+
});
100+
101+
// Click handler for the "Load the New Images" button
102+
$("#image-loader").bind('click', function(event){
103+
event.preventDefault();
104+
105+
load_photos();
106+
});
107+
108+
// For initialization purposes, loads the photos once the DOM is ready
109+
load_photos();
110+
});
111+
112+
})(jQuery);
112113

113114
/**
114115
* Retrieves query string values
115116
*
116117
* Plugin by BrunoLM: http://stackoverflow.com/a/3855394/463471
117118
*/
118-
jQuery(function($) {
119+
(function($) {
119120
$.QueryString = (function(a) {
120121
if (a == "") return {};
121122
var b = {};
@@ -126,5 +127,5 @@ jQuery(function($) {
126127
b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
127128
}
128129
return b;
129-
})(window.location.search.substr(1).split('&'))
130-
});
130+
})(window.location.search.substr(1).split('&'));
131+
})(jQuery);

0 commit comments

Comments
 (0)