creating plugins

Though I do not want to reinvent the wheel, it piques my interest to improve known mechanics. Just take a look - feedback welcome ;)

running around

Everyday life: Coffee, forms, microsites, daffy functions. To realize my own ideas I started to create this page. I hope you enjoy it.

solving problems

Doesn't it excite us to solve unusual problems? Beside daily grind's drabness it's the perfect diversion. So allow full bent!

LazyImage

What is it?BENEFITS & MOTIVE

EsKju's LazyImage is a tool for fading images once loaded.

 

FeaturesWHY SHOULD I USE IT?

  • Useable as a preloader
  • Customizable trough settings and CSS
  • Highly compatible
  • Uses CSS3 transitions by default

How to useget it up and running


#1

doctype

Make sure you are using valid DOCTYPE. This is required for LazyImage to look and function correctly.

<!DOCTYPE html>
#2

include files

Loading jQuery from CDN (Content Delivery Network) is recommended. Include all lazyImage JavaScript and CSS files in addition.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/eskju.jquery.lazyimage.js"></script>
<link rel="stylesheet" href="css/eskju.jquery.lazyimage.css" />
#3

html markup

Create a HTML container.

<div id="example1">
	<div class="esKju-lazyimage">
		<!-- Pay attention to correct width and height definition -->
		<img src="http://placekitten.com/g/300/200" width="300" height="200" alt="My Demo Image" />
	</div>
</div>
#4

html markup alternative

Or ensure you enabled the "createParentContainers" option and use:

<div id="example1">
	<!-- Pay attention to correct width and height definition -->
	<img class="esKju-lazyimage" src="http://placekitten.com/g/300/200" width="300" height="200" alt="My Demo Image" />
</div>
#5

fire plugin using jquery selector

If you are not familiar with jQuery, please, read this tutorial for beginners. Sample examples:

$( document ).ready( function( )
{
	$( ".esKju-lazyimage" ).LazyImage(
	{
		// your options
	});
} );

OptionsTIME TO CONFIGURE THINGS?

Easy plugin, easy life. Configure things just to taste :)

$( document ).ready( function( )
{
	$( "body" ).LazyImage();
} );
Ver.OptionTypeDefaultDescription
1.0animationstring Animation style
1.0filterstring Filter style

Comments & Feedback



Add a comment