Kære udviklere,
Jeg er ved at indsætte nogle effekter på en bekendts portfolio. Han har lightbox, og ville gerne have et grayscale på billeder og normale farver når man holder også billeder.
Alt virker, bare ikke sammentidlig. Hvis jeg har Grayscale, så virker Lightbox ikke. Hvis Lightbox virker, virker Grayscale ikke.
Jeg har haft fundet frem til
- $.noConflict();
Men så virker Grayscale ikke.
- <script src="<?=$menu->menu()?>js/prototype.js" type="text/javascript"></script>
- <script src="<?=$menu->menu()?>js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
- <script src="<?=$menu->menu()?>js/lightbox.js" type="text/javascript"></script>
-
- <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
- <style type="text/css">.item img {opacity:0;}</style>
Javascript
- $(window).load(function(){
- $(".item img").animate({opacity:1},500);
-
- $('.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);
- });
- $('.item img').mouseover(function(){
- $(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
- })
- $('.img_grayscale').mouseout(function(){
- $(this).stop().animate({opacity:0}, 1000);
- });
- });
-
- 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();
- }
Nogle der kunne hjælpe?