fadein - Lazy Load horizontal scroll jQuery -
so, i'm working on photography portfolio website client wants photographs fade in appear in browser window. did research , seemed jquery plugin lazyload perfect. problem wants photographs on horizontal scroll , seems lazyload wants work on vertically scrolling webpages. searched around , apparently lazyload supposed work in side scrolling divs script:
$("img").lazyload({ container: $("#container") }); but doesn't seem anything.
currently code looks like:
<head> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/jquery.lazyload.min.js"></script> <script> $(function() { $("#content img.fadeload").lazyload({ container: $("#content"), placeholder : "images/white.jpg", effect : "fadein", effectspeed: 1000 }); }); </script> <style> #content { font-size: 100%; position: absolute; height: 574px; width: 750px; margin-top: -277px; margin-bottom: 0px; padding-left: 240px; padding-top: 0px; padding-bottom: 0px; top: 50%; overflow-x: scroll; white-space: nowrap; } </style> </head> <body> <div id="content"> <img class="fadeload" src="images/white.jpg" data-original="images/livestuffhotstuff/photo01.jpg" alt="photo01"/> <img class="fadeload" src="images/white.jpg" data-original="images/livestuffhotstuff/photo02.jpg" alt="photo02"/> <img class="fadeload" src="images/white.jpg" data-original="images/livestuffhotstuff/photo03.jpg" alt="photo03"/> <img class="fadeload" src="images/white.jpg" data-original="images/livestuffhotstuff/photo04.jpg" alt="photo04"/> <img class="fadeload" src="images/white.jpg" data-original="images/livestuffhotstuff/photo05.jpg" alt="photo05"/> <img class="fadeload" src="images/white.jpg" data-original="images/livestuffhotstuff/photo06.jpg" alt="photo06"/> <img class="fadeload" src="images/white.jpg" data-original="images/livestuffhotstuff/photo07.jpg" alt="photo07"/> <img class="fadeload" src="images/white.jpg" data-original="images/livestuffhotstuff/photo08.jpg" alt="photo08"/> <img class="fadeload" src="images/white.jpg" data-original="images/livestuffhotstuff/photo09.jpg" alt="photo09"/> <img class="fadeload" src="images/white.jpg" data-original="images/livestuffhotstuff/photo10.jpg" alt="photo10"/> <img class="fadeload" src="images/white.jpg" data-original="images/livestuffhotstuff/photo11.jpg" alt="photo11"/> <img class="fadeload" src="images/white.jpg" data-original="images/livestuffhotstuff/photo12.jpg" alt="photo12"/> </div> </body> and here temporary link website in progress if want see functionality (or lack of functionality rather) of lazyload plugin in current state.
any advice relating getting lazyload function way want or recommendation of method altogether image fadein effect appreciated. ton!
your images missing width , height attributes. lazy load wont work without them. without knowing width , height browser cannot know images supposed in layout when document.ready event fires. proper image tag looks following:
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480"> jquery fadein horizontal-scrolling lazy-loading
No comments:
Post a Comment