Pairing the LazyLoad fade in effect with text

[A_Tame_Lion]

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:

<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:

$("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:

<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?

$(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!

[mic7777]

Hi,

just read your post. i'm dealing with the same problem.

Though as a complete beginner i cannot really follow the solution you illustrated and do all my coding in a more or less trial and error mode.

Anyways. The same guy who developed LazyLoad also did something called Viewport Selector.

I plugged that on my site and it......had an effect:

http://jsfiddle.net/UUGUd/9/

The code does not look very clean or elegant but see what I mean? the text is triggered by the Viewport Selector.

This piece of code can be also found in the LazyLoad Code, so I tried to trigger this one. So far no sucess. maybe you have an idea.

How far is your own attempt? Could you manage to make it run?

cheers
mic

[A_Tame_Lion]

Hi Mic,

Thanks for sharing this.

Briefly let me explain, I'm quite a beginner too - but I got a book published by SitePoint called jQuery Novice to Ninja, and found a bit of code in there and coupled that with some code I had used on a previous website, to bring together two aspects of functionality to make my script work. What my script does is this.

1) It targets text blocks with a class of "textFade" and fades them into the page - in my example these are anchor tags with the class "textFade".
2) however before fading them in, it checks the position of the element containing the text blocks (the containing block - in my case an html div). If the containing block is in the viewport - calculated by using jQuery to detemine the window height plus the amount the window has been scrolled (value a) and comparing this with the offset of the containing block plus the containing blocks height (value b). So if value b is less than value a, the text with the class "textFade" within the containing block will fade in.

The function is divided into 2, the first part checks for the text to fade in on page load, and the second part handles what happens once the page scrolls, note the $(window).scroll(function()...

Hope that makes sense, not very good at explaining things!

Anyway my code has problems in IE7 and to a lesser extent on Firefox, I have been working on a revised version which seems to be more lightweight, but needs more testing. The code on jsfiddle does work, but again it appears to have problems in IE7/8. I think I may end up running alternative code that simply fades the text blocks in regardless of where they are on the page for IE7/8.

I will check all this out later this week and let you know. If you have any success, let me know too.