LoremImages

LoremImages is a jQuery plugin for populating your content with random images. Images are loaded from LoremPixel service and licensed under the Creative Commons Attribution-ShareAlike license.

See the DEMO

Usage

$("#container").loremImages( width, height [, options ] );

Arguments

width Width of all images [int]

height Height of all images [int]

options Optional plugin options [obj]. Options list:

• count [int] number of images that should be loaded, default is 10
• grey [bool] whether to load only black & white images, default is false
• randomWidth [int] random range for width value, default is 0
• randomHeight [int] random range for height value, default is 0
• category [string] images category, defaul is all categories. can be: abstract, animals, city, food, nightlife, fashion, people, nature, sports, technics, transport
• itemBuilder [function] function that returns HTML for one item. function arguments are: index, url, imgWidth, imgHeight. default output is <img src="[url]" alt="Lorempixel">

randomWidth & randomHeight options

With these two options you can randomize sizes of final images. For example, if width is 100 and options.randomWidth is 200, it will generate images from 100 to 300 pixels wide.

Examples

Call with all options

$("ul.images").loremImages( 100, 200, { // images base size 100 x 200 pixels     count:        20,        // load 20 images     grey:         1,         // load grey / black & white images     randomWidth:  100,       // width will be in 100-200 range     randomHeight: 100,       // height will be in 200-300 range     category:     'fashion', // get images from fashion category     itemBuilder:  function( index, url, width, height ){ // custom HTML output for UL container         // `this` is jQuery wrapped container element         return '<li><img src="'+url+'" width="'+width+'" height="'+height+'" alt="Image '+(i+1)+'"></li>';     } });