jQuery Plugin To Generate A Random User Wall - RandomUserWall

RandomUserWall is a fancy jQuery plugin for creating an user wall that loads random user portraits using randomuser.me API, which is a random user data generator like the Lorem Ipsum.

How to use it:

1. Create an empty container for the user face wall.

<div class="wall"></div>

2. The required CSS styles.

.wall {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
}

.wall img {
  margin: 0 0 -5px 0;
  display: inline-block;
  width: 14.285%;
  z-index: 0;
  position: relative;
}

.wall:after {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  height: 100%;
  left: 0;
  width: 100%;
  z-index: 20;
  background: rgba(255, 255, 255, 0.2);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.6) 70%, rgba(255, 255, 255, 0.98) 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.2)), color-stop(70%, rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0.98)));
  background: linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.6) 70%, rgba(255, 255, 255, 0.98) 100%);
}

3. Load the jQuery library and the jQuery RandomUserWall plugin in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="jquery.randomuserwall.js"></script> 

4. Initialize the plugin and set the number of user faces you wish to load.

$('.wall').randomUserWall({ numFaces: 98 });

5. Options and defaults.

numFaces: 0,
gender: '', // female or male
imgSize: ''

---

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