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("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();
}