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 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Slideshow Pinterest
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.1
  5. // @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.
  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 imgList = [];
  16. var c = 0;
  17. var slideInterval = 5000;
  18. var interval;
  19.  
  20. $('.leftHeaderContent').append('<span class="slideshow" style="cursor:pointer; background-color: #C92228; color: #fff; padding: 5px;">Slideshow</span>');
  21.  
  22. $('.slideshow').click(function() {
  23. imgList = [];
  24. $('.pinImg').each(function(i) {
  25. var src = $(this).attr('src');
  26. //src = src.replace(/^https:\/\/([^/]+)\/([^/]+)\/(.*)/, 'https://$1/originals/$3');
  27. src = src.replace(/^https:\/\/([^/]+)\/([^/]+)\/(.*)/, 'https://$1/564x/$3');
  28. imgList[imgList.length] = src;
  29. });
  30. startSlideshow();
  31. });
  32.  
  33. function startSlideshow() {
  34. $('html').append('<div class="stop-slideshow" style="cursor:pointer; background-color: #C92228; color: #fff; padding: 5px; position: absolute; left:0; top:0;">Stop</div>');
  35. $('.stop-slideshow').click(function() {
  36. clearInterval(interval);
  37. $('.App').css('display', 'block');
  38. $('body').css('background-color', '#fff');
  39. $('body').css('background-image', 'none');
  40. });
  41.  
  42. $('.App').css('display', 'none');
  43. $('body').css('background-repeat', 'no-repeat');
  44. $('body').css('background-size', 'contain');
  45. $('body').css('background-position', 'center');
  46. $('body').css('background-color', '#333');
  47.  
  48. console.log('Starting slideshow');
  49. console.log('Number of slides: ' + imgList.length);
  50. console.log('Slide interval: ' + (slideInterval/1000) + 's');
  51.  
  52. c = 0;
  53. showSlide();
  54. interval = setInterval(nextSlide, slideInterval);
  55. }
  56.  
  57. function showSlide() {
  58. console.log('Current slide: ' + (c+1));
  59. $('body').css('background-image', 'url('+imgList[c]+')');
  60. }
  61.  
  62. function nextSlide() {
  63. c++;
  64. if (c > imgList.length-1) c = 0;
  65. showSlide();
  66. }
  67.  
  68. function previousSlide() {
  69. c--;
  70. if (c < 0) c = imgList.length-1;
  71. showSlide();
  72. }
  73.  
  74. $("body").keydown(function(e) {
  75. if(e.keyCode == 37) { // left
  76. clearInterval(interval);
  77. previousSlide();
  78. interval = setInterval(nextSlide, slideInterval);
  79. }
  80. else if(e.keyCode == 39) { // right
  81. clearInterval(interval);
  82. nextSlide();
  83. interval = setInterval(nextSlide, slideInterval);
  84. }
  85. });
  86.  
  87. })();