☰

Pinterest Slideshow

Start a slideshow on any Pinterest page where there's pins. Clean and minimalist design. 5s interval between slides. Use spacebar to start, left/right keys to navigate.

当前为 2017-06-19 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Pinterest Slideshow
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Start a slideshow on any Pinterest page where there's pins. Clean and minimalist design. 5s interval between slides. Use spacebar to start, left/right keys to navigate.
  6. // @author       French Bond
  7. // @match        https://www.pinterest.com/*
  8. // @grant        none
  9. // @require      http://code.jquery.com/jquery-latest.js
  10. // ==/UserScript==
  11.  
  12. $(function() {
  13.     'use strict';
  14.  
  15.     var pinList = [];
  16.     var c = 0;
  17.     var slideInterval = 5000;
  18.     var interval;
  19.     var running = 0;
  20.  
  21.     // Add the slideshow button in the header
  22.     var slideshowButton = '<div><span class="slideshow" style="cursor:pointer; background-color: #C92228; color: #fff; padding: 8px; font-weight: bold; font-size: 14px; border-radius: 4px;">Slideshow</span></div>';
  23.     $('body').append('<div style="position: fixed; bottom: 20px; left: 10px;">' + slideshowButton + '</div>');
  24.     $('.slideshow').click(startSlideshow);
  25.  
  26.     function startSlideshow() {
  27.         // Hide slideshow button
  28.         $('.slideshow').hide();
  29.         
  30.         // List the pins
  31.         pinList = [];
  32.         $('.pinImageWrapper img').each(function(i) {
  33.             var src = $(this).attr('src');
  34.             //src = src.replace(/^https:\/\/([^/]+)\/([^/]+)\/(.*)/, 'https://$1/originals/$3');
  35.             src = src.replace(/^https:\/\/([^/]+)\/([^/]+)\/(.*)/, 'https://$1/564x/$3');
  36.             pinList[pinList.length] = src;
  37.         });
  38.  
  39.         // Add the slideshow menu
  40.         $('html').append('<div class="menu-slideshow" style="position: absolute; left:3px; top:3px; font-size:14px;"></div>');
  41.         $('.menu-slideshow')
  42.             .append('<div class="stop-slideshow" style="cursor:pointer; background-color: #C92228; color: #fff; padding: 7px; float:left; font-weight: bold; border-radius: 4px;">Stop</div>')
  43.             //.append('<div class="options-slideshow" style="cursor:pointer; background-color: #666; color: #fff; padding: 7px; float:left; border-radius: 4px; margin-left:3px;">Options</div>')
  44.             .append('<div class="info-slideshow" style="color: #ccc; padding: 7px; float:left;">/</div>');
  45.         $('.stop-slideshow').click(function() {
  46.             $('.menu-slideshow').remove();
  47.             clearInterval(interval);
  48.             running = 0;
  49.             $('.App').css('display', 'block');
  50.             $('body').css('background-color', '#fff');
  51.             $('body').css('background-image', 'none');
  52.             // Show slideshow button
  53.             $('.slideshow').show();
  54.             console.log('Slideshow stopped');
  55.         });
  56.  
  57.         // Prepare the slideshow canvas
  58.         $('.App').css('display', 'none');
  59.         $('body').css('background-repeat', 'no-repeat');
  60.         $('body').css('background-size', 'contain');
  61.         $('body').css('background-position', 'center');
  62.         $('body').css('background-color', '#333');
  63.  
  64.         console.log('Starting slideshow');
  65.         console.log('Number of slides: ' + pinList.length);
  66.         console.log('Slide interval: ' + (slideInterval/1000) + 's');
  67.  
  68.         // Start from first slide
  69.         c = 0;
  70.         clearInterval(interval);
  71.         running = 1;
  72.         showSlide();
  73.         interval = setInterval(nextSlide, slideInterval);
  74.     }
  75.  
  76.     function showSlide() {
  77.         console.log('Current slide: ' + (c+1));
  78.         $('body').css('background-image', 'url('+pinList[c]+')');
  79.         $('.info-slideshow').html((c+1)+'/'+pinList.length);
  80.     }
  81.  
  82.     function nextSlide() {
  83.         c++;
  84.         if (c > pinList.length-1) c = 0;
  85.         showSlide();
  86.     }
  87.  
  88.     function previousSlide() {
  89.         c--;
  90.         if (c < 0) c = pinList.length-1;
  91.         showSlide();
  92.     }
  93.  
  94.     $("body").keydown(function(e) {
  95.         if (running) {
  96.             if (e.keyCode == 37) { // left
  97.                 clearInterval(interval);
  98.                 previousSlide();
  99.                 interval = setInterval(nextSlide, slideInterval);
  100.             }
  101.             if (e.keyCode == 39) { // right
  102.                 clearInterval(interval);
  103.                 nextSlide();
  104.                 interval = setInterval(nextSlide, slideInterval);
  105.             }
  106.         } else {
  107.             if (e.keyCode == 32) startSlideshow();
  108.         }
  109.     });
  110.  
  111. });