Skip to content

Repository files navigation

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 pixelscount: 20,// load 20 imagesgrey: 1,// load grey / black & white imagesrandomWidth: 100,// width will be in 100-200 rangerandomHeight: 100,// height will be in 200-300 rangecategory: 'fashion',// get images from fashion categoryitemBuilder: function(index,url,width,height){// custom HTML output for UL container// `this` is jQuery wrapped container elementreturn'<li><img src="'+url+'" width="'+width+'" height="'+height+'" alt="Image '+(i+1)+'"></li>';}});

About

jQuery plugin for populating elements with random images

Resources

Stars

0 stars

Watchers

2 watching

Forks

Releases

Packages

Contributors