F. Content Glider + LazyLoad

[yabadabadoo]

1) Script Title:
Featured Content Glider

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...tentglider.htm

3) Describe problem:
Hi guys. Thanks for the magic

My project is a digital magazine with too many images so I'm using the lazyload script.
I can use it with regular images includes but when I try to combine it with "Content Glider" it doesn't work.
The exact problem is that images do not load when they are in divs with class "glidecontent".
I don't know what part of the css or js script is interfering with the img loads.
Does any of you have a clue???

Hope you do, thanks.

[jscheuer1]

First thing I'd try is where you init Lazy Load. According to the:

http://www.appelsiini.net/projects/lazyload

page, the typical init is simply:

$("img").lazyload();

But as you have seen, the Glider's images need to be exempt. With a little luck that can be accomplished by adding the highlighted:

$("img").not("glidecontent img").lazyload();

The browser cache may need to be cleared and/or the page refreshed to see changes.

But things might be more complicated than that.

If so and you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[yabadabadoo]

Thanks John for your answer. Still, I didn't make it.

This is a sample of the project with the lazyload applied.
And this is the way it should see, but this one hasn't the lazy effect.
Any idea???

Thanks for your time!

[jscheuer1]

The only problem I see with the non-working page is that the images are 404 Not Found. For example:

<img src="Image/N02/N02_tapa.png" usemap="#tapa" border="0" />

should be:

<img src="Image/N02_tapa.png" usemap="#tapa" border="0" />

I made a local copy of the page and fixed all those. After that it worked just like the working page, the one without Lazy Load. What's more, even if I put the glider images 'below the fold', it still worked just fine with Lazy Load with the images being grayed out until I scrolled down to the glider.

BTW, there are a number of other missing images on the page, like:

Image/logo.jpg

I'm not sure where those actually are.

[yabadabadoo]

Jhon, my bad, the sample should not have the "/N02/" part, I just forgot to refresh those files.
Anyway. I did the change. What I notice is that in IE you can see the images (and not in Chrome) but the effect is missing. Not just the FadeIn effect but the lazy load too. This sample has a few images and you can see in the status bar how much it takes to load them from the beginning.
Does it sound like more issues?

[jscheuer1]

Works here in Chrome for me. perhaps you need to clear the cache and/or refresh the page.

But there should be no lazy loading, the images are all 'above the fold'. Lazy Load only works on images that you cannot see because they are lower on the page than what you're looking at. It has no effect on images that you cannot see simply because their visibility is hidden. And, I'm pretty sure the content glider needs to load the images to get their dimensions in order to layout correctly.

But if the glider is 'below the fold', Lazy load should work on and with it as long as the dimensions for the images are specified.

I beginning to think though that your problem is that there are too many bytes in the glider, rather than too many bytes going vertically down the page. The latter is what Lazy Load is for. For the former, a different solution would need to be found.

When I have more time, and if you agree that's the problem, I'll look into it.

[yabadabadoo]

That seems to be the thing!
So I tried setting the "direction" to downup in glider script. But it seems I must touch the scroll bar so tha lazyload works.
Because the glider script just hide the divs as you said and they are still above the fold though they are hidden. Right?
So I think they are not combinable scripts right?

[yabadabadoo]

Well, actually there is a way to do it with some other event than scrolling.

 $("img").lazyload({ 
    placeholder : "img/grey.gif",
	effect:"fadeIn",
	event:"click"
});
      });

There you can see how using event:"click" is used instead of scrolling. But the problem now is that with that event you have to click the image, wich is not an option for this project. So I looked for some others events that work in a sort of "automatic" way of loading the images, but I didn't get it.
Do you know another event that can be useful for this project?
Or another idea?
Thanks guys!