Generate Random Placeholder Images With jQuery - pikit

pikit is a lightweight yet useful jQuery plugin used to randomly generate customizable placeholder images (dummy images) from several image placeholder services.

Supported image placeholder services:

• DummyImage
• FPOImg
• Lorem Pixel
• Nosrc
• Placeholdit
• Placeimg

How to use it:

1. Put the jquery.pikit.js script after jQuery JavaScript library and we're ready to go.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="core/jquery.pikit.js"></script>

2. Call the function on the target containers where you want to generate the image placeholders.

<div class="pikit-container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  ...
</div>

$(document).ready(function() {
  $('.pikit-container').children().pikit()
})

3. Set the height/width of the generated placeholder images.

$(document).ready(function() {
  $('.pikit-container').children().pikit({
    height: 200,
    width: 200,
  })
})

4. If you want to generate image placeholders from a specific service.

$(document).ready(function() {
  $('.pikit-container').children().pikit({
    service: 'placeimg'
  })
})

5. More options to customize the the generated placeholder images (based on the placeholder services).

$(document).ready(function() {
  $('.pikit-container').children().pikit({
    format: null,
    sizeKeyword: null,
    greyscale: false,
    backColor: null,
    foreColor: null,
    customText: null,
    category: null,
    variant: null
  })
})

---

This awesome jQuery plugin is developed by jqueryscript. For more Advanced Usages, please check the demo page or visit the official website.