Jump to content
Stef's Coding Community

JS Fade not working


Recommended Posts

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

Link to post
Share on other sites

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
}

Link to post
Share on other sites

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 by Webkiller
Link to post
Share on other sites

@ 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 :D

Edited by virtual
Link to post
Share on other sites

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.

Link to post
Share on other sites

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 by BeeDev
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...