☰

Slideshow Pinterest

Start a slide show on any Pinterest page where there's pins. Clean and minimalist design. 5s interval between slides. Use left/right keyboard to navigate.

当前为 2016-10-18 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Slideshow Pinterest
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Start a slide show on any Pinterest page where there's pins. Clean and minimalist design. 5s interval between slides. Use left/right keyboard to navigate.
// @author       French Bond
// @match        https://www.pinterest.com/*
// @grant        none
// @require http://code.jquery.com/jquery-latest.js
// ==/UserScript==

(function() {
    'use strict';

    var imgList = [];
    var c = 0;
    var slideInterval = 5000;
    var interval;

    $('.leftHeaderContent').append('<span class="slideshow" style="cursor:pointer; background-color: #C92228; color: #fff; padding: 5px;">Slideshow</span>');

    $('.slideshow').click(function() {
        imgList = [];
        $('.pinImg').each(function(i) {
            var src = $(this).attr('src');
            //src = src.replace(/^https:\/\/([^/]+)\/([^/]+)\/(.*)/, 'https://$1/originals/$3');
            src = src.replace(/^https:\/\/([^/]+)\/([^/]+)\/(.*)/, 'https://$1/564x/$3');
            imgList[imgList.length] = src;
        });
        startSlideshow();
    });

    function startSlideshow() {
        $('html').append('<div class="stop-slideshow" style="cursor:pointer; background-color: #C92228; color: #fff; padding: 5px; position: absolute; left:0; top:0;">Stop</div>');
        $('.stop-slideshow').click(function() {
            clearInterval(interval);
            $('.App').css('display', 'block');
            $('body').css('background-color', '#fff');
            $('body').css('background-image', 'none');
        });

        $('.App').css('display', 'none');
        $('body').css('background-repeat', 'no-repeat');
        $('body').css('background-size', 'contain');
        $('body').css('background-position', 'center');
        $('body').css('background-color', '#333');

        console.log('Starting slideshow');
        console.log('Number of slides: ' + imgList.length);
        console.log('Slide interval: ' + (slideInterval/1000) + 's');

        c = 0;
        showSlide();
        interval = setInterval(nextSlide, slideInterval);
    }

    function showSlide() {
        console.log('Current slide: ' + (c+1));
        $('body').css('background-image', 'url('+imgList[c]+')');
    }

    function nextSlide() {
        c++;
        if (c > imgList.length-1) c = 0;
        showSlide();
    }

    function previousSlide() {
        c--;
        if (c < 0) c = imgList.length-1;
        showSlide();
    }

    $("body").keydown(function(e) {
        if(e.keyCode == 37) { // left
            clearInterval(interval);
            previousSlide();
            interval = setInterval(nextSlide, slideInterval);
        }
        else if(e.keyCode == 39) { // right
            clearInterval(interval);
            nextSlide();
            interval = setInterval(nextSlide, slideInterval);
        }
    });

})();