lazyload-filter
by iameuanmackay
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://megmackayphoto.com/lib/js/jquery.lazyload.js"></script>
<script src="http://megmackayphoto.com/lib/js/filter.js"></script>
<div class="container-fluid">
<div id="portfolio">
<div class="row">
<div class="hidden-xs col-sm-1 col-sm-offset-1 col-md-1 col-lg-offset-2 col-lg-1">
<div data-spy="affix" data-offset-top="0" data-offset-bottom="200">
<ul id="filter">
<li style="list-style-type: none" class="all"><a href="#">all</a>
</li>
<br>
<li style="list-style-type: none" class="people"><a href="#people">people</a>
</li>
<br>
<li style="list-style-type: none" class="things"><a href="#things">things</a>
</li>
<br>
</ul>
</div>
<!-- end affix -->
</div>
<!-- end col-1 -->
<!-- This bit moves the filter menu from the side to the top on mobile devices -->
<div class="container-fluid">
<div id="mob-filter" style="text-right">
<div class="row">
<div class="col-xs-10 col-xs-offset-1 col-sm-offset-1 visible-xs hidden-sm hidden-md hidden-lg hidden-xlg text-center">
<div data-spy="affix" data-offset-top="10" data-offset-bottom="100">
<ul id="filter">
<li style="list-style-type: none" class="all"><a href="#">all</a>
</li>
<li style="list-style-type: none" class="people"><a href="#people">people</a>
</li>
<li...
JavaScript
$(function () {
$("img.lazy").lazyload()
threshold: 100;
effect: "scrollstop";
});