Avatar Snippet Generator

Usage

Create an element with class gm-avatar.

Example:

<div class="gm-avatar"></div>

Then add an attribute data-content with an array value of objects.

Example content format:

[
  {
    "avatar": "https://i.pravatar.cc/",
    "tooltip": "Avatar 1",
    "alt": "Random Avatar",
  }
]

avatar | img | src

(Required) The image url. Any of these keys is allowed but will only read 1 value.

tooltip

(Optional) The title that will appear when you hover the image.

alt

(Optional) The image alt attribute value.

---

Full Example

<!-- Avatar Snippet -->
<div
     class="gm-avatar"
     data-content='[{"tooltip":"Avatar 1", "avatar": "https://i.pravatar.cc/?img=21"},{"tooltip": "Avatar 2", "avatar": "https://i.pravatar.cc/?img=22"},{"tooltip":"Avatar 3", "avatar": "https://i.pravatar.cc/?img=23"},{"tooltip":"Avatar 4", "avatar": "https://i.pravatar.cc/?img=24"},{"tooltip":"Avatar 5", "avatar": "https://i.pravatar.cc/?img=25"},{"tooltip":"Avatar 6", "avatar": "https://i.pravatar.cc/?img=26"}]'
     ></div>

<!-- Avatar Snippet Generator -->
<script src="https://cdn.jsdelivr.net/gh/mikesaraus/avatar_snippets@main/index.min.js"></script>

View Example in JSFiddle

---