gennji.com image gallery

Click any of the images in articles for a gallery overlay.

Stel een vraag, plaats een beoordeling of rapporteer dit script.

Regels afbreken

// ==UserScript==
// @name        gennji.com image gallery
// @namespace   abdrool
// @match       https://gennji.com/post-*
// @grant       GM_addStyle
// @grant       GM_getResourceText
// @version     1.0
// @author      abdrool
// @icon        https://gennji.com/wp-content/uploads/2020/01/ddf800ca93715b2925d8013c210de622-32x32.png
// @description Click any of the images in articles for a gallery overlay.
// @require      http://code.jquery.com/jquery-latest.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.1/baguetteBox.min.js
// @resource     css https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.1/baguetteBox.min.css
// ==/UserScript==

let customCss = `
#gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column wrap;
}

#gallery img {
  padding-bottom: 20px;
}
`

$(document).ready(function() {
  let urls = $("article .blocks-gallery-item img").map(function() { return this.src }).get();
  
  $("article figure").empty();
  $("article figure").prepend("<div id='gallery'></div>");
  
  let galleryItems = urls.map(url => {
    return "<a href='" + url + "'><img src='" + url + "'></a>"
  });
  $("#gallery").append(galleryItems);
  
  GM_addStyle(GM_getResourceText('css'))
  GM_addStyle(customCss);
  baguetteBox.run("#gallery");
});