AndroidArsenal image previewer - adds button to preview library-related images. Not so beautiful nowadays, but it works!

androidarsenal_previewer.user.js

// ==UserScript==
// @name         AndroidArsenal image previewer
// @namespace    http://tampermonkey.net/
// @version      0.2
// @run-at       document-end
// @description  Adds button to preview library-related images. Not so beautiful nowadays, but it works!
// @author       Nuark
// @match        *://android-arsenal.com/
// @match        *://android-arsenal.com/tag*
// @grant        none
// @downloadURL  https://gist.github.com/NuarkNoir/f9dda415de94bef4b8a40bd10c91be4b/raw/androidarsenal_previewer.user.js
// @updateURL    https://gist.github.com/NuarkNoir/f9dda415de94bef4b8a40bd10c91be4b/raw/androidarsenal_previewer.user.js
// ==/UserScript==

(function(w) {
    'use strict';

    w.init = () => {
        if (w.jQuery === undefined) {
            setTimeout(w.init, 1000);
            return;
        }

        // Page cleanup
        document.querySelectorAll("[id*=adsBlock]").forEach(x=>x.parentNode.remove());

        // Removing images and generating buttons...
        document.querySelectorAll("#projects .pi").forEach(x => {
            x.querySelectorAll(".desc .image").forEach(x=>x.remove());
            let button_shower = document.createElement("button");
            button_shower.type = "button";
            button_shower.classList.add("btn", "btn-primary", "btn-block");
            button_shower.textContent = "Show images";
            button_shower.onclick = function() {
                let link = this.parentNode.parentNode.querySelector(".header > .title > a").href;
                w.$.get(link, function(html) {
                    let holder_div = document.createElement("div");
                    holder_div.innerHTML = html;
					console.log(holder_div);
                    let images_el = holder_div.querySelectorAll("#description img");

					let images = [];
					images_el.forEach(x => {
						if (Boolean(x.dataset["layzr"])) {
							images.push(x.dataset["layzr"]);
						}
					});
                    holder_div = null;
					console.log(images_el);
					console.log(images);

					let sub_div = document.createElement("div");
					sub_div.classList.add("modal", "fade");
					sub_div.role = "dialog";

					let modal_inner_holder = document.createElement("div");
					modal_inner_holder.classList.add("modal-dialog", "modal-lg");

					let modal_content = document.createElement("div");
					modal_content.classList.add("modal-content", "m-2");

					if (images.length > 0) {
						let cid = "car_r_" + Date.now().toString()
						let holder = document.createElement("div");
                        holder.classList.add("d-flex", "flex-wrap");

						images.forEach(img => {
							console.log(img);
							let image_content = document.createElement("img");
							image_content.src = img;
							image_content.classList.add("l");
                            image_content.style.width = "200px";
							holder.appendChild(image_content);
						});

						modal_content.appendChild(holder);
					}
					else {
						let message_div = document.createElement("div");
						message_div.textContent = "No images found ";
						modal_content.appendChild(message_div);
					}

					modal_inner_holder.appendChild(modal_content);
					sub_div.appendChild(modal_inner_holder);

                    w.$(sub_div).modal();
                });
            };
            x.querySelector(".desc").appendChild(button_shower);
        });
    }

    w.init();
})(window);