imdb perma zoom?

[liamauve]

hi, i wonder if there is a way to permanently enlarge the actors' images on imdb's full credit pages like this.

i know it's technically no longer is a hover... thanks for reading

[LiliaDoe]

To do that, you'll want to use something like tampermonkey and create a script which executes on full credit pages.

This will do what you are wanting:

// ==UserScript==
// @name         Big actor images
// @namespace    http://tampermonkey.net/
// @version      2024-12-06
// @description  Expands actors images
// @author       Lilia
// @include      /^https?:\/\/www\.imdb\.com\/title\/tt\d+\/fullcredits\/?\?ref_.*$/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=imdb.com
// @grant        none
// ==/UserScript==
// @require      https://code.jquery.com/jquery-3.4.2.min.js

$(function(){
    'use strict';
    $('img[src*="._V1"]:not(.poster, [title*="list image"]), img.loadlate:not([title*="list image"])').filter(function() { return $($(this).parent('div')[0]).siblings('a[href*="/video/"], a[href*="/videoplayer/"]').length == 0 }).each(function () {
        const elem = $(this);
        let url = elem.attr('loadlate') || elem.attr('src');
        url = url.replace(/\._V1.*\./, '._V1._SX600_SY600_.');
        elem.attr('loadlate', url)
        elem.attr('src', url)
        elem.css({"height":"auto", "width":"auto", "max-width":"26rem"});
    });
});

[LiliaDoe]

Interesting behavior, how it switches back and forth. I'll work on updating it for the circle version

[LiliaDoe]

@liamauve It's not as pretty and I had to use plain js, but this will work:

// ==UserScript==
// @name         Big actor images (Circles)
// @namespace    http://tampermonkey.net/
// @version      2024-12-06
// @description  Expands actors images
// @author       Lilia
// @match        *://www.imdb.com/title/*/fullcredits?ref*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=imdb.com
// ==/UserScript==

(function(){
    'use strict';
    const avatarList = document.getElementsByClassName('ipc-media--avatar');
    for (const avatar of avatarList) {
        let avatarImg = avatar.firstChild;
        let url = avatarImg.src;
        if (typeof url !== 'undefined'){url = url.replace(/\._V1.*\./, '._V1._SX600_SY600_.')};
        avatarImg.src = url;
        avatarImg.srcset = url;

        // Adjust style to fit bigger images
        avatar.style.borderRadius = '0%';
        avatar.parentElement.style.width = '17rem';
        avatar.parentElement.style.height = '22rem';
    }
})();

[liamauve]

^ Thank you so much!! It looks like the bigger pictures are blocking actors name. sorry i'm being difficult.

[LiliaDoe]

@liamauve This should be better. Feel free to adjust the numbers if you want the images bigger or the text spaced out more

// ==UserScript==
// @name         Big actor images (Circles)
// @namespace    http://tampermonkey.net/
// @version      2024-12-06
// @description  Expands actors images
// @author       Lilia
// @match        *://www.imdb.com/title/*/fullcredits?ref*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=imdb.com
// ==/UserScript==

(function() {
    'use strict';
    // Variables to adjust:
      const imageWidth = '20';
      // Units can be %, rem, or px
      const textOffset = '165%';
      const textPadding = '0%';

    // --- The code doing the work ---
    const avatarList = document.getElementsByClassName('ipc-media--avatar');
    for (const avatar of avatarList) {
        let avatarImg = avatar.firstChild;
        let url = avatarImg.src;
        let imgRatio = 1;

        if (typeof url !== 'undefined') {
            url = url.replace(/\._V1.*\./, '._V1._SX600_SY600_.');

            // Get image ratio to adjust css to fit images
            const img = new Image();

            img.src = url;
            const height = img.height;
            const width = img.width;

            imgRatio = height/width;
        }
        avatarImg.src = url;
        avatarImg.srcset = url;

        // Adjust hover highlight
        avatar.nextSibling.firstChild.style.borderRadius = '0%';

        // Adjust style to fit bigger images
        let avatarContainer = avatar.parentElement;
        avatar.style.borderRadius = '0%';
        avatarContainer.style.width = imageWidth + 'rem';
        avatarContainer.style.height = (imageWidth * imgRatio) + 'rem';

        // Adjust text
        avatarContainer.parentElement.parentElement.style.width = textOffset;
        avatarContainer.parentElement.nextSibling.style.padding = textPadding;
    }
})();

[liamauve]

this is so good. i see you fixed hover highlight too. I'm very grateful. Thank you so much. 🙏