Lazy Loading horizontal scroll jQuery
So, I'm working on this photography portfolio for a client who really wants her photos to disappear when they appear in the browser window. So I did some research and it seemed like a jQuery plugin lazyload
would be perfect. The problem is that she also really wants her photos to be horizontally scrolled and seems lazyload
to only want to work with vertical scrolling of web pages. I have searched around and apparently lazyload
should work in side scrolling divs with this script:
$("img").lazyload({
container: $("#container")
});
but it doesn't do anything.
It currently looks like this:
<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 is a temporary link to the current website if you want to see the functionality (or lack of functionality) lazyload
in the current state.
Any advice regarding getting the lazyload to work the way I want, or recommending a different method in general for the fadein effect of the image would be GREAT appreciated. Thanks a ton!
source to share
Your images are missing width and height attributes. Lazy Load won't work fine without them. Without knowing the width and height, the browser cannot know where the images should be in the layout when the event fires document.ready
. A correct image tag looks something like this:
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
source to share