User:Jrajav/myskin.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/*jslint regexp: true, browser: true */
/*global $: false */

var iWantThumbnailPreviews = true,
    andAnimateThem = true, // CSS transition; Doesn't perform well in most browsers
    andPreloadThem = true,
    andSkipFiletypes = ['.svg', '.svg.png'];

$(function () {
    'use strict';

    $('#searchInput').attr('tabindex', 1);

    $('pre[class*="source-"]').addClass('jrajav-code');

    if (iWantThumbnailPreviews) {
        var setupPreviews = function (anchor, position) {
            var originalImage = anchor.find('img.thumbimage'),
                originalImageUrl = originalImage.attr('src').replace('/thumb/', '/').replace(/\/\d*px.*$/, ''),
                overlayImage = $('<img/>'),
                loadOverlay = function () { overlayImage.attr('src', originalImageUrl); },
                skip = false;

            $.each(andSkipFiletypes, function (i, filetype) {
                if (filetype === originalImageUrl.slice(originalImageUrl.length - filetype.length)) {
                    skip = true;
                    return false; // Break loop
                }
            });

            if (skip) {
                return;
            }

            overlayImage
                .css('position', 'absolute')
                .css('max-width', originalImage.width() + 'px')
                .css(position, '0')
                .hide()
                .load(function () {
                    overlayImage
                        .show()
                        .addClass('jrajav-image-overlay-' + position);
                });

            if (andAnimateThem) {
                overlayImage.addClass('jrajav-image-overlay-animate');
            }

            anchor.prepend(overlayImage);

            if (andPreloadThem) {
                loadOverlay();
            } else {
                originalImage.one('mouseenter', loadOverlay);
            }
        };

        $('div.tleft a.image').each(function () { setupPreviews($(this), 'left'); });
        $('div.tright a.image').each(function () { setupPreviews($(this), 'right'); });
    }
});