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
| jQuery(document).ready(function() {
var random = function(maxInt) {
var r = (Math.random() * 10) + 1;
r = Math.ceil(r / (10 / maxInt));
if (r > maxInt) return maxInt;
else return r;
};
var colorizeTile = function() {
$("#tiles li").each(function(i) {
$(this).addClass("tilecolor" + random(10));
})
};
var $tiles = jQuery('#tiles'),
$handler = jQuery('li', $tiles),
offset = 10,
tilesLoading = false;
// Layout Options.
var options = {
align: 'right',
autoResize: true,
comparator: null,
container: jQuery('#main-tiles'),
ignoreInactiveItems: true,
itemWidth: 0,
fillEmptySpace: false,
flexibleWidth: 0,
direction: undefined,
offset: 5,
onLayoutChanged: undefined,
outerOffset: 0,
resizeDelay: 50
};
/**
* Reinitializes the wookmark handler after all images have loaded
*/
function applyLayout() {
if ($handler.wookmarkInstance) {
$handler.wookmarkInstance.clear();
}
// Create a new layout handler.
$handler = jQuery('li', $tiles);
$handler.wookmark(options);
}
/**
* When scrolled all the way to the bottom, add more tiles.
* @param event
*/
function onScroll(event) {
// Check if we're within 100 pixels of the bottom edge of the broser window.
var winHeight = window.innerHeight ? window.innerHeight : jQuery(window).height(); // iphone fix
var closeToBottom = (jQuery(window).scrollTop() + winHeight > jQuery(document).height() - 400);
if (closeToBottom) {
loadTiles();
}
};
/**
* Function qui charge les 5 prochaines tiles (5 plus ancienne par rapport à celle anciennement chargée)
*/
function loadTiles() {
if (tilesLoading) return;
tilesLoading = true;
jQuery("#loader").css("display", "block");
jQuery.ajax({
url: 'http://network.allthecontent.com//wp-admin/admin-ajax.php',
data: {
'action': 'get_tiles',
'size': 5,
'offset': offset,
'cp_id': cp_id
},
dataType: 'JSON',
success: function(data) {
if (data.length == 0) {
jQuery(window).unbind('scroll.wookmark', onScroll);
// jQuery("#noMoreTiles").css("display", "block").fadeOut(2000).delay(800);
} else {
for (var i = 0; i < data.length; i++) {
jQuery("#tiles").append('<li class="img-wrap" tileId="' + data[i].ID + '">' + data[i].post_content + '</li>');
}
applyLayout();
colorizeTile();
offset = offset + data.length;
}
tilesLoading = false;
jQuery("#loader").css("display", "none");
},
error: function(errorThrown) {
console.log(errorThrown);
tilesLoading = false;
}
});
}
// Capture scroll event.
jQuery(window).bind('scroll.wookmark', onScroll);
// Call the layout function.
handler = jQuery('#tiles li');
handler.wookmark(options);
/* jQuery('#json_click_handler').click(function() {
doAjaxRequestOffset();
});
*/
colorizeTile();
}); |
