您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Adds inline image expansion to 4chan archives.
// ==UserScript== // @name 4chan Archive Image Expander // @description Adds inline image expansion to 4chan archives. // @author Hen-Tie // @homepage http://hen-tie.tumblr.com/ // @namespace https://greasyfork.org/en/users/8336 // @include /https?:\/\/(desuarchive\.org|archived\.moe)\/.*\/thread\/.*/ // @include /https?:\/\/thebarchive\.com\/(b|bant|talk)\/.*/ // @include /https?:\/\/archive\.4plebs\.org\/.*/ // @grant none // @require https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js // @require https://greasyfork.org/scripts/39415-jquery-initialize/code/jQuery%20Initialize.js?version=258071 // @icon https://i.imgur.com/80UFdoW.png // @version 1.9 // ==/UserScript== var jq = jQuery.noConflict(true); (function ($) { //index all images for modal gallery var fullImage = []; var thumbnail = []; var galleryActivated = 0; $("body").append('<modal id="aie"><div id="aie-img-controls">Image Size: <a id="aie-img-native" href="javascript:;">Native</a> | <a id="aie-img-fill" href="javascript:;">Fill</a> | <a id="aie-img-fit" href="javascript:;">Fit</a></div></modal>'); //gallery mode keypress listener $("body").on("keydown", function(e) { //g to open if (e.which == 71) { if (galleryActivated) { $('modal').show(); } else { $('modal').show(); $('a.thread_image_link').each(function() { fullImage.push('<img src="' + $(this).attr('href') + '" />'); thumbnail.push('<img src="' + $(this).children('img').attr('src') + '" />'); }); $.each(fullImage, function(i) { $("modal").append(fullImage[i]); }); galleryActivated = 1; } } //esc to close if (e.which == 27) { $('modal').hide(); } }); //gallery image contorls $('#aie-img-native').click(function() { //$('modal img').each(function() { // $(this).css({'width':'auto','max-width':'unset'}); //}); imgFit(this); }); function imgFit(x) { console.log(x); } $('#aie-img-fill').click(function() { $('modal img').each(function() { $(this).css({'width':'100%','max-width':'unset'}); }); }); $('#aie-img-fit').click(function() { $('modal img').each(function() { $(this).css({'width':'unset','max-width':'100%'}); }); }); //catches image load event $.initialize('.init', function() { $(this).parent().removeClass('spinner'); }); //insert download image links $('.post_file_filename').each(function() { $(this).attr('download',true); }); $('<style type="text/css">.spinner:before{content:"";box-sizing:border-box;position:absolute;top:50%;left:50%;width:20px;height:20px;margin-top:-10px;margin-left:-10px;border-radius:50%;border-top:2px solid #CCC;border-right:2px solid transparent;animation:spinner 0.6s linear infinite}@keyframes spinner{to{transform:rotate(360deg)}}</style>').appendTo('head'); $('<style type="text/css">#aie-img-controls{width:100%;background:#282a2e;padding:0 1em;line-height:2;position:fixed;}modal img{display:block;margin-top:2em;}modal{display:none;position:fixed;top:0;left:0;overflow:auto;width:100%;height:100%;background:#1d1f21;}</style>').appendTo("head"); //video settings var vidAttr = 'loop autoplay controls'; var imgCSS = { 'max-width': '100%', 'height': 'auto' }; var webmCSS = { 'max-width': '100%', 'height': 'auto' }; //indicate webm thumbnail $('.post_file_filename[href$=".webm"]').parent().next().find('.post_image').css('border', '3px solid #5f89ac'); //prevent weird wrapping around expanded images $('.theme_default .post header').css('display', 'inline-block'); $('.thread_image_box a').on('click', function (e) { var myHref = $(this).attr('href'); var myHeight = $(this).children('img').outerHeight(); var myWidth = $(this).children('img').outerWidth(); $(this).parent().addClass('spinner').css({ 'min-height': myHeight, 'min-width': myWidth, 'position': 'relative' }); //new elements containing full size href as src var img = $('<img />').attr({ 'src': myHref, 'class': 'openItem' }).css(imgCSS).load(function(){ $(this).addClass('init'); }); var webm = $('<video style="background-color: #222;" poster="data:image/gif,AAAA" ' + vidAttr + ' id="vid"><source type="video/webm" src="' + myHref + '"/></video>').attr('class', 'openItem').css(webmCSS); //check filetype, hide thumbnail, insert full size file if (myHref.match(/.gif$|.png$|.jpg$/g)) { e.preventDefault(); $(this).fadeTo('fast', 0, function () { $(this).hide(); $(this).after(img); }); } else if (myHref.match(/.webm$/g)) { e.preventDefault(); $(this).hide(); $(this).after(webm); var vid = document.getElementById("vid"); //video proven to be loadable, cancel spinner vid.ondurationchange = function() { $(this).parent().removeClass('spinner'); }; } else { console.log('"4chan Archive Image Expander"\nUnsupported filetype, please report.\nSee @homepage or @namespace for contact info.'); } //if src is broken insert placeholder, stop infinite spinner setTimeout(function(){ var checkBroken = $('.openItem'); if (checkBroken.width() === 16 && checkBroken.height() === 16) { checkBroken.addClass('init').attr('src','http://via.placeholder.com/'+myWidth + 'x' + myHeight+'/1d1f21/888888?text=ERR.'); console.log('broken image'); } else if (checkBroken.is('video')) { //if readyState has no metadata if (vid.readyState === 0) { checkBroken.addClass('init'); console.log('broken video'); } } else { return false; } }, 3000); }); //on reclick, remove full size, show thumbnail again $(document).on('click', '.openItem', function () { //video not loaded or timed out, remove spinner on close if ($(this).is('video')) { $(this).parent('.spinner').removeClass('spinner'); } $(this).prev().show().fadeTo(0, 1); $(this).remove(); }); }(jq));