Conflit Jquery

entre Lavalamp et un slider

23 octobre 2011 à 13:31:23

Salut à tous,

Je suis actuellement en train de réaliser mon site personnel. Je souhaite insérer un menu de type Lavalamp ainsi qu'un slider qui défile automatiquement. Malheureusement, les 2 ne cohabitent pas ensemble.

Je précise que j'ai déjà regardé tous les messages postés en rapport avec ce sujet mais je n'ai pas trouvé de réponses qui résolve mon problème. J'ai vu que certaines personnes disaient d'utiliser la fonction "no-conflict" mais je ne sais pas m'en servir.

Mon site étant actuellement en construction, je ne souhaite pas mettre le lien mais voici un aperçu du code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/scripts.js"></script>
	<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
	<script type="text/javascript">
		$(function() { 
		$(".menu").lavaLamp({ fx: "backout", speed: 700 })
		});  
	</script>

        <script type="text/javascript"> 
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"PHOTOS","desc":"Alhambra à Grenade"},{"id":"slide-img-2","client":"PHOTOS","desc":"Parc Güell à Barcelone"},{"id":"slide-img-3","client":"Site Web","desc":"New Tee"},{"id":"slide-img-4","client":"SITE WEB","desc":"AMR Métallerie"},{"id":"slide-img-5","client":"SITE WEB","desc":"Agence Pyxelio"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];
        </script>

</head>

<body>
	<div id="wrapper"> <!-- DEBUT DU WRAPPER (total de la page) -->


		<!-- DEBUT HEADER (logo + menu) -->
		<div id="entete">
			
			<div id="menu">	
				<h2>Menu principal</h2> <!-- DEBUT Menu principal -->
					<ul class="menu">
						<li><a href="#">Contact</a></li>
						<li><a href="#">Réalisations</a></li>
						<li><a href="#">Compétences</a></li>
						<li><a href="cv.html">CV</a></li>
					</ul> <!-- FIN Menu principal -->
			</div>
		</div>
		<!-- FIN HEADER (logo + menu) -->

		<!-- DEBUT Slider (bloc défilant) -->
			<div id="header">
			  	<div class="wrap">
			   		<div id="slide-holder">
						<div id="slide-runner">
						    <a href=""><img id="slide-img-1" src="images/vacances/grenade/alhambra.jpg" class="slide" alt="" /></a>
						    <a href=""><img id="slide-img-2" src="images/vacances/barcelone/guell_park.jpg" class="slide" alt="" /></a>
						    <a href=""><img id="slide-img-3" src="images/projets/sites/new-tee.jpg" class="slide" alt="" /></a>
						    <a href=""><img id="slide-img-4" src="images/projets/sites/amr.jpg" class="slide" alt="" /></a>
						    <a href=""><img id="slide-img-5" src="images/projets/sites/pyxelio.jpg" class="slide" alt="" /></a>
						    <a href=""><img id="slide-img-6" src="images/nature-photo4.png" class="slide" alt="" /></a>
							<a href=""><img id="slide-img-7" src="images/nature-photo6.png" class="slide" alt="" /></a> 
						    	<div id="slide-controls">
								     <p id="slide-client" class="text"><strong> </strong><span></span></p>
								     <p id="slide-desc" class="text"></p>
								     <p id="slide-nav"></p>
			    				</div>
						</div>
   					</div>
  				</div>
  			</div><!-- FIN header-->
		<!-- FIN Slider (bloc défilant) -->

	</div> <!-- FIN DU WRAPPER (total de la page) -->
</body>
</html>

Détail des .js :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> [J'inclus Jquery depuis Google]
<script type="text/javascript" src="js/scripts.js"></script> [script pour faire fonctionner le slider]
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script> [script pour faire fonctionner le menu]
<script type="text/javascript">  [script pour faire animer le menu]
		$(function() { 
		$(".menu").lavaLamp({ fx: "backout", speed: 700 })
		});  
</script>

        <script type="text/javascript"> [script pour afficher une légende sur le slider]
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"PHOTOS","desc":"Alhambra à Grenade"},{"id":"slide-img-2","client":"PHOTOS","desc":"Parc Güell à Barcelone"},{"id":"slide-img-3","client":"Site Web","desc":"New Tee"},{"id":"slide-img-4","client":"SITE WEB","desc":"AMR Métallerie"},{"id":"slide-img-5","client":"SITE WEB","desc":"Agence Pyxelio"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];
        </script>

J'ai supprimé le fichier "jquery.easing.min.js" car il faisait planter le slider.

Quelqu'un aurait-il un élément de réponse pour m'aider à gérer ce conflit ?

Merci !

Golmote

23 octobre 2011 à 14:24:26

Y'a quoi dans scripts.js ?

Anthonydu89

23 octobre 2011 à 14:36:00

Fichier "scripts.js"

window.onerror=function(desc,page,line,chr){
/* alert('JavaScript error occurred! \n'
  +'\nError description: \t'+desc
  +'\nPage address:      \t'+page
  +'\nLine number:       \t'+line
 );*/
}



$(function(){
 $('a').focus(function(){this.blur();});
 SI.Files.stylizeAll();
 slider.init();

 $('input.text-default').each(function(){
  $(this).attr('default',$(this).val());
 }).focus(function(){
  if($(this).val()==$(this).attr('default'))
   $(this).val('');
 }).blur(function(){
  if($(this).val()=='')
   $(this).val($(this).attr('default'));
 });

 $('input.text,textarea.text').focus(function(){
  $(this).addClass('textfocus');
 }).blur(function(){
  $(this).removeClass('textfocus');
 });

 var popopenobj=0,popopenaobj=null;
 $('a.popup').click(function(){
  var pid=$(this).attr('rel').split('|')[0],_os=parseInt($(this).attr('rel').split('|')[1]);
  var pobj=$('#'+pid);
  if(!pobj.length)
   return false;
  if(typeof popopenobj=='object' && popopenobj.attr('id')!=pid){
   popopenobj.hide(50);
   $(popopenaobj).parent().removeClass(popopenobj.attr('id').split('-')[1]+'-open');
   popopenobj=null;
  }
  return false;
 });
 $('p.images img').click(function(){
  var newbg=$(this).attr('src').split('bg/bg')[1].split('-thumb')[0];
  $(document.body).css('backgroundImage','url('+_siteRoot+'images/bg/bg'+newbg+'.jpg)');
 
  $(this).parent().find('img').removeClass('on');
  $(this).addClass('on');
  return false;
 });
 $(window).load(function(){
  $.each(css_ims,function(){(new Image()).src=_siteRoot+'css/images/'+this;});
  $.each(css_cims,function(){
   var css_im=this;
   $.each(['blue','purple','pink','red','grey','green','yellow','orange'],function(){
    (new Image()).src=_siteRoot+'css/'+this+'/'+css_im;
   });
  });
 }); 
 $('div.sc-large div.img:has(div.tml)').each(function(){
  $('div.tml',this).hide();
  $(this).append('<a href="#" class="tml_open">&nbsp;</a>').find('a').css({
   left:parseInt($(this).offset().left)+864,top:parseInt($(this).offset().top)+1
  }).click(function(){
   $(this).siblings('div.tml').slideToggle();
   return false;
  }).focus(function(){this.blur();}); 
 });
});
var slider={
 num:-1,
 cur:0,
 cr:[],
 al:null,
 at:10*1000,
 ar:true,
 init:function(){
  if(!slider.data || !slider.data.length)
   return false;

  var d=slider.data;
  slider.num=d.length;
  var pos=Math.floor(Math.random()*1);//slider.num);
  for(var i=0;i<slider.num;i++){
   $('#'+d[i].id).css({left:((i-pos)*1000)});
   $('#slide-nav').append('<a id="slide-link-'+i+'" href="#" onclick="slider.slide('+i+');return false;" onfocus="this.blur();">'+(i+1)+'</a>');
  }

  $('img,div#slide-controls',$('div#slide-holder')).fadeIn();
  slider.text(d[pos]);
  slider.on(pos);
  slider.cur=pos;
  window.setTimeout('slider.auto();',slider.at);
 },
 auto:function(){
  if(!slider.ar)
   return false;

  var next=slider.cur+1;
  if(next>=slider.num) next=0;
  slider.slide(next);
 },
 slide:function(pos){
  if(pos<0 || pos>=slider.num || pos==slider.cur)
   return;

  window.clearTimeout(slider.al);
  slider.al=window.setTimeout('slider.auto();',slider.at);

  var d=slider.data;
  for(var i=0;i<slider.num;i++)
   $('#'+d[i].id).stop().animate({left:((i-pos)*1000)},1000,'swing');
  
  slider.on(pos);
  slider.text(d[pos]);
  slider.cur=pos;
 },
 on:function(pos){
  $('#slide-nav a').removeClass('on');
  $('#slide-nav a#slide-link-'+pos).addClass('on');
 },
 text:function(di){
  slider.cr['a']=di.client;
  slider.cr['b']=di.desc;
  slider.ticker('#slide-client span',di.client,0,'a');
  slider.ticker('#slide-desc',di.desc,0,'b');
 },
 ticker:function(el,text,pos,unique){
  if(slider.cr[unique]!=text)
   return false;

  ctext=text.substring(0,pos)+(pos%2?'-':'_');
  $(el).html(ctext);

  if(pos==text.length)
   $(el).html(text);
  else
   window.setTimeout('slider.ticker("'+el+'","'+text+'",'+(pos+1)+',"'+unique+'");',30);
 }
};
// STYLING FILE INPUTS 1.0 | Shaun Inman <http://www.shauninman.com/> | 2007-09-07
if(!window.SI){var SI={};};
SI.Files={
 htmlClass:'SI-FILES-STYLIZED',
 fileClass:'file',
 wrapClass:'cabinet',
 
 fini:false,
 able:false,
 init:function(){
  this.fini=true;
 },
 stylize:function(elem){
  if(!this.fini){this.init();};
  if(!this.able){return;};
  
  elem.parentNode.file=elem;
  elem.parentNode.onmousemove=function(e){
   if(typeof e=='undefined') e=window.event;
   if(typeof e.pageY=='undefined' &&  typeof e.clientX=='number' && document.documentElement){
    e.pageX=e.clientX+document.documentElement.scrollLeft;
    e.pageY=e.clientY+document.documentElement.scrollTop;
   };
   var ox=oy=0;
   var elem=this;
   if(elem.offsetParent){
    ox=elem.offsetLeft;
    oy=elem.offsetTop;
    while(elem=elem.offsetParent){
     ox+=elem.offsetLeft;
     oy+=elem.offsetTop;
    };
   };
  };
 },
 stylizeAll:function(){
  if(!this.fini){this.init();};
  if(!this.able){return;};
 }
};

Golmote

23 octobre 2011 à 16:08:01

Hm.

Et que dit la console d'erreurs ? (Outils -> Développeur web -> Console d'erreurs sous Firefox)

Anthonydu89

23 octobre 2011 à 16:22:43

La console dit:

"css_ims is not defined" pour mon site mais y'a aussi un paquet d'autres erreurs où je comprends rien.

Erreur : f.easing[e.animatedProperties[this.prop]] is not a function
Fichier Source : https://ajax.googleapis.com/ajax/libs/ [...] jquery.min.js
Ligne : 18

Golmote

23 octobre 2011 à 16:32:25

On dirait que le fichier easing est clairement nécessaire à l'un de tes scripts.

Conflit Jquery

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Conflit Jquery

entre Lavalamp et un slider

Conflit Jquery

Supprimer

Modérer

Signaler le message aux modérateurs