WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] jQuery Mouseover fade image links, script not working? (2 posts)

  1. moofyboof
    Member
    Posted 1 year ago #

    Hey, I'm pretty new to this so bear with me for a second.

    Basically I'm trying to get something like this (here's another example) on a page where each thumbnail links to a post. I don't mind adding each link/image into the html code, but the fade effect doesn't seem to be working. It seems like WordPress adds tags that are preventing the script from running? I've installed the Allow Javascript on Posts and Pages plugin and that's not working either.

    Anyway, I was able to do a simple html image swap, but if I can I'd rather it fade. Here's that one.

    I've tried a bunch of different things and nothing seems to work. Any ideas?

  2. moofyboof
    Member
    Posted 1 year ago #

    I forgot to put the code I used. Sorry.

    <script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript"> 
    
    	// $(".item img").css({"display":"none");
    
    	// 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").animate({opacity:1},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();
        }
    
    </script>

    I've tried using jQuery instead of $, and other similar things I've seen suggested with no luck.

Topic Closed

This topic has been closed to new replies.

About this Topic