Greasy Fork

Can you Help to Finish my userscript (fix thumbnail size of mini thumbnail under photo)

Flickr as changed something to its code for this Mini Thumbnail .

I use it a lot with the help of my beloved "Thumbnail Zoom Plus" for preview its thumbnail. But after this change, now it display only a small preview. here an code example:

So i want modify these images background-image for a large view: _t.jpg AND _s.jpg en: _z.jpg

Here my userscript which need your help:

    // ==UserScript==
// @name        Flickr - TEST - Photo page Mini Thumbnail enlarge v.1 - NOT work
// @namespace   decembre
// @description Photo page : enlarge mini thumbnail style image background
// @include     https://www.flickr.com/photos/*
// @version     1

// @require     http://code.jquery.com/jquery-latest.js
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js


// @grant       none
// ==/UserScript==

// FROM : https://forum.alsacreations.com/topic-5-85617-1-Comment-Modifier-une-partie-de-lurl-de-backrgound-image-javascript.html
// 


// JQuery - not working
/*
$('.context-thumb').each(function() {
    var url = $(this).css('background-image');
    var newurl = url.replace('_t.jpg', '_z.jpg');
    $(this).css('background-image', newurl);
});
*/
// Pure JavaScript
//   var newurl = url.replace('_t.jpg', '_z.jpg');
var list = document.getElementsByClassName("context-thumb");
for (var i = 0; i < list.length; i++) {
  var url = list[i].style.backgroundImage;
var newurl = url.replace(/_t\.jpg|_s\.jpg/g, '_z.jpg');
  list[i].style.backgroundImage = newurl;
}

// BOOKMARKLET TEST:
// TEST 1:
// javascript:{var%20list%20=%20document.getElementsByClassName("context-thumb");%20for%20(var%20i%20=%200;%20i%20<%20list.length;%20i++)%20{%20%20%20var%20url%20=%20list[i].style.backgroundImage;%20%20%20var%20newurl%20=%20url.replace('_t.jpg',%20'_z.jpg');%20%20%20list[i].style.backgroundImage%20=%20newurl;%20};t()}

Functions are written by another dev which don't know nothing about Userscript: Comment Modifier une partie de l'url de backrgound-image (javascript)

The pure javascript function version work (the JQuery Too...).

It seems i don't know how to implement it in an userscript too: :wink: Can you find how to write it ? Thanks

PS: the function work for images loaded at the beginning but not for the other images which are loading after: How to match these one too ?