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:58, 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);