Y aurait-il un problème dans javascript?

Bonsoir,

je suis en train de finir mon site et je suis confronté à deux soucis qui sont sûrement liés.

- Sous IE, les images en png de mon diaporama sont mal affichées. Au lieu de faire apparaître correctement les ombres, il les rend noires. Du coup ce n'est ni esthétique ni ce que je voulais faire.
Et ce qui est particulier, c'est que les images des boutons du menu, ainsi que l'image de la première page sont en png, avec des ombres, et que ça marche!

http://www.di-credico.com/test/

- Ce qui peut être lié c'est que lorsque je teste le site (soit sur winamp soit sur un serveur online), il m'affiche une erreure :

"Détails de l’erreur de la page Web

Agent utilisateur : Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6.3; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.2)
Horodateur : Wed, 8 Dec 2010 16:57:33 UTC


Message : 'null' a la valeur Null ou n'est pas un objet.
Ligne : 30
Caractère : 6
Code : 0
URI : http://localhost/js/pikachoose.js"

Je peux vous mettre le pikahoose.js, une flèche montre la bonne ligne (qui ne l'est pas normalement), juste après le 3ème "function" :

(function($){
    $(document).ready(function(){
        $("#pikame").PikaChoose();
        $("#pikame_user").PikaChoose({user_thumbs:true, show_prev_next:false});
        $("#pikame_compact").PikaChoose({user_thumbs:true, show_prev_next:false});
    });
})(jQuery);

$(document).ready(
				function (){
				      -->  $("#pikame").PikaChoose();<--
				});
				
			$(document).ready(
				function (){
					$("#pikame_user").PikaChoose({user_thumbs:true, show_prev_next:false});
			});
			
			$(document).ready(
				function (){
					$("#pikame_compact").PikaChoose({user_thumbs:true, show_prev_next:false});
			});

jQuery.iPikaChoose = {
	build : function(user_options)
	{
		var defaults = {
			show_captions: true,
			slide_enabled: false,
			auto_play: false,
			show_prev_next: false,
			slide_speed: 5000,
			thumb_width: 90,
			thumb_height: 60,
			delay_caption: false,
			user_thumbs: false
		};

		return jQuery(this).each(
			function() {
				function LoadImages()
				{
					jQuery(this).bind("load", function()
					{
						//had to make a seperate function so that the thumbnails wouldn't have problems
						//from beings resized before loaded, thus not h/w
						
						//delete hidden image to clean up things.
						jQuery(this).parent('div').prev().remove();
						images = jQuery(this).parents('ul').find('img');
						var w = jQuery(this).width();
						var h = jQuery(this).height();
						if(w===0){w = jQuery(this).attr("width");}
						if(h===0){h = jQuery(this).attr("height");}
						//grab a ratio for image to user defined settings
						var rw = options.thumb_width/w;
						var rh = options.thumb_height/h;
						
						//determine which has the smallest ratio (thus needing
						//to be the side we use to scale so our whole thumb is filled)
						var ratio;
						if(rw<rh){
							//we'll use ratio later to scale and not distort
							ratio = rh;
							var left = ((w*ratio-options.thumb_width)/2)*-1;
							left = Math.round(left);
							//set images left offset to match
							jQuery(this).css({left:left});
						}else{
							ratio = rw;
							//you can uncoment this lines to have the vertical picture centered
							//but usually tall photos have the focal point at the top...
							var top = ((h*ratio-options.thumb_height)/2)*-1;
							var top = Math.round(top);
							var top = 0;
							jQuery(this).css({top:top});
						}
						//use those ratios to calculate scale
						var width = Math.round(w*ratio);
						var height = Math.round(h*ratio);
						jQuery(this).css("position","relative");
						jQuery(this).width(width).height(height);
						var imgcss={
							width: width,
							height: height
						};
						jQuery(this).css(imgcss);					
						jQuery(this).hover(
							function(){jQuery(this).fadeTo(250,1);},
							function(){if(!jQuery(this).hasClass("pika_selected")){jQuery(this).fadeTo(250,0.4);}}
						);
						jQuery(this).fadeTo(250,0.4);	
						
						if(jQuery(this).hasClass('pika_first')){
							jQuery(this).trigger("click",["auto"]);
						}
						
					});
				
					//clone so the on loads will fire correctly
					var newImage = jQuery(this).clone(true).insertAfter(this);
					
					jQuery(this).hide();
	
					//reset images to the clones
					images = ulist.children('li').children('img');
				}

				//bring in options
				var options = jQuery.extend(defaults, user_options);
				// grab our images
				var images = jQuery(this).children('li').children('img');
				//hide the images so the user doesn't see crap
				images.fadeOut(1);
				
				//save our list for future ref
				var ulist = jQuery(this);
				images.each(LoadImages);
				//start building structure
				jQuery(this).before("<div class='pika_main'></div>");
				// houses eveything about the UL
				var main_div = jQuery(this).prev(".pika_main");
				
				//add in slideshow elements when appropriate
				/*if(options.slide_enabled){
					main_div.append("<div class='pika_play'></div>");
					var play_div = jQuery(this).prev(".pika_main").children(".pika_play");
					play_div.html("<a class='pika_play_button'>" + options.buttons_text.play + "</a><a class='pika_stop_button'>" + options.buttons_text.stop + "</a>");
					play_div.fadeOut(1);
					var play_anchor = play_div.children('a:first');
					var stop_anchor = play_div.children('a:last');
				}*/
				//this div is used to make image and caption fade together
				main_div.append("<div class='pika_subdiv'></div>");
				var sub_div = main_div.children(".pika_subdiv");
				
				//the main image we'll be using to load
				sub_div.append("<img class='pika_main_img' />");
				var main_img = sub_div.children("img:last");
				var back_img = sub_div.children("img:first");
				
				
				/*//build custom overlays. These will use navigation div
				sub_div.append("<div class='pika_prev_hover'></div><div class='pika_next_hover'></div>");
				var prevHover = sub_div.find('.pika_prev_hover');
				var nextHover = sub_div.find('.pika_next_hover');
				prevHover.hide();
				nextHover.hide();*/
				//create the caption div when appropriate
				if(options.show_captions){
					main_div.append("<div class='pika_caption'></div>");
					var caption_div = main_div.children(".pika_caption");
				}
				
				//navigation div ALWAYS gets created, its refrenced a lot				
				jQuery(this).after("<div class='pika_navigation'></div>");
				var navigation_div = jQuery(this).next(".pika_navigation");
				//fill in sub elements
				/*navigation_div.prepend("<a>" + options.buttons_text.previous + "</a> :: <a>" + options.buttons_text.next + "</a>");
				var previous_image_anchor = navigation_div.children('a:first');
				var next_image_anchor = navigation_div.children('a:last');*/
				
				//hide the navigation if the user doesn't want it
				if(!options.show_prev_next){
					navigation_div.css("display","none");
				}
				
				//playing triggers the loop for the slideshow
				var playing = options.auto_play;
				
				main_img.wrap("<a></a>");
				var main_link = main_img.parent("a");
				
			function activate()
			{
				//sets the intial phase for everything
				
				//image_click is controls the fading
				images.bind("click",image_click);
				//hiding refrence to slide elements if slide is disabled
				if(options.slide_enabled){
					if(options.auto_play){
						playing = true;
						play_anchor.hide();
						stop_anchor.show();
					}else{
						play_anchor.show();
						stop_anchor.hide();
					}
				}
				
				ulist.children("li:last").children("img").addClass("pika_last");
				ulist.children("li:first").children("img").addClass("pika_first");
				ulist.children("li").each(function(){ jQuery(this).children("span").hide(); });
				//css for the list
				var divcss = {
					width: options.thumb_width+"px",
					height: options.thumb_height+"px",
					"list-style": "none",
					overflow: "hidden"
				};
				var licss = {
					"list-style": "none",
					overflow: "hidden"
				};
				images.each(function(){
					jQuery(this).parent('li').css(licss);
					jQuery(this).wrap(document.createElement("div"));
					jQuery(this).parent('div').css(divcss);
					//jQuery(this).parent('li').css(licss);
					//fixes a bug where images don't get the correct display after loading
					if(jQuery(this).attr('complete')===true && jQuery(this).css('display')=="none")
					{
						jQuery(this).css({display:'inline'});
					}
				});
				/*//previous link to go back an image
				previous_image_anchor.bind("click",previous_image);
				prevHover.bind("click",previous_image);
				//ditto for forward, also the item that gets auto clicked for slideshow
				next_image_anchor.bind("click",next_image);
				nextHover.bind("click",next_image);	*/
				
				//enable mouse tracking for the hover
				sub_div.mousemove(function(e){
					var w = sub_div.width();
					var x = e.pageX - sub_div.offset().left;
      			if(x<w*0.3)
      			{
      				prevHover.fadeIn('fast');
      			}else{
     					prevHover.fadeOut('fast');
     				}
      			if(x>w*0.7)
      			{
      				nextHover.fadeIn('fast');	
      			}else{
      				nextHover.fadeOut('fast');	
      			}
   			});
   			sub_div.mouseleave(function(){ prevHover.fadeOut('fast');nextHover.fadeOut('fast'); });

			}//end activate function

			function image_click(event, how){
					//catch when user clicks on an image Then cancel current slideshow
					if(how!="auto"){
						if(options.slide_enabled){
							stop_anchor.hide();
							play_anchor.show();
							playing=false;
						}
						main_img.stop();
						main_img.dequeue();
						if(options.show_captions)
						{
							caption_div.stop();
							caption_div.dequeue();
						}
					}
					//all our image variables
					if(options.user_thumbs)
					{		
						var image_source = jQuery(this).attr("ref");
					}else
					{
						var image_source = this.src;
					}
					var image_link = jQuery(this).attr("rel");
					var image_caption = jQuery(this).parent().next("span").html();
					//fade out the old thumb
					images.filter(".pika_selected").fadeTo(250,0.4); 
					images.filter(".pika_selected").removeClass("pika_selected"); 
					//fade in the new thumb
					jQuery(this).fadeTo(250,1);
					jQuery(this).addClass("pika_selected");
					//fade the caption out
					if(options.show_captions)
					{
						if(options.delay_caption)
						{
							caption_div.fadeTo(800,0);
						}
						caption_div.fadeTo(500,0,function(){
							caption_div.html(image_caption);
							caption_div.fadeTo(800,1);
						});
					}
					//set back imge = main_img
					var delay = 100;
					if(main_img.attr('opacity') < 0.8)
					{
						delay = 500;
					}
					back_img.attr("src", main_img.attr("src"));
					main_img.fadeTo(delay,0.00,function(){
						//make the image fade in on load, which should hopefully get rid of any jumping
						main_img.unbind('load');
						main_img.bind('load',function()
 						{
							main_img.fadeTo(800,1,function(){
								if(playing){
									jQuery(this).animate({opactiy:1},options.slide_speed, function(){
										//redudency needed here to catch the user clicking on an image during a change.
										if(playing){next_image_anchor.trigger("click",["auto"]);}
									});
								}
								//reset it here to catch initial load.
								back_img.attr("src", main_img.attr("src"));
							});
						});
						main_img.attr("src",image_source);

						main_link.attr("href", image_link);
						
					});
			}//end image_click function
			
			function next_image(event, how){
				if(images.filter(".pika_selected").hasClass("pika_last")){
					images.filter(":first").trigger("click",how);
				}else{
					images.filter(".pika_selected").parents('li').next('li').find('img').trigger("click",how);
				}
			}//end next image function
			
			/*function previous_image(event, how){
				if(images.filter(".pika_selected").hasClass("pika_first")){
					images.filter(":last").trigger("click",how);
				}else{
					images.filter(".pika_selected").parents('li').prev('li').find('img').trigger("click",how);
				}
			}//end previous image function*/
			
			function play_button(){
				main_div.hover(
					function(){play_div.fadeIn(400);},
					function(){play_div.fadeOut(400);}
				);
				play_anchor.bind("click", function(){
					main_img.stop();
					main_img.dequeue();
					if(options.show_captions)
					{
						caption_div.stop();
						caption_div.dequeue();
					}
					playing = true;
					next_image_anchor.trigger("click",["auto"]);
					jQuery(this).hide();
					stop_anchor.show();
				});
				stop_anchor.bind("click", function(){
					playing = false;
					jQuery(this).hide();
					play_anchor.show();
				});
			}
			if(options.slide_enabled){play_button();}
			activate();

		});//end return this.each
	}//end build function
	
	//activate applies the appropriate actions to all the different parts of the structure.
	//and loads the sets the first image
};//end jquery.ipikachoose		
jQuery.fn.PikaChoose = jQuery.iPikaChoose.build;

J'espère que ce n'est pas trop long.

Je vous remercie d'avance.

Ugo
Modifié par BorisZeHachoir (08 Dec 2010 - 20:03)

BorisZeHachoir a écrit :
Est ce qu'il y aurait un problème?

Avec le titre de ton sujet oui. Est-ce que j'ai compris de quoi parlait ton sujet avant même de l'ouvrir ? Non

Ha, désolé..
Alors en plus clair.
J'ai des images png qui s'affichent correctement dans tout mon site.
Sauf pour le diaporama sur IE.
Dans ce dernier, les images s'affichent mal (noir vilain au lieu d'une ombre souple).

Et comme je trouve un message d'erreur sur IE concernant le fichier "pikahoose.js" à la ligne 30 et que je ne connais pas beaucoup le java, je demandais de l'aide pour savoir s'il y avait un erreur de syntaxe ou autre.

Ai-je été clair ce coup ci?

Merci

Personne n'a de solution alors?
Snifff, snifff...

Ton diporama sur Firefox ou Chrome s'affiche t il correctement?
IE est connu pour dégrader la qualité des images au format .png
Il existe, je crois, des scripts qui permette de corriger celà. Je te recommande de changer le format de tes images .png pour le format .gif

Sinon, tu peux essayer d'appliquer en CSS une ombre autour de tes images avec box-shadow pour les navigateurs qui supportent cet attribut, et pour IE, utiliser un filtre...mais attention ça alourdira le temps de chargement de ton CSS je crois.

Bonjour et merci de ta réponse.
Alors oui, le diaporama s'affiche correctement sur Firefox et Chrome.
J'ai aussi déjà essayer en gif, cela donne le même résultat malheureusement...
Pour ce qui est de l'ombre en box-shadow et du filtre sur IE, je ne suis pas fan et j'ai déjà essayé aussi.
C'est vrai que ça alourdi beaucoup, et que sur Firefox ou Chrome ça buggait...

Alors rien ne cloche avec le js? Et le message d'erreur sur IE?

Décidément, je crois que je vais les mettre en jpg simple.

Sinon je vais essayer de trouver comme faire en sorte qu'avec IE, le diaporama utilise les jpg et qu'avec les autres, il utilise les png. Si tu as un tuyau là dessus je suis preneur.

D'avance merci!

Bonjour et merci de ta réponse.
Alors oui, le diaporama s'affiche correctement sur Firefox et Chrome.
J'ai aussi déjà essayer en gif, cela donne le même résultat malheureusement...
Pour ce qui est de l'ombre en box-shadow et du filtre sur IE, je ne suis pas fan et j'ai déjà essayé aussi.
C'est vrai que ça alourdi beaucoup, et que sur Firefox ou Chrome ça buggait...

Alors rien ne cloche avec le js? Et le message d'erreur sur IE?

Décidément, je crois que je vais les mettre en jpg simple.

Sinon je vais essayer de trouver comme faire en sorte qu'avec IE, le diaporama utilise les jpg et qu'avec les autres, il utilise les png. Si tu as un tuyau là dessus je suis preneur.

D'avance merci!