User:Micro01/vector.js

/* THIS NOTICE MUST REMAIN INTACT.

Copyright 2011 Quincy Lam aka Micro01 aka reikaze E-mail: lklq@live.com

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by   the Free Software Foundation, either version 3 of the License, or    (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see .



var $ = jQuery;

//this holds the current jquery object that points to the currently shown thumbnail var currentImage = null; // a jquery collection of every image in the article var allThumbnails = null;

// if this is true, a delay will change the picture periodically var inSlideshow = false;

// if this is true, the info bar is shown var infoPaneShown = false;

function thumbnailToFull(thumbnailURI) { // Breakup of thumbnail URIs: //	// AAAAAAAAAAAAAAAAAAAA/thumb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAA/image.jpg/123px-image.jpg //	// where 123px is the thumbnail height. Removing /thumb/ and the /123px... gives us a URI to the fullsize image.

//get the full size image's URI var fullImageURI = thumbnailURI.substr( 0, thumbnailURI.search(/thumb\//i) ) + thumbnailURI.substr( thumbnailURI.search(/thumb\//i) + 'thumb/'.length, thumbnailURI.search(/\/\d+px/i) - thumbnailURI.search(/thumb\//i) - 'thumb/'.length );

return fullImageURI; }

// given the jquery object thumbnail pointing to a, set the current image to be shown function setBigImage(thumbnail) { //fade out the old picture's thumbstrip thumb and fade in the new picture's	$('#thumbStrip img').eq( allThumbnails.index(currentImage) ).fadeTo('fast',0.61); $('#thumbStrip img').eq( allThumbnails.index(thumbnail) ).fadeTo('fast',0.98);

// do nothing if the picture doesn't need changing if (allThumbnails.index(thumbnail) != allThumbnails.index(currentImage)) { currentImage = thumbnail;

// change #previousImage to hold the old image, so it looks like a direct fade... var oldThumbnailURI = $('#bigImage').attr('src'); $('#previousImage').attr('src', oldThumbnailURI); $('#previousImage').fadeTo(0,1.0);

var thumbnailURI = thumbnail.attr('src'); //put the full size version of the newimage into the centre and hide it		$('#bigImage').fadeTo(0,0); $('#bigImage').attr('src',thumbnailToFull(thumbnailURI));

$('#previousImage').fadeOut(400); $('#bigImage').fadeIn(400); }	// extract just the filename (e.g. Queens_House.jpg) by cutting it from the colon var pictureFilename = currentImage.parents('a').attr('href').substr( currentImage.parents('a').attr('href').search(/:/i) + 1 ); // insert the image info into #infoPane // use of the commons API // i.e. http://toolserver.org/~magnus/commonsapi.php?image=Queens_House.jpg

//$('#infoPane').load('http://toolserver.org/~magnus/commonsapi.php?image=' + pictureFilename + ' license name'); }

$(document).ready( function {	"use strict";

//add my stylesheet manually, just in case //mw.loader.load("//en.wikipedia.org/wiki/User:Micro01/vector.css");

// get a list of every thumbnail in the article // the second search condition is for some div's that hold multiple images allThumbnails = $('#bodyContent img.thumbimage, #bodyContent div.thumbimage img');

// load all the full size images in a hidden div to reduce loading time $('body').append(' '); allThumbnails.each(function {			var copy = $(this).clone;		copy.attr('src',thumbnailToFull(copy.attr('src')));		$('#preload').append(copy);	});

//create a variable of the new element for easy access var darkness = $(' '); $('body').append(darkness);

darkness.append('Close');

// this is the slideshow enabler // when pressed, slideshows will be enabled (high opacity). when pressed again, they will be disabled (low opacity). darkness.append(' '); $('#startSlideshow').append(''); $('#startSlideshow').append(' '); $('#timeoutForm').append('Timeout (ms) '); $('#startSlideshow img').click(function {		inSlideshow = !inSlideshow;		if (inSlideshow) {			$('#startSlideshow').fadeTo('fast',0.98);			$('#timeoutForm').show('fast');			$('#startSlideshow').find('input').focus;		}		else {			$('#startSlideshow').fadeTo('fast',0.61);			$('#timeoutForm').hide('fast');			$('#startSlideshow').find('input').blur;		}	}); $('#startSlideshow').fadeTo(0, 0.61); $('#timeoutForm').hide(0);

//an info slider darkness.append(' '); $('#infoSlider').append(''); $('#infoSlider').append(' '); $('#infoPane').slideUp('fast'); $('#infoSlider img').click(function {		if (!infoPaneShown) {			$('#infoPane').slideDown('fast');			$('#infoSlider').fadeTo('fast',0.98);			infoPaneShown = true;		}		else {			$('#infoPane').slideUp('fast');			$('#infoSlider').fadeTo('fast',0.61);			infoPaneShown = false;		}	}); $('#infoSlider').fadeTo(0,0.61);

darkness.append(' '); $('#imageContainer').append(''); $('#imageContainer').append('');

/*	//$('#imageContainer').append('  '); //$('#imageContainer').append('  '); $('#imageContainer').append(' '); $('#imageContainer').append(' '); darkness.append(' '); /*	//$('#listContainer').append('  '); //$('#listContainer').append('  '); $('#listContainer').append(' '); $('#listContainer').append(' ');

$('#listContainer').append('');

//draw the switch-image up and down buttons. the arrows are x21bf and x21c3 respectively $('.upScrollContainer').each(function { 		$(this).text('↿'); 	}); $('.downScrollContainer').each(function { 		$(this).text('⇃'); 	});

$('div.upScrollContainer, div.downScrollContainer').each( function { 		$(this).hover(function(e) { e.stopPropagation; $(this).children('div').fadeIn('fast'); },		function (e) { e.stopPropagation; $(this).children('div').fadeOut('fast'); });	} );

// when hovering over these buttons, the list will automatically scroll var scrollInterval = 0; /*$('#upScrollButton').hover(function(e) {		function a { $('#listContainer').scrollTop( $('#listContainer').scrollTop - 2 ); }		scrollInterval = setInterval(a, 15);			},	function  {		clearInterval(scrollInterval);	});

$('#downScrollButton').hover(function(e) {		function a { $('#listContainer').scrollTop( $('#listContainer').scrollTop + 2 ); }		scrollInterval = setInterval(a, 15);	},	function  {		clearInterval(scrollInterval);	});*/

// scroll faster if the user clicks and holds the horizontal bars at the edges $('#listContainer div.upScrollContainer').mousedown(function {		function a { $('#listContainer').scrollTop( $('#listContainer').scrollTop - 5 ); }		scrollInterval = setInterval(a, 15);			}).mouseup(function  {		clearInterval(scrollInterval);	}); $('#listContainer div.downScrollContainer').mousedown(function {		function a { $('#listContainer').scrollTop( $('#listContainer').scrollTop + 5 ); }		scrollInterval = setInterval(a, 15);			}).mouseup(function  {		clearInterval(scrollInterval);	});

// make a dark translucent box darkness.css('width', $(document).width); darkness.css('height', $(document).height); darkness.css('overflow','visible'); darkness.offset({top: 0, left: 0});

// filmstrip of thumbnails for selection allThumbnails.each(function {		var currentListItem = $('');		$('#thumbStrip').append(currentListItem);		currentListItem.append($(this).clone);		currentListItem.find('img').attr('width',);		currentListItem.find('img').attr('height',);		currentListItem.find('img').fadeTo(0,0.61);		});

// change the image by clicking on a thumbnail $('#thumbStrip li img').click(function {		var i = $('#thumbStrip img').index($(this));		setBigImage(allThumbnails.eq(i));	});

// hovering fades $('#thumbStrip li img').hover(function {		var i = $('#thumbStrip img').index($(this));		if ( i != allThumbnails.index(currentImage) ) {			$(this).fadeTo('fast',1.0);		}	},	function {		var i = $('#thumbStrip img').index($(this));		if ( i != allThumbnails.index(currentImage) ) {			$(this).fadeTo('fast',0.61);		}		else {			$(this).fadeTo('fast',0.98);		}	});

//hide until called for darkness.hide(0);

//disable the standard image magnify links $('div.magnify a').attr('href','');

$('div.magnify a').click(function(e) { 		e.preventDefault;

var thumbnail = $(this).parents('.thumbinner').find('img.thumbimage'); setBigImage(thumbnail); //disable outer scrollbar $('body').css('overflow','hidden'); //resize the dark screen to take up the space previously occupied by scrollbars $(window).resize;

//everything is ready. showtime! darkness.fadeIn(100); return false; });

// automatically resize #darknessBox with the size of the viewport $(window).resize(function(e) {				darkness.css('width', $(window).width);		darkness.css('height', $(window).height);	});

$('#closeText').click(function {		darkness.fadeOut(200);		$('body').css('overflow','auto'); 	});

}); //ends .ready