☰

gennji.com image gallery

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

  1. // ==UserScript==
  2. // @name        gennji.com image gallery
  3. // @namespace   abdrool
  4. // @match       https://gennji.com/post-*
  5. // @grant       GM_addStyle
  6. // @grant       GM_getResourceText
  7. // @version     1.0
  8. // @author      abdrool
  9. // @icon        https://gennji.com/wp-content/uploads/2020/01/ddf800ca93715b2925d8013c210de622-32x32.png
  10. // @description Click any of the images in articles for a gallery overlay.
  11. // @require      http://code.jquery.com/jquery-latest.js
  12. // @require      https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.1/baguetteBox.min.js
  13. // @resource     css https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.1/baguetteBox.min.css
  14. // ==/UserScript==
  15.  
  16. let customCss = `
  17. #gallery {
  18.   display: flex;
  19.   justify-content: center;
  20.   align-items: center;
  21.   flex-flow: column wrap;
  22. }
  23.  
  24. #gallery img {
  25.   padding-bottom: 20px;
  26. }
  27. `
  28.  
  29. $(document).ready(function() {
  30.   let urls = $("article .blocks-gallery-item img").map(function() { return this.src }).get();
  31.   
  32.   $("article figure").empty();
  33.   $("article figure").prepend("<div id='gallery'></div>");
  34.   
  35.   let galleryItems = urls.map(url => {
  36.     return "<a href='" + url + "'><img src='" + url + "'></a>"
  37.   });
  38.   $("#gallery").append(galleryItems);
  39.   
  40.   GM_addStyle(GM_getResourceText('css'))
  41.   GM_addStyle(customCss);
  42.   baguetteBox.run("#gallery");
  43. });