Difference between revisions of "Team:Vilnius-Lithuania/Vilnius15 Script"

Line 67: Line 67:
  
 
$(document).ready(myWikiReady);
 
$(document).ready(myWikiReady);
 +
 +
// GRAYSCALE
 +
 +
 +
// On window load. This waits until images have loaded which is essential
 +
$(window).load(function(){
 +
 +
// Fade in images so there isn't a color "pop" document load and then on window load
 +
$(".item img").fadeIn(500);
 +
 +
// clone image
 +
$('.item img').each(function(){
 +
var el = $(this);
 +
el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
 +
var el = $(this);
 +
el.parent().css({"width":this.width,"height":this.height});
 +
el.dequeue();
 +
});
 +
this.src = grayscale(this.src);
 +
});
 +
 +
// Fade image
 +
$('.item img').mouseover(function(){
 +
$(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
 +
})
 +
$('.img_grayscale').mouseout(function(){
 +
$(this).stop().animate({opacity:0}, 1000);
 +
});
 +
});
 +
 +
// Grayscale w canvas method
 +
function grayscale(src){
 +
var canvas = document.createElement('canvas');
 +
var ctx = canvas.getContext('2d');
 +
var imgObj = new Image();
 +
imgObj.src = src;
 +
canvas.width = imgObj.width;
 +
canvas.height = imgObj.height;
 +
ctx.drawImage(imgObj, 0, 0);
 +
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
 +
for(var y = 0; y < imgPixels.height; y++){
 +
for(var x = 0; x < imgPixels.width; x++){
 +
var i = (y * 4) * imgPixels.width + x * 4;
 +
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
 +
imgPixels.data[i] = avg;
 +
imgPixels.data[i + 1] = avg;
 +
imgPixels.data[i + 2] = avg;
 +
}
 +
}
 +
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
 +
return canvas.toDataURL();
 +
    }

Revision as of 21:57, 25 August 2015

function myWikiReady() {

// put the footer in the right place 

   $("#footer-box").prepend($("#social-footer"));

function gotop(e){ 

 if ($(window).scrollTop() != 0) {
   $("a#gotop").fadeIn(400);
 } else {
   $("a#gotop").fadeOut(400);
 }

}


$(window).load(function () { 

   $('head').append('<link rel="icon" type="image/png" href="http://www.example.com/image.png">');
 });

$(window).load(function () { 

   $('head').append('<link rel="shortcut icon" href="http://s6.postimg.org/5e5zj2w31/favicon.png" />');
 });

$("a#gotop").hide(0); gotop();

$(window).scroll(gotop); $("a#gotop").click(function(e){ 

 e.preventDefault();
 $(window).off('scroll', gotop);
 $('html, body').animate({scrollTop : 0},500,'swing',function(){$(window).scroll(gotop);$("a#gotop").fadeOut(400);});

});



// Slideshows 

   $('.bxslider').bxSlider({
       responsive: false,
       auto: true,
       autoHover: true,
       captions: true
   });

$("div.thumbinner > a img").slimbox({}, function(el) { url = el.src; if (url.indexOf('thumb') != -1) { url = url.substring(0, url.lastIndexOf('/')); url = url.replace('/thumb/', '/'); } description = $(el).parents("div.thumbinner").children("div.thumbcaption").text(); return [url, description]; }, function(el) { return (this == el); }); 

   $('.bxgallery').bxSlider({
       captions: true,
       slideMargin: 10,
       minSlides: 3,
       maxSlides: 3,
       moveSlides: 1,
       slideWidth: 5000
   });

}

$(document).ready(myWikiReady);

// GRAYSCALE


// On window load. This waits until images have loaded which is essential $(window).load(function(){

// Fade in images so there isn't a color "pop" document load and then on window load $(".item img").fadeIn(500);

// clone image $('.item img').each(function(){ var el = $(this);

el.css({"position":"absolute"}).wrap("
").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){

var el = $(this); el.parent().css({"width":this.width,"height":this.height}); el.dequeue(); }); this.src = grayscale(this.src); });

// Fade image $('.item img').mouseover(function(){ $(this).parent().find('img:first').stop().animate({opacity:1}, 1000); }) $('.img_grayscale').mouseout(function(){ $(this).stop().animate({opacity:0}, 1000); }); });

// Grayscale w canvas method function grayscale(src){ var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var imgObj = new Image(); imgObj.src = src; canvas.width = imgObj.width; canvas.height = imgObj.height; ctx.drawImage(imgObj, 0, 0); var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height); for(var y = 0; y < imgPixels.height; y++){ for(var x = 0; x < imgPixels.width; x++){ var i = (y * 4) * imgPixels.width + x * 4; var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3; imgPixels.data[i] = avg; imgPixels.data[i + 1] = avg; imgPixels.data[i + 2] = avg; } } ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); return canvas.toDataURL();

}