플러그인 충돌을 피하기 위해 jQuery noconflict를 사용합니까?

Question

---

UPDATE : 나는 그 jquery.bxslider 플러그인 자체 클론 발견 /가 문제를 일으키는 LIS를 앞에 추가 추가했습니다. 어쩌면. 둘 다 일을 다른 스크립트 :(

---

내가 Boxslider (이미지 슬라이더) 및 Colorbox (라이트 박스) 서로 부분적으로 충돌의 jQuery 플러그인에 봉착를 사용하여 제외하고는이 생각에 해결책, 하지만 슬라이더 스크립트는 어떻게 든 라이트에 광고가 첫 번째와 마지막 이미지는 두 번 반복 얻을 수 있도록.

이 당신이 example page 봐이있는 경우 이해하기 쉽다.

당신은 3 개 이미지에가 보자 슬라이더를 열었을 때 라이트 박스를 열면 5 개의 이미지가 나타납니다.

나는 행운을 noconflict()으로 시도했지만, 전혀 작동하지 못했습니다. 일부 검색 후에는 일부 네임 스페이스 문제가 있다고 가정하고 있습니다. 그러나이 문제를 디버깅 할 위치 나 방법을 모릅니다. 내가 사용

스크립트는 하나 또는 둘 다 작동을 중지했다 나는 주위의 순서를 교환하려고했습니다

<link type="text/css" media="screen" rel="stylesheet" href="assets/css/colorbox.css" /> 
<script type="text/javascript" src="assets/js/jquery.bxslider2.0.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#gallery').bxSlider({ 
     auto: true, 
     wrapper_class: 'gallery-holder', 
     auto: false, 
     speed: 100, 
     pager: true, 
     next_text: 'next', 
     prev_text: 'back' 
    }); 
}); 
</script> 
<script type="text/javascript" src="assets/js/jquery.colorbox-min.js"></script> 
<script type="text/javascript"> 
    $(window).load(function(){ 
     $("#gallery a[rel='group']").colorbox({maxWidth:"80%", maxHeight:"80%", scalePhotos: true}); 
    }); 
</script> 

이다. 나는 이것을 내려 놓으려고 많은 시간을 낭비했다. 그래서 어떤 도움이라도 대단히 감사 할 것이다!

Answer 1

두 스크립트 모두 동일한 이미지 세트에서 작동하고 서로를 깨뜨리려고합니다.

Noconflict는 기본적으로 $의 정의를 제거하므로 Prototype과 같은 $를 사용하는 다른 라이브러리는 덮어 쓰지 않습니다.

따라서 noconflict가 여기 도움이되지 않습니다. 플러그인 중 하나만 사용하면 어떨까요?

Answer 2

Firebug에서 페이지의 소스를 볼 때 슬라이더에는 세 개의 이미지 만 표시되지만 실제로는 5 개의 LI가 있습니다. 이미지를 추가하는 데 사용하는 선택기는 5 개의 요소를 찾습니다.

console.log($("#gallery a[rel='group']")); // yields.... 
>> [a.cboxElement B10_02.jpg, a.cboxElement B10_01.jpg, a.cboxElement B10_04.jpg, a.cboxElement B10_02.jpg, a.cboxElement B10_01.jpg] 

이 배열에는 5 가지 요소가 있기 때문에 colorbox에는 5 개의 이미지가 있습니다.

JS가 실행되기 전에 Curl에서 가져온 원본을 보면 원래 BLADE/B10_02.jpg, B10_04.jpg 및 B10_01.jpg 이미지가 3 개뿐입니다. 그래서, 목표는 그것이 언제 추가되는지 확인하는 것입니다. colorbox에 사용 된 실제 이미지는 첫 번째 자식으로 추가 된 별도의 영역에 저장되므로 슬라이더 UL에 추가하는 것은 무엇입니까?

색상 상자를 모두 제거하고 슬라이더를 초기화 할 때 Firebug에서 갤러리 UL을 검사하십시오. 원래 3 개의 LI 또는 5 개의 LI가 있습니까? 5가 있다면 colorbox (또는 다른 것)가 다른 이유로 두 가지를 추가하고 있습니다. 3이있는 경우 colorbox 초기화를 다시 추가하고 페이지를 다시로드 할 때 5가 있는지 확인하십시오. 그것은 그것들을 추가하는 것에 관해서는 좀 더 좁혀 야합니다.

추가 : 소스를 보면 bxSlider가 첫 번째 항목과 마지막 항목을 의도적으로 복제 한 것처럼 보입니다.

var first = $this.children(':first').clone(); 
var last = $this.children(':last').clone(); 
/*etc, etc */ 
$this.append(first).prepend(last); 

슬라이더 전에 colorbox 플러그인을 실행 해 보시기 바랍니다. 슬라이더에 document.Ready()가 있고 colorbox에 window.load()가 있으므로 소스 순서를 변경하면 처음에는 실행되지 않습니다. Slider가 실행되기 전에 document.ready()에서 colorbox를 할 수 있습니까?

Answer 3

더 나은 것보다 늦게, 어? 다른 누군가가이 문제에 부딪혔을 때를 대비하여 솔루션을 공유 할 것입니다.

최근에 colorBox/bxSlider 콤보를 사용하고 있는데이 문제가있었습니다. bxSlider를 초기화하면 첫 번째 및 마지막 슬라이드가 마지막 및 첫 번째 위치로 각각 복제됩니다. 나는 왜 그런지 신경 쓰지는 않았지만 그것이 루핑을 지원하는 것이라고 상상한다. 처음에는 colorBox를 초기화하는 것이 이론적으로 효과가 있었지만 bxSlider에서는 colorBox가 설정 한 $ .data()를 지 웁니다.

필자의 빠른 해결 방법은 복제 된 요소에서 클래스 이름을 제거하는 것이 었습니다. setChildrenLayout()에서 두 $ .each() 블록에서 항목이 pre/post-pended되는 위치를 볼 수 있습니다. 문제가되는 클래스 이름을 제거하기 위해 수정해야합니다.

$.each($prependedChildren, function(index) { 
    var moddedChild = $(this); 
    moddedChild.children().removeClass("removeThisClass"); 
    $parent.prepend(moddedChild); 
}); 

참고 : 필자의 특수한 경우에는 작동하도록 작성 했으므로 목록 항목이 더 복잡한 경우 수정해야 할 수도 있습니다.