jQuery Mouseover fade image links, script not working?

  • Resolved moofyboof

    (@moofyboof)


    12 years, 1 month 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?

Viewing 1 replies (of 1 total)
  • Thread Starter moofyboof

    (@moofyboof)

    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.

Viewing 1 replies (of 1 total)
  • The topic ‘jQuery Mouseover fade image links, script not working?’ is closed to new replies.