您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Allows you to view feed pictures in a lightbox and includes keyboard shortcuts (left/right arrow, l for like, escape to close)
/** */ // ==UserScript== // @name FetLife Feed Picture Lightbox Viewer // @version 1.0 // @namespace https://fetlife.com // @description Allows you to view feed pictures in a lightbox and includes keyboard shortcuts (left/right arrow, l for like, escape to close) // @include https://fetlife.com/home // @grant GM_log // @grant GM_xmlhttpRequest // @grant GM_addStyle // ==/UserScript== GM_addStyle('\ #gm_lightbox { position: fixed; display: none; width: 100%; height: ' + window.innerHeight + 'px; top: 0; left: 0; background-color: rgba(206, 206, 206, 0.51); }\ #gm_lightbox .gm_container { height: 85%; margin: 30px; padding: 20px; box-sizing: border-box; background-color: #0e0e0e; border-radius: 10px; }\ #gm_lightbox .gm_container .clear { clear:both; }\ #gm_lightbox .gm_container .top { }\ #gm_lightbox .gm_container .top .gallery .gm_current img { background-color: #949494; }\ #gm_lightbox .gm_container hr { margin: 10px 0; }\ #gm_lightbox .gm_container .left { float: left; width: 33%; }\ #gm_lightbox .gm_container .left .caption { margin-top: 20px; clear: both; padding: 10px; background-color: #2b2b2b; }\ #gm_lightbox .gm_container .right { height: 80%; margin-left: 35%; }\ \ #gm_lightbox .gm_container .love { position: relative; display: inline-block; border: 1px solid #888; padding: 7px 12px; background-color: #111; color: #111; font-weight: bold;\ text-decoration: none; text-align: center; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 1px 0 rgba(255,255,255,0.3);\ cursor: pointer; background-image: -webkit-linear-gradient(top, #272727, #030303); color: #DDD; border-color: #171717; }\ #gm_lightbox .gm_container .love .picto { font-family: "Pictos"; line-height: 0; }\ #gm_lightbox .gm_container .love .picto.red { color: #A00; }\ '); (function() { 'use strict'; $('body #maincontent').append('<div id="gm_lightbox"><div class="gm_container">\ <div class="top"><div class="gallery"></div></div>\ <div class="clear"></div><hr>\ <div class="left"><a class="love btnsqr dark"><span class="picto pu2">k</span> Love</a><div class="caption"></div></div>\ <div class="right"><div class="img"></div></div>\ </div></div>'); var $currentImg = {}; var $lightbox = $('#gm_lightbox'); var $gallery = $('#gm_lightbox .top .gallery'); var $caption = $('#gm_lightbox .left .caption'); var $love = $('#gm_lightbox a.love .picto'); // hide lightbox when clicking outside $(document).click(function(event) { if($(event.target).attr('id') == 'gm_lightbox') { hideLightbox(); } }); $('#stories').on('click', '.story a[href*=pictures]', function(e) { e.preventDefault(); $(this).addClass('gm_current'); $lightbox.find('.gallery').html($(this).parent().html()); loadImage($(this).attr('href')); }); $lightbox.on('click', 'a.love', function(e) { e.preventDefault(); loveImage(); }); $gallery.on('click', 'a[href*=pictures]', function(e) { e.preventDefault(); if ($(this).hasClass('gm_current')) { return; } $gallery.find('a.gm_current').removeClass('gm_current'); $(this).addClass('gm_current'); loadImage($(this).attr('href')); }); $(document).keyup(function(e) { if (e.keyCode == 27) { // escape key hideLightbox(); } else if (e.keyCode == 37) { // left key setGalleryImage($gallery.find('.gm_current'), $gallery.find('.gm_current').prev()); } else if (e.keyCode == 39) { // right key setGalleryImage($gallery.find('.gm_current'), $gallery.find('.gm_current').next()); } else if (e.keyCode == 76) { // l key loveImage(); } }); function loadImage(link) { GM_xmlhttpRequest({ 'method': 'GET', headers: { "Accept": "application/json" }, 'url': 'https://fetlife.com' + link, 'onload': function (response) { $currentImg = JSON.parse(response.responseText); $lightbox.find('.img').html('<img src="' + $currentImg.image_url + '"/>'); showLightbox(); // set caption $caption.html(($currentImg.caption == '') ? '<em>No caption</em>' : $currentImg.caption); // set love button if ($currentImg.current_user_loves_this && !$love.hasClass('red')) { $love.addClass('red'); } else if (!$currentImg.current_user_loves_this && $love.hasClass('red')) { $love.removeClass('red'); } } }); } function setGalleryImage(currentImg, newImg) { if (newImg.length == 0) { return; } currentImg.removeClass('gm_current'); newImg.addClass('gm_current'); loadImage(newImg.attr('href')); } function loveImage() { GM_xmlhttpRequest({ 'method': 'POST', headers: { "Accept": "application/json", "x-csrf-token": $('meta[name="csrf-token"]').attr('content'), "x-requested-with": "XMLHttpRequest" }, 'url': $currentImg.toggle_love_status_url, 'onload': function (response) { if (response.status == 200) { $love.toggleClass('red'); } else { alert('An error occured with the request'); } } }); } function hideLightbox() { $lightbox.hide(); $('nav.fl-nav').show(); } function showLightbox() { $lightbox.show(); $('nav.fl-nav').hide(); var height = $lightbox.find('.right').height(); $lightbox.find('.right img').css('max-height', height+'px'); } function toggleLightbox() { if ($lightbox.css('display') == 'block') { hideLightbox(); } else { showLightbox(); } } })();