Start a slideshow on any Pinterest page where there's pins. Clean and minimalist design. 5s interval between slides. Press ctrl+spacebar to start, left/right keys to navigate.
目前為
// ==UserScript==
// @name Pinterest Slideshow
// @namespace http://tampermonkey.net/
// @version 1.4.1
// @description Start a slideshow on any Pinterest page where there's pins. Clean and minimalist design. 5s interval between slides. Press ctrl+spacebar to start, left/right keys to navigate.
// @author French Bond
// @match https://www.pinterest.com/*
// @match https://www.pinterest.ca/*
// @grant none
// @require http://code.jquery.com/jquery-latest.js
// ==/UserScript==
/* globals jQuery, $ */
$(function () {
'use strict';
var pinList = [];
var c = 0;
var slideInterval = 5000;
var interval;
var running = 0;
function init() {
addSlideShowButton();
addSlideShowImageAndControls();
}
function addSlideShowButton() {
$('body').append(
'<div style="position: fixed; bottom: 20px; left: 10px;">' +
'<div>' +
'<span class="slideshow-button" style="cursor:pointer; background-color: #C92228; color: #fff; padding: 8px; font-weight: bold; font-size: 14px; border-radius: 4px;">Slideshow</span>' +
'</div>' +
'</div>'
);
$('.slideshow-button').click(startSlideshow);
}
function addSlideShowImageAndControls() {
// Add slideshow div
$('html').append(
'<div class="slideshow" style="display:none; position: fixed; width: 100%; height: 100%; background-color: #333; z-index: 10000000; left: 0; top: 0;">' +
'<img style="object-fit: contain; width: 100%; height: 100%;">' +
'</div>'
);
// Add the slideshow menu
$('.slideshow').append(
'<div class="menu-slideshow" style="position: absolute; left:3px; top:3px; font-size:14px;"></div>'
);
$('.menu-slideshow')
.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>'
)
//.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>')
.append('<div class="info-slideshow" style="color: #ccc; padding: 7px; float:left;">/</div>');
// Handle Stop Button
$('.stop-slideshow').click(function () {
clearInterval(interval);
running = 0;
$('.slideshow').hide();
console.log('Slideshow stopped');
});
}
function getImageUrls() {
pinList = [];
$('img[srcset]').each(function (i) {
var src = $(this)
.attr('srcset')
.match(/([^ ]*) 4x$/)[1];
pinList[pinList.length] = src;
});
return pinList;
}
function startSlideshow() {
$('.slideshow').show();
pinList = getImageUrls();
console.log(pinList);
console.log('Starting slideshow');
console.log('Number of slides: ' + pinList.length);
console.log('Slide interval: ' + slideInterval / 1000 + 's');
// Start from first slide
c = 0;
clearInterval(interval);
running = 1;
showSlide();
interval = setInterval(nextSlide, slideInterval);
}
function preloadPictures(pictureUrls, callback) {
var i,
j,
loaded = 0;
for (i = 0, j = pictureUrls.length; i < j; i++) {
(function (img, src) {
img.onload = function () {
if (++loaded == pictureUrls.length && callback) {
callback();
}
};
img.onerror = function () {};
img.onabort = function () {};
img.src = src;
})(new Image(), pictureUrls[i]);
}
}
function showSlide() {
console.log('Current slide: ' + (c + 1));
preloadPictures([pinList[c]], () => {
$('.slideshow img').attr('src', pinList[c]);
$('.info-slideshow').html(c + 1 + '/' + pinList.length);
});
}
function nextSlide() {
c++;
if (c > pinList.length - 1) c = 0;
showSlide();
}
function previousSlide() {
c--;
if (c < 0) c = pinList.length - 1;
showSlide();
}
$('body').keydown(function (e) {
if (running) {
if (e.keyCode == 37) {
// left
clearInterval(interval);
previousSlide();
interval = setInterval(nextSlide, slideInterval);
}
if (e.keyCode == 39) {
// right
clearInterval(interval);
nextSlide();
interval = setInterval(nextSlide, slideInterval);
}
} else {
if (e.ctrlKey && e.keyCode == 32) startSlideshow();
}
});
init();
});