Fancybox와 JQuery Accordian이 동일한 페이지에서 작동하지 않습니다

동일한 페이지에 fancy 상자와 jquery accordian이 있습니다. 각각은 독립적으로 작동하지만 함께 작동하지는 않습니다. 어딘가에 충돌이 있습니다. 여러 포럼과 게시물을 살펴 보았지만 해결할 수는 없습니다. 어떤 사람들은 jquery-ui 스크립트를 먼저 쓰라고 말합니다. 그것은 작동하지 않았다. 어떤 사람들은이 기능들을 하나의 스크립트로 결합한다고 말했습니다. 그것은 작동하지 않았다.Fancybox와 JQuery Accordian이 동일한 페이지에서 작동하지 않습니다

다음은 내 페이지의 머리 부분입니다.

`<head> 
`<title>Transportation Business Group</title> 
`<meta name="KEYWORDS" content="International business group."> 
`<link rel="stylesheet" href="/stylesheets/voglobalstyle.css" type="text/css" media="screen,projection"> 
`<link rel="stylesheet" href="stylesheets/style.css" type="text/css" media="screen,projection"> 
`<meta http-equiv="content-type" content="text/html; charset=utf-8"> 

`<script src="/scripts/jQuery-UI/1.8.17/jquery-ui.js" type="text/javascript"></script> 
`<link rel="stylesheet" href="/scripts/jQuery-UI/1.8.17/Content/themes/base/twisty.ui.css" 
    type="text/css" media="screen,projection" /> 
`<script type="text/javascript" src="/scripts/jquery/Plugins/fancybox/jquery-1.4.2.min.js"></script> 
`<script type="text/javascript" src="/scripts/jquery/Plugins/fancybox/jquery.mousewheel-3.0.2.pack.js"></script> 
`<script type="text/javascript" src="/scripts/jquery/Plugins/fancybox/jquery.fancybox-1.3.1.js"></script> 
`<script src="/scripts/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     /* 
     * Examples - images 
     */ 
     $("#accordion").accordion({ 
      autoHeight: false, 
      navigation: true, 
      collapsible: true, 
      active: true 
     }); 
     $("a#MikeFormal").fancybox({ 
      'titleShow': true, 
      'titlePosition': 'over', 

      'autoScale': false 
     }); 

     $("a#MikeInformal").fancybox({ 
      'titleShow': true, 
      'titlePosition': 'over', 

      'autoScale': false 
     }); 



    }); 
</script> 
</head>

저에게 도움을 주시면 감사하겠습니다.

출처

2012-06-05 Michele ODell

일부 플러그인에는 실질적인 이유로 jQuery 버전이 포함되어 있지만 실제로는 단일 인스턴스 (최신 버전) 만로드하면됩니다. 또한, jQuery는 먼저 플러그인 전에, 그리고 jQuery UI 이전에로드되어야합니다.

귀하의 경우, jQuery를 두 번 및 jQuery UI 이후에로드하고 있습니다. 단일 인스턴스를 사용하여 문서의 모든 플러그인 이전에 배치하십시오.

또한 코드에서 fancybox CSS 파일을 어디에도로드하지 않는 것으로 나타났습니다.

출처

2012-06-05 17:15:38 JFK

스크립트 순서는해야한다 : 나는 당신이 또한 jQuery를 UI의 최신 버전으로 JQuery와 코어의 훨씬 이전 버전을 사용하고있는 것으로 나타났습니다

<!-- Jquery must load first --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script> 
<link rel="stylesheet" href="/scripts/jQuery-UI/1.8.17/Content/themes/base/twisty.ui.css" 
    type="text/css" media="screen,projection" /> 
<script type="text/javascript" src="/scripts/jquery/Plugins/fancybox/jquery.mousewheel-3.0.2.pack.js"></script> 
<script type="text/javascript" src="/scripts/jquery/Plugins/fancybox/jquery.fancybox-1.3.1.js"></script>

. 두 번째로 주목해야 할 것은 CDN이 아닌 로컬 서버에서 jQuery Core 및 UI js 파일을로드한다는 것입니다. Google CDN 버전으로 교체했습니다.

Fancybox의 경우 CDNJS에서로드하는 것이 좋지만 지금은 그대로 두었습니다.

출처

2012-06-05 17:19:20

Fancybox와 JQuery Accordian이 동일한 페이지에서 작동하지 않습니다

답변

관련 문제