11521 sujets

JavaScript, DOM et API Web HTML5

Conflit jquerry gallery/menu

Bonjour à tous,

j'apprends le développement web en construisant un site pour une amie. J'ai besoin de plusieurs galeries, que j'ai trouvées sur :
https://github.com/vvvmax/unitegallery/
J'ai aussi mis un menu jquery:
http://www.outils-web.com/script-jquery-menu/apple-vertical/
J'ai testé l'un et l'autre, sans rencontrer de problèmes majeurs. Mais en les combinants, c'est le drame, il faut choisir car seul le premier fonctionne. Les deux fonctionnent assez différemment, du coup j'ai du mal à saisir d'où vient le conflit (versions, appels, fonctions...).
En debuggant, je trouve pas mal d'erreurs, mais pas forcement liées au jquerry.
Voici tout d'abord mon head html:
 <!-- Menu-->
    <link rel="stylesheet" type="text/css" media="screen" href="apple-vertical/sc024/css/style.css">
    <script type="text/javascript" src="apple-vertical/sc024/scr/jquery.js"></script>
    <script type="text/javascript" src="apple-vertical/sc024/scr/fisheye-iutil.min.js"></script>
    <script type="text/javascript" src="apple-vertical/sc024/scr/jquery.jqDock.min.js"></script>

        <script type="text/javascript">
        $(function(){
            var jqDockOpts = {align: 'left', duration: 200, labels: 'tc', size: 48, distance: 85};
            $('#jqDock').jqDock(jqDockOpts);
        });
        </script>
    <!--Gallery-->
    <link rel='stylesheet' href='unitegallery/dist/css/unite-gallery.css' type='text/css' />
    <link rel='stylesheet' href='unitegallery/dist/themes/default/ug-theme-default.css' type='text/css' />    
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
    <script type='text/javascript' src='unitegallery/dist/js/unitegallery.min.js'></script> 
    <script type='text/javascript' src='unitegallery/dist/themes/default/ug-theme-default.js'></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
        <script type="text/javascript"> 
          
          jQuery(document).ready(function(){ 
            jQuery("#gallery").unitegallery(); 
          }); 
        
        </script>
        <script type="text/javascript"> 
          
          jQuery(document).ready(function(){ 
            jQuery("#gallery2").unitegallery(); 
          }); 
        
        </script>
</head>

Je sais que ce sujet revient souvent, mais il semble que ce soit beaucoup de cas particulier qui se résolvent mystérieusement...
Après quelques recherches, alors que je pensais la fonction .noconflict() non nécessaire, il se trouve qu'elle a fonctionné.
Pour ceux qui passent par ici et se demande comment l'intégrer, il faut comprendre que celle-ci vient remplacer si j'ai bien compris, les $ des fonctions par un autre signe comme $j.
On écrit donc: 
var $j=jQuery.noConflict();
au sein du premier script concerné.
On remplace ensuite les $ utilisé dans l'appel de la fonction jquerry par des $j. Ainsi, chaque script possède son propre signe, et le noConflict remet les $ nécessaires au bon fonctionnement du fichier.
J'espère que c'est assez clair. Je retourne donc mettre les mains dans le cambouis...
Sujet clos
Aller à