Problème de conflits jquery

Question

akya

4 Nov 2013 à 02:06

Bonjour,

J'ai un soucis dans le code de mon site.
J'ai 2 scripte jQuery sur une meme page et j'ai essayer d'utiliser le jQuery no conflict mais je ne sais pas si c'est moi qui n'ai rien compris, il ne fonctionne pas.
Je vous transmet mes codes :

La première page est la page principale index.php qui contient un slideshow

<!DOCTYPE html>
<html lang="fr">
        <head>
        <meta charset="utf-8">
        <title>MDE</title>
        <style>
/* Demo styles */
			@font-face {
 font-family: 'Kalinga';
 src: url('kalinga.eot');
 src: local('x'),  url('kalinga.woff') format('woff'),  url('kalinga.ttf') format('truetype'),  url('kalinga.svg#KalingaRegular') format('svg');
}
html, body {
	background:#fff;
	margin:0;
	height:100%;
	width:auto;
}
body {
	height:100%;
	width:auto;
	font-family:Kalinga;
}
.content {
	color:#000;
	width:620px;
	margin:20px auto;
	height:100%;
	width:auto;
}
h1 {
	font-size:12px;
	font-weight:normal;
	color:#fff;
	margin:0;
}
p {
	margin:0 0 20px
}
a {
	color:#000;
	text-decoration:none;
}
.cred {
	margin-top:20px;
	font-size:11px;
}
/* This rule is read by Galleria to define the gallery height: */
            #galleria {
	height:100%;
	width:auto;
}
.galleria-thumbnails-list {
	display:none;
}
.galleria-container {
	background-color:#FFF;
}
.topmenu {
	text-align:right;
	float:right;
	list-style-type:none;
	font-weight:bold;
	margin-right:24px;
}
.topmenu li {
	float:left;
	font-family:Kalinga;
}
.mainmenuc {
	font-weight: bold;
	list-style-type: none;
	background-image:url(Images/barremenu.png);
	background-repeat:no-repeat;
	background-position: 50% 80%;
	width: 326px;
	height: 20px;
	padding-bottom: 41px;
	float: right;
	clear: both;
	margin-top: 20px;
}
ul {
	padding:0px;
	margin:0px
}
.galleria-info-title {
	font-family:Kalinga;
	font-style:normal;
	font-weight:normal;
	color:#000;
}
.galleria-info-description {
	font-family:Kalinga;
	font-style:normal;
	color:#000;
}
.mainmenuc li {
	float:left;
	padding-left:20px;
}
.galleria-info {
	background-color:transparent;
	bottom:0px;
}
.galleria-info-text {
	background-color:transparent;
	display:block;
}
.mainmenuc li a:hover {
	background-image: url(Images/boulemenu.png);
	background-repeat: no-repeat;
	background-position: 57% 69%;
	height: 70px;
	display: block;
}
.mainmenuc li a:active {
	background-image: url(Images/boulemenu.png);
	background-repeat: no-repeat;
	background-position: 57% 69%;
	height: 70px;
	display: block;
}
.sousmenu {
	display:none;
	list-style-type: none;
	float: right;
	background: none;
}
.sousmenu li {
	float:left;
	margin-right: 20px;
}
.mainmenuc  ul li:hover .sousmenu {
	display:block;
}
</style>

        <!-- load jQuery -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

        <!-- load Galleria -->
        <script src="galleria-1.3.1.min.js"></script>
        
        </head>
        
        
        <body>
<div class="content">
<div id="header"> <img src="Images/logo.jpg" alt="logo" name="logo" />
          <ul class="topmenu">
    <li> <a href="#" style="margin-right:20px;">English</a></li>
    <li> <a href="#">Facebook</a> <span> / </span><a href="#">Twitter</a></li>
  </ul>
        </div>
<!-- Adding gallery images. We use resized thumbnails here for better performance, but it’s not necessary -->

<div id="galleria"> <a href="images/collection 2012/1.jpg"> <img 
                    src="images/collection 2012/1.jpg",
                    data-big=""
                    data-title="2008 AUTUMN COLLECTION"
                    data-description="Les infinits petits et grands"
                > </a> <a href="images/collection 2012/2.jpg"> <img 
                    src="images/collection 2012/2.jpg",
                    data-big=""
                    data-title="Athabasca Rail"
                    data-description="The Athabasca River railroad track at the mouth of Brulé Lake in Alberta, Canada."
                > </a> <a href="images/collection 2012/3.jpg"> <img 
                    src="images/collection 2012/3.jpg",
                    data-big=""
                    data-title="Back-scattering crepuscular rays"
                    data-description="Picture of the day on Wikimedia Commons 26 September 2010."
                > </a> <a href="images/collection 2012/4.jpg"> <img 
                    src="images/collection 2012/4.jpg",
                    data-big=""
                    data-title="Interior convento"
                    data-description="Interior view of Yuriria Convent, founded in 1550."
                > </a> </div>
<script>
$.noConflict();
jQuery(document).ready(function($){
    // Load the classic theme
    Galleria.loadTheme('galleria.classic.min.js');

    // Initialize Galleria
    Galleria.run('#galleria');
});
    </script>
<?php include('demo/menu.php'); ?>
</div>

</body>
</html>

et la seconde qui est en fait un menu qui est incéré dans la premiere page a l'aide d'un include et sur laquelle se trouve une lightbox vidéo :

<!DOCTYPE html>
<html lang="fr">
        <head>
        <meta charset="utf-8">
        <title>MDE</title>
        <style>
/* Demo styles */
			@font-face {
 font-family: 'Kalinga';
 src: url('kalinga.eot');
 src: local('x'),  url('kalinga.woff') format('woff'),  url('kalinga.ttf') format('truetype'),  url('kalinga.svg#KalingaRegular') format('svg');
}
html, body {
	background:#fff;
	margin:0;
	height:100%;
	width:auto;
}
body {
	height:100%;
	width:auto;
	font-family:Kalinga;
}
.content {
	color:#000;
	width:620px;
	margin:20px auto;
	height:100%;
	width:auto;
}
h1 {
	font-size:12px;
	font-weight:normal;
	color:#fff;
	margin:0;
}
p {
	margin:0 0 20px
}
a {
	color:#000;
	text-decoration:none;
}
.cred {
	margin-top:20px;
	font-size:11px;
}
/* This rule is read by Galleria to define the gallery height: */
            #galleria {
	height:100%;
	width:auto;
}
.galleria-thumbnails-list {
	display:none;
}
.galleria-container {
	background-color:#FFF;
}
.topmenu {
	text-align:right;
	float:right;
	list-style-type:none;
	font-weight:bold;
	margin-right:24px;
}
.topmenu li {
	float:left;
	font-family:Kalinga;
}
.mainmenuc {
	font-weight: bold;
	list-style-type: none;
	background-image:url(Images/barremenu.png);
	background-repeat:no-repeat;
	background-position: 50% 80%;
	width: 326px;
	height: 20px;
	padding-bottom: 41px;
	float: right;
	clear: both;
	margin-top: 20px;
}
ul {
	padding:0px;
	margin:0px
}
.galleria-info-title {
	font-family:Kalinga;
	font-style:normal;
	font-weight:normal;
	color:#000;
}
.galleria-info-description {
	font-family:Kalinga;
	font-style:normal;
	color:#000;
}
.mainmenuc li {
	float:left;
	padding-left:20px;
}
.galleria-info {
	background-color:transparent;
	bottom:0px;
}
.galleria-info-text {
	background-color:transparent;
	display:block;
}
.mainmenuc li a:hover {
	background-image: url(Images/boulemenu.png);
	background-repeat: no-repeat;
	background-position: 57% 69%;
	height: 70px;
	display: block;
}
.mainmenuc li a:active {
	background-image: url(Images/boulemenu.png);
	background-repeat: no-repeat;
	background-position: 57% 69%;
	height: 70px;
	display: block;
}
.sousmenu {
	display:none;
	list-style-type: none;
	float: right;
	background: none;
}
.sousmenu li {
	float:left;
	margin-right: 20px;
}
.mainmenuc  ul li:hover .sousmenu {
	display:block;
}
</style>

        <!-- load jQuery -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

        <!-- load Galleria -->
        <script src="galleria-1.3.1.min.js"></script>
        
        </head>
        
        
        <body>
<div class="content">
<div id="header"> <img src="Images/logo.jpg" alt="logo" name="logo" />
          <ul class="topmenu">
    <li> <a href="#" style="margin-right:20px;">English</a></li>
    <li> <a href="#">Facebook</a> <span> / </span><a href="#">Twitter</a></li>
  </ul>
        </div>
<!-- Adding gallery images. We use resized thumbnails here for better performance, but it’s not necessary -->

<div id="galleria"> <a href="images/collection 2012/1.jpg"> <img 
                    src="images/collection 2012/1.jpg",
                    data-big=""
                    data-title="2008 AUTUMN COLLECTION"
                    data-description="Les infinits petits et grands"
                > </a> <a href="images/collection 2012/2.jpg"> <img 
                    src="images/collection 2012/2.jpg",
                    data-big=""
                    data-title="Athabasca Rail"
                    data-description="The Athabasca River railroad track at the mouth of Brulé Lake in Alberta, Canada."
                > </a> <a href="images/collection 2012/3.jpg"> <img 
                    src="images/collection 2012/3.jpg",
                    data-big=""
                    data-title="Back-scattering crepuscular rays"
                    data-description="Picture of the day on Wikimedia Commons 26 September 2010."
                > </a> <a href="images/collection 2012/4.jpg"> <img 
                    src="images/collection 2012/4.jpg",
                    data-big=""
                    data-title="Interior convento"
                    data-description="Interior view of Yuriria Convent, founded in 1550."
                > </a> </div>
<script>
$.noConflict();
jQuery(document).ready(function($){
    // Load the classic theme
    Galleria.loadTheme('galleria.classic.min.js');

    // Initialize Galleria
    Galleria.run('#galleria');
});
    </script>
<?php include('demo/menu.php'); ?>
</div>

</body>
</html>

Le code n'est pas très propre je le sais mais c'est qu'il s'agit de test j'espère que vous arriverez à me dire ce qui bloque car moi je buche dessus depuis de très longue heures maintenant et je ne trouve pas Smiley decu

Merci d'avance!

fmafwo

4 Nov 2013 à 09:18

bonjour,
ne suis pas spécialiste mais dans tous les exemples je vois :
jQuery.noConflict(); et non pas $.noConflict();

Sinon ton cas avec 2 Jquery est expliqué là :
http://api.jquery.com/jQuery.noConflict/
Il faut écrire par ex. : jq2 = jQuery.noConflict( true ); // pour la 2ème. La 1ère est utilisée avec $ et l'autre avec jq2 ou autre.

détail:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.noConflict demo</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 
<div id="log">
  <h3>Before $.noConflict(true)</h3>
</div>
<script src="http://code.jquery.com/jquery-1.6.2.js"></script>
 
<script>
var $log = $( "#log" );
 
$log.append( "2nd loaded jQuery version ($): " + $.fn.jquery + "<br>" );
 
// Restore globally scoped jQuery variables to the first version loaded
// (the newer version)
 
jq162 = jQuery.noConflict( true );
 
$log.append( "<h3>After $.noConflict(true)</h3>" );
$log.append( "1st loaded jQuery version ($): " + $.fn.jquery + "<br>" );
$log.append( "2nd loaded jQuery version (jq162): " + jq162.fn.jquery + "<br>" );
</script>
 
</body>
</html>

Modifié par fmafwo (04 Nov 2013 - 09:46)

akya

6 Nov 2013 à 12:09

fmafwo merrci pour ta reponse j'ai essayé de remplacer $.noConflict(); par jQuery.noConflict(); mais ca ne change rien.

Sans le $.noConflict(); aucun des 2 script ne s'execute et lorsque je le met seulement le slideshow fonctionne mais pas la light box...

je ne sais plus quoi faire je ne comprend vraiment pas ce truc Smiley decu

fmafwo

7 Nov 2013 à 10:45

as-tu essayé ça surtout :

jq2 = jQuery.noConflict( true );

qui est bien expliqué ici :
http://api.jquery.com/jQuery.noConflict/

Par contre une seule des 2 jquery ne pourra être utilisée avec $ (l'autre par la var que tu auras choisie jq2 dans l'exemple)

Sujet clos

JavaScript, DOM et API Web HTML5

Problème de conflits jquery