Привет, незнакомец!

Похоже, вы здесь новенький. Чтобы принять участие, нажмите одну из кнопок ниже!

Display Image Name Under Thumbnails?

отредактировано September 2018 Раздел: Запросы на создание скриптов Chrome
Hey,

Is it possible someone could produce a simple script which displays the image name underneath each thumbnail on a webpage? The thumbnails I would like to display the image names underneath are all sized at 160x107. I'm not sure whether a script could be advanced enough to only display the names under image which are this exact size. Would be most appreciated because I have been after something which can do this for a while!

Thanks!

Комментарии

  • The simplest case: labels are added after a page has been loaded:

    // ==UserScript==
    // @name         Image captions 160x107
    // @match        http://*/*
    // @match        https://*/*
    // ==/UserScript==
    
    [].forEach.call(document.getElementsByTagName('img'), function(img) {
        if (img.naturalWidth == 160 && img.naturalHeight == 107) {
            img.insertAdjacentHTML('afterend',
                '<div class="caption160x107">' +
                    img.src.match(/([^\/?#&]+)[^\/]*$/, '$1')[1] +
                '</div>'
            );
        }
    });
    
  • отредактировано September 2018 Chrome
    Wow, awesome work! I didn't expect anyone to respond so soon, if at all, so it surprised me when I came online and found a script here.

    At first I was unsuccessful in getting the script to work, but then realised I had actually made a mistake with the dimensions; it should've been 107x160 rather than 160x107. Once I had swapped the values around in the script and re-saved it, it worked.

    The website I wanted to use it with is a gallery website with lots of assorted image thumbnails arranged in a grid-fashion all down the page. Underneath each thumbnail it shows the amount of pictures in the gallery, and also the date in which the gallery was published. I thought the script would perhaps interfere with this text, but it actually places the image names above which works out perfect.

    On the website there are also a few larger thumbnails which are sized at 145x217. These aren't as important but it would be nice to add the same support for these as well. Would it be possible to adapt the script to display image names under both the 145x217 sized thumbnails as well as the 107x160 ones?

    Also, I know this is a long shot, but would there be a method of hiding the last 11 characters of the filename? I'm only interested in the first 5 characters because these hold the gallery number; the rest of the filename for each thumbnail is made up with random characters which are irrelevant.
  • Would it be possible to adapt the script to display image names under both the 145x217 sized thumbnails as well as the 107x160 ones?

    if (' 107x160 145x217 '.indexOf(' '+img.naturalWidth+'x'+img.naturalHeight+' ') >= 0) {
    

    would there be a method of hiding the last 11 characters of the filename?

    img.src.match(/([^\/?#&]+)[^\/]*$/, '$1')[1].slice(0,-11) +
    
  • отредактировано September 2018 Chrome
    Thank you so much, that's fantastic! I would have no idea how to do any of this stuff. It looks great now I've updated the script with your further modifications and added some enhancements to the CSS in Stylebot.

    At first I had a problem where the 107x160 labels weren't showing when the new 145x217 ones were activated, but it seemed to right itself after some fiddling around so i'm not sure what happened there. Once again, I really appreciate your assistance, this will be a massive time-saver for me in the future!
  • отредактировано September 2018 Chrome

    It's been a few years since I made this thread and I'm still using the script on a weekly basis. Just wondering, would it be possible to adjust the script so it centers the filename text which is shown beneath the image? And could this text specifically be increased in size from 11px to say, 17px?

    One more thing, is it possible to add a parameter to adjust padding above and below the filename text?

    Thanks! :) I have copied the current script underneath:

    // ==UserScript==
    // @name         Photo Number
    // @match        http://*/*
    // @match        https://*/*
    // ==/UserScript==
    
    [].forEach.call(document.getElementsByTagName('img'), function(img) {
        if (' 230x129 145x217 107x160 107x60 '.indexOf(' '+img.naturalWidth+'x'+img.naturalHeight+' ') >= 0) {
            img.insertAdjacentHTML('afterend',
                '<div class="PhotoNumber">' +
                    img.src.match(/([^\/?#&]+)[^\/]*$/, '$1')[1].slice(0,-15) +
                '</div>'
            );
        }
    });
    
Войдите или Зарегистрируйтесь чтобы комментировать.