/*
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 <http://www.gnu.org/licenses/>.
*/
var $ = jQuery;
//this holds the current jquery object that points to the currently shown thumbnail <img>
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 <img>, 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("//wiki.riteme.site/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('<div id="preload"></div>');
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 = $('<div id="darknessBox"></div>');
$('body').append(darkness);
darkness.append('<a id="closeText">Close</a>');
// this is the slideshow enabler
// when pressed, slideshows will be enabled (high opacity). when pressed again, they will be disabled (low opacity).
darkness.append('<div id="startSlideshow"></div>');
$('#startSlideshow').append('<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/07/X-office-presentation.svg/48px-X-office-presentation.svg.png" alt="Start Slideshow" />');
$('#startSlideshow').append('<div id="timeoutForm"></div>');
$('#timeoutForm').append('Timeout (ms)<br/><input id="timeoutField" title="Timeout" value="" />');
$('#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('<div id="infoSlider"></div>');
$('#infoSlider').append('<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Emblem-question.svg/48px-Emblem-question.svg.png" alt="Image Info" />');
$('#infoSlider').append('<div id="infoPane"></div>');
$('#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('<div id="imageContainer"></div>');
$('#imageContainer').append('<img id="bigImage"/>');
$('#imageContainer').append('<img id="previousImage"/>');
/*
//$('#imageContainer').append('<div class="upScrollContainer"><div id="upChangeButton" class="scrollButton"></div></div>');
//$('#imageContainer').append('<div class="downScrollContainer"><div id="downChangeButton" class="scrollButton"></div></div>');
$('#imageContainer').append('<div class="upScrollContainer"></div>');
$('#imageContainer').append('<div class="downScrollContainer"></div>');
*/
darkness.append('<div id="listContainer"></div>');
/*
//$('#listContainer').append('<div class="upScrollContainer"><div id="upScrollButton" class="scrollButton"></div></div>');
//$('#listContainer').append('<div class="downScrollContainer"><div id="downScrollButton" class="scrollButton"></div></div>');
$('#listContainer').append('<div class="upScrollContainer"></div>');
$('#listContainer').append('<div class="downScrollContainer"></div>');
*/
$('#listContainer').append('<ul id="thumbStrip"></ul>');
//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 = $('<li></li>');
$('#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
