| Line 50: | Line 50: | ||
debug: false | debug: false | ||
}); | }); | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | function lazyLoad() { | ||
| + | /* | ||
| + | To use the lazy loader, you must initialize onScreen and tell it | ||
| + | which HTML attribute to look for. | ||
| + | onScreen will then replace the SRC value with the one from lazyAttr. | ||
| + | */ | ||
| + | $('div.postAttachment img').onScreen({ | ||
| + | lazyAttr: 'data-lazy' | ||
| + | }); | ||
| + | } | ||
| + | |||
| + | function animatePosts() { | ||
| + | /* | ||
| + | In this example I used onScreen to animate the posts as | ||
| + | they become visible. I set the tolerance to 50 so the posts | ||
| + | start animating once they're 50px inside the viewport. | ||
| + | */ | ||
| + | $('article.post').onScreen({ | ||
| + | doIn: function() { | ||
| + | $(this).animate({ | ||
| + | top: 0, | ||
| + | opacity: 1 | ||
| + | },500); | ||
| + | }, | ||
| + | tolerance: 50 | ||
| + | }); | ||
| + | } | ||
| + | |||
| + | $(function(){ | ||
| + | |||
| + | animatePosts() | ||
| + | lazyLoad(); | ||
| + | |||
| + | }); | ||
$("#mw-content-text h3").each(function(){
$(this).wrap("<div class=example></div>");
var ex_div=$(this).closest("DIV");
//ex_div.css("border","1px solid red");
//console.log(ex_div);
while(ex_div.next().length && !ex_div.next().prop("tagName").match(/h3|h2|div/i)){
nextobj=ex_div.next();
//console.log(nextobj.prop("tagName"));
ex_div.append(nextobj);
}
});
$("div.example").each(function(){
var video=$("iframe,object",this);
if(video.length){
//console.log(video.eq(0),video.eq(0).prop("clientWidth"));
if(video.eq(0).prop("clientWidth")<=300){
video.insertAfter($("h3",this));
$(this).css("width",300).css("float","left").css("margin","0 30px 0 0");
//console.log($(this).next().prop("className"));
if($(this).next().prop("className")!="example") $(this).after("<br clear=both>");
}else {
$(this).before("<br clear=both>");
}
}
});
$('elements').onScreen({
container: window,
direction: 'vertical',
doIn: function() {
// Do something to the matched elements as they come in
},
doOut: function() {
// Do something to the matched elements as they get off scren
},
tolerance: 0,
throttle: 50,
toggleClass: 'onScreen',
lazyAttr: null,
lazyPlaceholder: 'someImage.jpg',
debug: false
});
function lazyLoad() {
/*
To use the lazy loader, you must initialize onScreen and tell it
which HTML attribute to look for.
onScreen will then replace the SRC value with the one from lazyAttr.
*/
$('div.postAttachment img').onScreen({
lazyAttr: 'data-lazy'
});
}
function animatePosts() {
/*
In this example I used onScreen to animate the posts as
they become visible. I set the tolerance to 50 so the posts
start animating once they're 50px inside the viewport.
*/
$('article.post').onScreen({
doIn: function() {
$(this).animate({
top: 0,
opacity: 1
},500);
},
tolerance: 50
});
}
$(function(){
animatePosts()
lazyLoad();
});