JS Fade not working

[virtual]

Can anyone tell me why the fade is not working in between the different images. It was working on the demo

http://180virtual.com/supersized2/default.php,

but once I put my pics in it stopped. The js is set to Fade.

http://180virtual.com/supersized2/cr-supersize.php

the js file is at

http://180virtual.com/supersized2/supersized.2.0.js

[Kyle Undefined]

The fade is working for me, but your images are making my browser lag way down. I don't know how you're loading them but it seems to skip every other picture.

[Webkiller]

Can anyone tell me why the fade is not working in between the different images. It was working on the demo

http://180virtual.com/supersized2/default.php,

but once I put my pics in it stopped. The js is set to Fade.

http://180virtual.com/supersized2/cr-supersize.php

the js file is at

http://180virtual.com/supersized2/supersized.2.0.js

 

 

Go all the way down in your supersize .js file to this: Ajust as needed.

 

 

//Captions require img in <a>
    if (options.slide_captions == 1) $('#slidecaption').html($(nextslide).find('img').attr('title'));

    nextslide.hide().addClass('activeslide')
    	if (options.transition == 0){
    		nextslide.show(); $.inAnimation = false;
    	}
    	if (options.transition == 1){
    		[b]nextslide.fadeIn(750, function(){$.inAnimation = false;});[/b]
    	}
    	if (options.transition == 2){
    		nextslide.show("slide", { direction: "down" }, 'slow', function(){$.inAnimation = false;});
    	}
    	if (options.transition == 3){
    		nextslide.show("slide", { direction: "left" }, 'slow', function(){$.inAnimation = false;});
    	}
    	if (options.transition == 4){
    		nextslide.show("slide", { direction: "up" }, 'slow', function(){$.inAnimation = false;});
    	}
    	if (options.transition == 5){
    		nextslide.show("slide", { direction: "right" }, 'slow', function(){$.inAnimation = false;});
    	}

    	$('#supersize').resizenow();//Fix for resize mid-transition
}

[Webkiller]

Ajust this also

 

//Slideshow Next Slide
function nextslide() {
	if($.inAnimation) return false;
	else $.inAnimation = true;
    var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
    var currentslide = $('#supersize .activeslide');
    currentslide.removeClass('activeslide');

    if ( currentslide.length == 0 ) currentslide = $('#supersize a:last');

    var nextslide =  currentslide.next().length ? currentslide.next() : $('#supersize a:first');
    var prevslide =  nextslide.prev().length ? nextslide.prev() : $('#supersize a:last');


	//Display slide counter
	if (options.slide_counter == 1){
		var slidecount = $('#slidecounter .slidenumber').html();
		currentslide.next().length ? slidecount++ : slidecount = 1;
	    $('#slidecounter .slidenumber').html(slidecount);
	}

	$('.prevslide').removeClass('prevslide');
	prevslide.addClass('prevslide');

	//Captions require img in <a>
    if (options.slide_captions == 1) $('#slidecaption').html($(nextslide).find('img').attr('title'));

    nextslide.hide().addClass('activeslide')
    	if (options.transition == 0){
    		nextslide.show(); $.inAnimation = false;
    	}
    	if (options.transition == 1){
    	[b]	nextslide.fadeIn(750, function(){$.inAnimation = false;});[/b]
    	}
    	if (options.transition == 2){
    		nextslide.show("slide", { direction: "up" }, 'slow', function(){$.inAnimation = false;});
    	}
    	if (options.transition == 3){
    		nextslide.show("slide", { direction: "right" }, 'slow', function(){$.inAnimation = false;});
    	}
    	if (options.transition == 4){
    		nextslide.show("slide", { direction: "down" }, 'slow', function(){$.inAnimation = false;});
    	}
    	if (options.transition == 5){
    		nextslide.show("slide", { direction: "left" }, 'slow', function(){$.inAnimation = false;});
    	}

    $('#supersize').resizenow();//Fix for resize mid-transition

}

Edited October 13, 2010 by Webkiller

[virtual]

@ all, I have only tested this in Firefox 3.5 for Mac not too concerned with anything else until I can see if I (with a little help or a big shove can get it to work...)

 

@webkiller, could you please explain what I need to change in the code you posted. I haven't the faintest clue about JS and also I'm not using the captions (too much work to add in all the text for each potential client) so as I eliminated the html for captions that's why I may have this problem, but I really need a more explicit explanation as to what does what. If you have the time and will that is.

 

Thanks to all

 

P.S. I speak 3 "human languages" but programming has never been one of them

Edited October 13, 2010 by virtual

[falkencreative]

The fade is working for me, but your images are making my browser lag way down.

Seconded. I almost had to force quit Firefox since the browser became unresponsive.

[virtual]

The images are 800 px wide and I use the same ones with Fancybox. I guess the supersize effect which resizes the pics to the size of the browser window might be causing a problem. Funny they work fine for me on my Mac even if I stretch the browser window across 2 screens.

[BeeDev]

I think the auto-forward time is set too low, and the images are too big/bulky to fadeIn fadeOut in a short time, the browsers just can't handle it i think, try to optimize the images, and the JS if necessary, and also try to increase the time for the auto-forward to like .. 10-15 seconds to see if the fade is really working or not. Also might help if you increase the fadeIn/fadeOut duration to like 1000 or 2000 In my opinion, it's just browser lag thats causing you to not see the fades.

Edited October 13, 2010 by BeeDev

[virtual]

Thanks all, I couldn't get it to fade and if it's crashing the browser then I think I'll just scrap it.