2010-04-03 8 views
2

Je suis sans cesse confronté au problème lorsque j'utilise jquery lightbox (qui exécute le prototype) et jquery news slider.en utilisant JQuery et Prototype dans la même page; plus d'explications nécessaires!

J'ai essayé la méthode "noconflict".

Le problème est que je ne connais pas l'endroit exact où placer le code.

Donc, ici, je mets mes scripts à l'intérieur. Donc, s'il vous plaît dépannez-le et expliquez-moi où mettre le patch.

merci beaucoup.

<head> 
<meta http-equiv="Content-Language" content="en-us"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<title>Jquery</title> 

<script type="text/javascript" src="lb/js/prototype.js"></script> 
<script type="text/javascript" src="lb/js/scriptaculous.js?load=effects"></script> 
<script type="text/javascript" src="lb/js/lightbox.js"></script> 
<link href="lb/css/lightbox.css" rel="stylesheet" type="text/css" /> 

<script type="text/javascript" src="news/jquery-1.2.3.pack.js"></script> 
<script type="text/javascript" src="news/jquery.easynews.js"></script> 



<style> 
html 
{ background-color: #FFA928; 
font: normal 76% "Arial", "Lucida Grande",Verdana, Sans-Serif; 
color:black; 
} 
a { text-decoration: none; font-weight: bold; } 

.news_style{ 
display:none; 
} 
.news_show 
{ 
background-color: white; 
color:black; 
width:350px; 
height:150px; 
font: normal 100% "Arial", "Lucida Grande",Verdana, Sans-Serif; 
overflow: auto; 

} 
.news_border 
{ 
background-color: white; 
width:350px; 
height:150px; 
font: normal 100% "Arial", "Lucida Grande",Verdana, Sans-Serif; 
border: 1px solid gray; 
padding: 5px 5px 5px 5px; 
overflow: auto; 

} 
.news_mark{ 
background-color:white ; 
font: normal 70% "Arial", "Lucida Grande",Verdana, Sans-Serif; 
border: 0px solid gray; 
width:361px; 
height:35px; 
color:black; 
text-align:center; 
} 
.news_title{ 
font: bold 120% "Arial", "Lucida Grande",Verdana, Sans-Serif; 
border: 0px solid gray; 
padding: 5px 0px 9px 5px; 
color:black; 
} 
.news_show img{ 

margin-left: 5px; 
margin-right: 5px; 

} 
.buttondiv 
{ 
position: absolute; 
/*float: left;*/ 
/*top: 169px;*/ 
padding: 5px 5px 5px 5px; 
background-color:white ; 
border: 1px solid gray; 
/*border-top-color: white;*/ 
border-top:none; 
height:20px; 
} 

</style> 
<script> 
$(document).ready(function(){ 
var newsoption1 = { 
    firstname: "mynews", 
    secondname: "showhere", 
    thirdname:"news_display", 
    fourthname:"news_button", 
    newsspeed:'6000' 
} 
$.init_news(newsoption1); 


var myoffset=$('#news_button').offset(); 

var mytop=myoffset.top-1; 

$('#news_button').css({top:mytop}); 

}); 
</script> 

</head> 

Répondre

0

Eh? jQuery lightbox n'utilise pas de prototype. Qu'est-ce que vous utilisez exactement?

Essayez cette http://leandrovieira.com/projects/jquery/lightbox/

prototype et de vidage tous ensemble si vous le pouvez. Mieux vaut éviter deux cadres encombrants.

+0

marque de remerciement. Je suis un débutant. – xenogen

3

Je ne sais pas comment vous pouvez obtenir beaucoup plus claire alors l'explication here

En substance, appelant la variable jQuery.noConflict renonce $ à ce qu'il a été défini comme avant chargé jQuery. Ensuite, vous devez appeler jQuery pour l'utiliser directement. Dans mon cas, je redéfinis comme si:

$j = jQuery; // Now I can use $j for jQuery and $ for Prototype 

Vous pouvez également utiliser le $ dans une fonction prête, comme ceci:

jQuery(document).ready(function($) { 
    // Code that uses jQuery's $ can follow here. 
}); 

assez simple ... qu'est-ce que vous confus au sujet?

+0

merci mon pote! En fait, je suis un novice et je suis en train de construire mon site Web avec l'aide de Guy comme vous. Merci encore. – xenogen

0

Placez l'appel $ .noConflict() immédiatement après avoir inclus la bibliothèque jquery. Voir here.

<script type="text/javascript" src="news/jquery-1.2.3.pack.js"></script> 
<script type="text/javascript"> 
    $.noConflict(); 
    // Code that uses other library's $ can follow here. 
</script>