README.md

imageLoader for Responsive images

Loading images based on specal data-attributes. This could be used to load bigger images when using responsive images.

How it works

Prepare images

the plugin expects image tags to be like:

<img src="/source/to/img.jpg" 
	width="300" 
	height="300"
	data-src300="/source/to/300/img.jpg"
	data-src600="/source/to/600/img.jpg"
	data-src900="/source/to/900/img.jpg"
	… />

or you could use it like this

<!-- this is for wrapper with responsive sizes -->
<div class="image"
	data-src300="/source/to/300/img.jpg"
	data-src600="/source/to/600/img.jpg"
	data-src900="/source/to/900/img.jpg"
	>
	<img src="some url" />>
</div>

or you could use it for background images

<div class="image"
	style="background-image:url('/source/to/image.jpg');"
	data-src300="/source/to/300/img.jpg"
	data-src600="/source/to/600/img.jpg"
	data-src900="/source/to/900/img.jpg"
	…
	></div>

Javascript

run the script like follows

$('.image').imageLoader({settings})

settings

the default settings are

startSize: 300,                 // smallest size
stepSize:  300,                 // steps to go from smallest size
prefix:    'src',               // prefix for data-src300 attributes
imgPath:   '',                  // path that should be prepended
complete:  function(el, src){}  // triggers after new image is loaded

Example

Imagine the plugin should load images bigger than 200px (width or height, the biggest counts) and the steps should be 100px. You would render your image like follows:

<img class="responsive" src="/img/image.jpg" data-s200="image.jpg" data-s300="image2.jpg" data-s400="image3.jpg" >

and the javascript like this

$('.responsive').imageLoader({
	startSize: 200,
	stepSize: 100	,
	prefix: 's',
	imgPath: '/img/'
});