virtual Posted October 13, 2010 Report Share Posted October 13, 2010 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 Quote Link to comment Share on other sites More sharing options...
Kyle Undefined Posted October 13, 2010 Report Share Posted October 13, 2010 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. Quote Link to comment Share on other sites More sharing options...
Webkiller Posted October 13, 2010 Report Share Posted October 13, 2010 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 } Quote Link to comment Share on other sites More sharing options...
Webkiller Posted October 13, 2010 Report Share Posted October 13, 2010 (edited) 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 Quote Link to comment Share on other sites More sharing options...
virtual Posted October 13, 2010 Author Report Share Posted October 13, 2010 (edited) @ 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 Quote Link to comment Share on other sites More sharing options...
falkencreative Posted October 13, 2010 Report Share Posted October 13, 2010 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. Quote Link to comment Share on other sites More sharing options...
virtual Posted October 13, 2010 Author Report Share Posted October 13, 2010 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. Quote Link to comment Share on other sites More sharing options...
BeeDev Posted October 13, 2010 Report Share Posted October 13, 2010 (edited) 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 Quote Link to comment Share on other sites More sharing options...
virtual Posted October 13, 2010 Author Report Share Posted October 13, 2010 Thanks all, I couldn't get it to fade and if it's crashing the browser then I think I'll just scrap it. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.