Results 1 to 4 of 4

Thread: Mozilla Fade Issue

  1. #1
    Join Date
    Jan 2007
    Posts
    181
    Thanks
    5
    Thanked 3 Times in 3 Posts

    Default Mozilla Fade Issue

    I think this is the right piece of code..

    It fades in Safari and IE but not Mozilla... any ideas?

    Thanks so much!

    Code:
    <script type="text/javascript">
    	var currentimage = null;
    	$(document).ready(function(){
    		
    		
    				$('.jcarousel-skin-tango').addClass('gallery_demo'); // adds new class name to maintain degradability
    		
    					$('ul.gallery_demo').galleria({
    					history   : true, // activates the history object for bookmarking, back-button etc.
    					clickNext : true, // helper for making the image clickable
    					insert    : '#main_image', // the containing selector for our main image
    					onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
    						
    						// fade in the image & caption
    						if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
    							image.css('display','none').fadeIn(3500);
    						}
    						caption.css('display','none').fadeIn(1000);
    						
    						// fetch the thumbnail container
    						var _li = thumb.parents('li');
    						
    						// fade out inactive thumbnail
    						_li.siblings().children('img.selected').fadeTo(500,0.3);
    						
    						// fade in active thumbnail
    						thumb.fadeTo('fast',1).addClass('selected');
    						
    						// add a title for the clickable image
    						image.attr('title','Next image >>');
    						
    						
    					},
    					onThumb : function(thumb) { // thumbnail effects goes here
    						
    						// fetch the thumbnail container
    						var _li = thumb.parents('li');
    						
    						// if thumbnail is active, fade all the way.
    						var _fadeTo = _li.is('.active') ? '1' : '0.3';
    						
    						// fade in the thumbnail when finnished loading
    						thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
    						
    						// hover effects
    						thumb.hover(
    							function() { thumb.fadeTo('fast',1);},
    							function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
    							
    						)
    					}
    				});
    		
    		jQuery('#mycarousel').jcarousel({
            	scroll: 10,
    	        initCallback: mycarousel_initCallback
    	    });
    	    
    	    
        });
    
        function mycarousel_initCallback(carousel) {
    	    jQuery('#main_image').bind('img_change',function() {
    		    var num = parseInt((jQuery('.caption').text()).split(":",1)[0])-1;
    	        carousel.scroll(num);
    	        return false;
    	    });
    	};	
    	</script>

  2. #2
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    Well, you have only provided the fade function that isn't for IE. To make it compatible with IE and other browsers, use this code:

    .style.filter = "alpha(opacity = what amount of opacity when used in fading here)";

    After your object on the page (Id) you want to fade - in the script area.

    Sorry. This is a very vivid explanation, but I'm sure you could ask me for a better one, or some other programmer on DD will emphasize. I don't have the time right now. Sorry, again!

    -magicyte

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That doesn't appear to be the situation at all. This is a script that is using the jQuery script library. It would probably work in FF if FF (and all Mozilla based browsers) under Windows wasn't being specifically excluded:

    Code:
    if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
    	image.css('display','none').fadeIn(3500);
    }
    If you changed all that to simply:

    Code:
    image.css('display','none').fadeIn(3500);
    and there aren't any other exclusions for FF/Mozilla that your code snippet doesn't show, it should work out. However, the comment (green) may still be accurate (FF/Win has improved in recent years though), so you might want to consider leaving the code alone and just living with it not working in FF/Mozilla under Windows.
    Last edited by jscheuer1; 09-20-2008 at 11:35 AM. Reason: add detail
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Jan 2007
    Posts
    181
    Thanks
    5
    Thanked 3 Times in 3 Posts

    Default

    Thanks so much for the help!

    I'll give it a whirl and see how it works.

    Much appreciated, as always!
    Jon

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •