YouTube Animated Thumbnails

By JoeSimmons Last update Sep 5, 2009 — Installed 3,845 times. Daily Installs: 4, 5, 8, 8, 4, 10, 8, 6, 12, 11, 9, 9, 8, 5, 14, 8, 13, 14, 8, 12, 13, 11, 15, 10, 27, 10, 12, 10, 8, 12, 10, 12

There are 35 previous versions of this script.

scr_meta=<><![CDATA[
// ==UserScript==
// @name           YouTube Animated Thumbnails
// @namespace      http://userscripts.org/users/23652
// @description    Makes thumbnails cycle though the 3 previews. Additional feature to view all thumbnails on mouse hover, and move off to hide them.
// @include        http://*.youtube.com/*
// @include        http://youtube.com/*
// @exclude        http://*youtube.com/my_videos_edit*
// @exclude        http://*youtube.com/my_subscribers*
// @copyright      JoeSimmons
// @version        1.0.8
// @license        Creative Commons Attribution-Noncommercial 3.0 United States License
// ==/UserScript==
]]></>.toString();


// OPTIONS SECTION
var execution_delay = 0.25; // (seconds) // When to run the script after page load
var switch_interval = .75; // (seconds) Interval at when to switch the image to the next
var enable_hover_images = true; // Hover over video thumbnails to see the rest of the thumbnails
var enable_animated_thumbnails = true; // true=animated thumbnails, false=none
var show_delay = .45; // (seconds) How long to wait before show the thumbnail on hover
var hide_on_mouseout = false; // Hide the popup preview when mouse moves off the thumbnail 



//NO EDITING BELOW HERE-///////////////////////////////////

var show_d, hide_d, next_img_intv,
	vi=/vi\/([^\/]+)\/.*\.jpg/,
	ytimg_url=/http:\/\/(.+\.)?ytimg\.com\/vi\//;

	// Make the 3 image preview not exceed the width of the browser
	var css = '.hover_img {position:fixed; top:0; right:0; z-index:9999; text-align:right;} .hover_img img { max-width:'+Math.floor(window.innerWidth/3-6)+'px;}';
	if(typeof GM_addStyle=='function') GM_addStyle(css);
	else {
    var style = document.createElement('style').setAttribute('type', 'text/css');
    document.getElementsByTagName('head')[0].appendChild(style).innerHTML=css;
	}

// Created by avg, modified by JoeSimmons
function create(a,b,c) {
	var ret=document.createElement(a.toLowerCase());
	if(!b) return ret;
	for(var prop in b) if(prop.indexOf("on")==0) ret.addEventListener(prop.substring(2),b[prop],false);
		else if(",style,accesskey,id,name,src,href".indexOf(","+prop.toLowerCase())!=-1) ret.setAttribute(prop.toLowerCase(), b[prop]);
		else ret[prop]=b[prop];
	if(c) for each(var child in c) ret.appendChild(child);
	return ret;
}

function nextimg() {
var imgs = document.evaluate("//img[@animate='true']",document,null,6,null), ddef=/(\d|default)\.jpg/;
for(var i=0,img; (img=imgs.snapshotItem(i)); i++) {
	switch(img.src.match(ddef)[0]) {
		case 'default.jpg':img.src=img.src.replace('default.jpg', '1.jpg');break;
		case '1.jpg':img.src=img.src.replace('1.jpg', '2.jpg');break;
		case '2.jpg':img.src=img.src.replace('2.jpg', '3.jpg');break;
		case '3.jpg':img.src=img.src.replace('3.jpg', 'default.jpg');break;
		}
	}
}

// Get ID
function $(ID) {return document.getElementById(ID);}

function getID(str) {
var id=str.match(vi);
return (id && id.length>1)?id[1]:null;
}

function show(e) {
clearTimeout(hide_d); hideall();
show_d = setTimeout(function(d){
if($("movie_player")) $("movie_player").style.visibility="hidden";
if(d) d.style.display = '';
}, show_delay*1000, $('hover_'+getID(e.src)));
}

function hide(e) {
clearTimeout(show_d);
if(hide_on_mouseout) {
hide_d = setTimeout(function(d) {
if($("movie_player")) $("movie_player").style.visibility="visible";
if(d) d.style.display='none';
}, show_delay*1000, $('hover_'+getID(e.src)));
}
}

function hideall() {
if($("movie_player")) $("movie_player").style.visibility="visible";
var divs = document.evaluate("//div[starts-with(@id, 'hover_') and @class='hover_img' and not(contains(@style,'none'))]",document,null,6,null);
for(var i=0,div; (div=divs.snapshotItem(i)); i++) div.style.display = 'none';
}

function hoverset() {
var imgs = document.evaluate("//img[starts-with(@class, 'vimg') and contains(@src, 'ytimg.com/vi')]",document,null,6,null);
for(var i=0,img; (img=imgs.snapshotItem(i)); i++) {
var ID = getID(img.src);
if(ID && img.getAttribute("atchd")!=="true") {
img.addEventListener('mouseover', function(e){show(e.currentTarget);}, false);
img.addEventListener('mouseout', function(e){hide(e.currentTarget);}, false);
img.setAttribute("atchd", "true");
}
if(ID && !$('hover_'+ID)) {
var url = (img.src.match(ytimg_url)||'')[0];
document.body.appendChild(create('div', {className:'hover_img',style:'display:none;',id:'hover_'+ID,innerHTML:"<img src=\""+url+ID+"/hq1.jpg\"><img src=\""+url+ID+"/hq2.jpg\"><img src=\""+url+ID+"/hq3.jpg\">"}));
}
}
}

if(enable_hover_images) setTimeout(function(){hoverset();setInterval(hoverset, 1450);}, execution_delay*1000);
if(enable_animated_thumbnails) setTimeout(function(){
var array=document.evaluate("//img[contains(@class, 'vimg') and contains(@src, 'ytimg.com/vi')]",document,null,6,null);
for(var i=0,item; (item=array.snapshotItem(i)); i++) item.setAttribute('animate', 'true');
next_img_intv=setInterval(nextimg, switch_interval*1000);
}, execution_delay*1000);

window.addEventListener('click', hideall, false);

// Auto-Update by sizzlemctwizzle
aaus_38017={
i:'40324', // Script id on Userscripts.org
d:2, // Days to wait between update checks
n:/\/\/\s*@name\s+(.*)\s*\n/i.exec(scr_meta)[1],v:/\/\/\s*@version\s+(.*)\s*\n/i.exec(scr_meta)[1].replace(/\./g, ''),t:new Date().getTime()|0,ca:function(r){GM_xmlhttpRequest({method:'GET',url:'https://userscripts.org/scripts/source/'+this.i+'.meta.js',onload:function(x){aaus_38017.co(x,r)}})},co:function(x,r){this.xv=/\/\/\s*@version\s+(.*)\s*\n/i.exec(x.responseText);this.xn=/\/\/\s*@name\s+(.*)\s*\n/i.exec(x.responseText);if(this.xv&&this.xn[1]==this.n){this.xv=this.xv[1].replace(/\./g, '');this.xn=this.xn[1];}else{if(x.responseText.match('Uh-oh! The page could not be found!')||this.xn[1]!=this.n)GM_setValue('updated', 'off');return false;}if(this.xv>this.v&&confirm('A new version of the '+this.xn+' user script is available. Do you want to update?')){GM_setValue('updated',this.t);GM_openInTab('http://userscripts.org/scripts/source/'+this.i+'.user.js')}else if(this.xv&&this.xv>this.v){if(confirm('Do you want to turn off auto updating for this script?')){GM_setValue('updated','off');GM_registerMenuCommand("Auto Update "+this.n,function(){GM_setValue('updated',new Date().getTime()|0);aaus_38017.ca('return')});alert('Automatic updates can be re-enabled for this script from the User Script Commands submenu.')}else{GM_setValue('updated',this.t)}}else{if(r)alert('No updates available for '+this.n);GM_setValue('updated',this.t)}},ch:function(){if(GM_getValue('updated',0)==0)GM_setValue('updated',this.t);if(GM_getValue('updated',0)!='off'&&+this.t>+GM_getValue('updated',0)+86400000*this.d){this.ca()}else if(GM_getValue('updated',0)=='off'){GM_registerMenuCommand("Enable "+this.n+" updates",function(){GM_setValue('updated',new Date().getTime()|0);aaus_38017.ca(true)})}else{GM_registerMenuCommand("Check "+this.n+" for updates",function(){GM_setValue('updated',new Date().getTime()|0);aaus_38017.ca(true)})}}};if(self.location==top.location&&GM_xmlhttpRequest)aaus_38017.ch();