Lazyload with browser snapping + nicescroll
HTML
<div class="container">
<div class="box">
<img src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://www.appelsiini.net/projects/lazyload/img/bmw_m1_hood.jpg" width="500" height="500" alt="BMW M1 Hood">
</div>
</div>
CSS
.container {height: auto; overflow: hidden; width: 500px;}
.box {width: 500px; height: 700px; display: block;}
JavaScript
/* jquery.nicescroll
-- version 2.9.6
-- copyright 2011-12 InuYaksa*2012
-- licensed under the MIT
--
-- http://areaaperta.com/nicescroll
-- https://github.com/inuyaksa/jquery.nicescroll
--
*/
(function(jQuery){
// globals
var domfocus = false;
var mousefocus = false;
var zoomactive = false;
var tabindexcounter = 5000;
var ascrailcounter = 2000;
var $ = jQuery; // sandbox
// http://stackoverflow.com/questions/2161159/get-script-path
function getScriptPath() {
var scripts=document.getElementsByTagName('script');
var path=scripts[scripts.length-1].src.split('?')[0];
return (path.split('/').length>0) ? path.split('/').slice(0,-1).join('/')+'/' : '';
}
var scriptpath = getScriptPath();
// derived by http://blog.joelambert.co.uk/2011/06/01/a-better-settimeoutsetinterval/
var setAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
false;
})();
var clearAnimationFrame = (function(){
return window.cancelRequestAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.oCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame ||
false;
})();
var NiceScrollClass = function(myopt,me) {
var self = this;
this.version = '2.9.6';
this.name = 'nicescroll';
this.me = me;
this.opt = {
doc:$("body"),
win:false,
zindex:9000,
cursoropacitymin:0,
cursoropacitymax:1,
cursorcolor:"#424242",
cursorwidth:"5px",
cursorborder:"1px solid #fff",
cursorborderradius:"5px",
scrollspeed:10,
mousescrollstep:10,
touchbehavior:false,
...