How to install jQuery LazyLoad Plugin?

[bbilal]

I have the downloaded this plugin but don't know how to install it! Docs is available but still I am not able to install it. Docs: http://www.appelsiini.net/projects/lazyload.

Do you need any special requirement to install jQuery? In doc it says:

and in your code do:

$("img").lazyload();


I don't have any code :S what does it mean by in your code do? :S

Any help would be appreciated!

Regards,
BBilal.

[Beverleyh]

Have you tried viewing the source of the demo page?: http://www.appelsiini.net/projects/lazyload/enabled.html

jQuery is a pre-written javascript library with lots of inbuilt effects and functions. However, you need to write your own code, using jQuerys pre-defined rules to utilise the inbuilt features.

Basically, this initiates jQuery;

<script type = "text/javascript">
$(document).ready(function()
{
// Write your code here
}
</script>

These resources will get you started with learning how to use jQuery: http://net.tutsplus.com/tutorials/javascript-ajax/15-resources-to-get-you-started-with-jquery-from-scratch/

[bbilal]

Oh my God this is so advanced for me! Can you give me any code which can actually work! So then I will learn from it. I can't write any code :S

[Beverleyh]

Hmmm - "do it for me" is probably not the best approach when asking for guidance. There are many guys here who are happy to help but I think the general consensus is that its preferable to guide somebody who shows willing to try and help themself.

That being said, the only code I or anybody else could give you is what's already in the source code of the demo - seriously, it doesn't get much simpler than how the author has layed it out there so there's no point in me duplicating what they've already done.

You say you want the code so you can learn from it? Now you have it, I hope this is what you do. I think you should start by reading a few of the starter guides so you can learn the basic jQuery theory and then when you look at that demo's source code it will start to make more sense.

[traq]

You might not want to use this plugin anyway. From the author's page:


Lazy Load is currently not usable. It does not work with the latest browsers as expected. I have currently no time updating the code myself.

Beyond that:
I don't have any code :S what does it mean by in your code do? :S
If you don't have any code, you don't have a webpage, so you have no need for any of this.

If you do have a webpage, please post a link and we might be able to give you a more helpful response. Have you ever worked with HTML or Javascript before? If not, you need to learn the basics first, otherwise, nothing will make any sense to you.

[bbilal]

But I use old browsers! Even then I can't see it. I have my whole website using Wordpress! t-clicks.com/blog

[Beverleyh]

I think you might be in way over your head.

Possible things you need to do more research on;
1 - basic HTML
2 - web programmer help tools (firebug)
3 - other web browsers and their quirks/inconsistencies/differences
4 - the importance of accessibility on the web

[traq]

I think Beverleyh is right; you should learn some more about basic HTML and javascript first. You could also ask for help on a Wordpress forum, where users are more familiar with the working environment.

Your page is loading jQuery:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2'></script>
and, it is loading the lazyload plugin:
<script type='text/javascript' src='http://www.t-clicks.com/blog/wp-content/plugins/jquery-image-lazy-loading/javascripts/jquery.lazyload.mini.js?ver=1.5.0'></script>
this file:
<script type="text/javascript" src="http://www.t-clicks.com/blog/wp-content/themes/freshlife/javascript/LazyLoad.js"></script>does not exist. That may be causing problems, or it may not impact anything.

Right here:
<script type="text/javascript">$("img").lazyload();</script>
is your lazyload call, and (as far as I can tell) it's working fine. What is it not doing that it should?

Just FYI, further down, on this line (in your #loading div, near the top of the body):
<div style="opacity: 0.4;" id="wadio" class="wadio" onmouseover="makevisible('wadio', true)" onmouseout="makevisible('wadio', false)"> you are getting a javascript error: makevisible is not defined. That stops your javascript: either find the function and make sure it's working, or get rid of the onmouseover, onmouseout events.

[bbilal]

I have added these lines in my header.php:

<head>
<script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascript/LazyLoad-yui-compressed.js"></script>
<script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascript/LazyLoad.js"></script>
<script language="javascript" type="text/javascript">$("img").lazyload();</script></head>

I have made sure that the file does exist in javascript/..

I have also removed this line from my file:

<div style="opacity: 0.4;" id="wadio" class="wadio" onmouseover="makevisible('wadio', true)" onmouseout="makevisible('wadio', false)">

But it still doesnt work!

And I don't know what call it is but the call I need is to load image when someone scroll down the page! Check my source now!

[traq]

I'm sorry, you misunderstand. Those lines already existed. I took them from your source code, to help explain what they were doing. If they're there once, you should not add them again.



You should also note that if an image is in your browser cache (and it probably is, since you've already viewed your page), then you'll see the images right away no matter what.

In addition, the author's comment about "newer browsers" was made in 2007, so they're actually older browsers now. Further down the page he mentions that the plugin is built for jQuery 1.2 and isn't even compatible with 1.3.x (version 1.4.x is current (and it's what you're using)).