Pairing the LazyLoad fade in effect with text
Hi,
I have a web page which has a number of images each in their own div and with html rendered text in each div too - something like:
HTML Code:
<div class="yui3-u-1-3 first promosLeft" style="width: 318px; margin: 0 0 0 15px;">
<a href="/somepage" title="Image"><img class="lazy" src="http://www.mysite.com/image.gif")" alt="Alt Text" width="318" height="394" style="display:block" border="0"></a>
<a class="ed1 textFade" href="/somepage" style="position: absolute; left: 412px; top:226px; font-family: Times,'Times New Roman', serif; font-size: 16px; line-height: 18px; text-align: center; text-decoration:none; color:#000;" title="Image">Text to fade in when image loads</a>
<a class="textFade" href="/somepage" style="position: absolute; left: 439px; top:276px; font-family:Helvetica, Arial, sans-serif; text-decoration:none; color:#000; font-size:18px; font-weight: bold !important;" title="Sell Link">More text to fade in when image loads</a>
</div>
So the page loads fine, LazyLoad works perfectly on the images, as the page is scrolled the images fade in. I have used the following coder to achieve this:
Code:
$("img.lazy").lazyload({
effect : "fadeIn"
});
What I am trying to do is fade in the html text relevant to each specific div - that is all text with the class textFade, at the same time as the image. I have achieved this through the following code, but through testing it seems a bit heavy in Firefox and IE7:
Code:
<script type="text/javascript">
$(document).ready(function () {
$(".textFade").each(function() {
var container = $(this).parent(),
offset = container.offset(),
pageBottom = $(window).scrollTop() + $(window).height();
if (offset.top <= pageBottom) {
$(this).fadeIn(2000);
} else {
$(window).scroll(function() {
$(".textFade").each(function() {
var containerScrolled = $(this).parent(),
x = containerScrolled.offset(),
containerScrolledPosTop = x.top,
containerScrolledHeight = containerScrolled.height() *.9,
containerScrolledVisible = containerScrolledPosTop + containerScrolledHeight,
pageBottomScrolled = $(window).scrollTop() + $(window).height();
if (containerScrolledVisible <= pageBottomScrolled) {
$(this).fadeIn(2000);
}
});
});
}
});
});
</script>
Does anyone have any ideas about how I can make this code more lightweight, or how I can actually plug this function into LazyLoad itself, so that it triggers each time after an image is loaded?
I have seen this code on the LazyLoad website and think I can probably modify it?
Code:
$(function() {
$("img:below-the-fold").lazyload({
event : "sporty"
});
});
$(window).bind("load", function() {
var timeout = setTimeout(function() {
$("img.lazy").trigger("sporty")
}, 5000);
});
I'm not sure exactly what that code is doing, but if "sporty" is the name of a function, should I be able to give my function a name and simply replace "sporty" with whatever my function is called?
I'm a bit lost with this and would appreciate any help!
