테스트 사이트 - 개발 중인 베타 버전입니다

jQuery 충돌 문제 채택완료

이노미디어 11년 전 조회 11,346

1일전 즉, 14일에 '상품 큰이미지가 안보여요' 라는 질문을 등록했었습니다.

그런데 인터넷을 뒤지다가 결국은 문제점을 찾았고 해결책 또한 찾았습니다.

 

원래는 상품 상세페이지에 상품 큰이미지가 보이질 않았었습니다. 큰 상품이미지의 li가 display:none로 되어 있고 여기에 display:block  속성을 가진 .vasible 이라는 클래스를 마우스 오버시마다 추가해 주는 스크립트 문제라고 판단하고,

 

hesd_sub.php 에 선언된 스크립트를 하나씩 지우며 확인을 했습니다.

 

원래 원본에서 선언된 js는 아래와 같습니다.

 

<!-- 원래 선언되어 있던 js -->

 

<script src="<?php echo G5_JS_URL ?>/jquery-1.8.3.min.js"></script>

<?php

if (defined('_SHOP_')) {

    if(!G5_IS_MOBILE) {

?>

<script src="<?php echo G5_JS_URL ?>/jquery.shop.menu.js"></script>

<?php

    }

} else {

?>

<script src="<?php echo G5_JS_URL ?>/jquery.menu.js"></script>

<?php } ?>

<script src="<?php echo G5_JS_URL ?>/common.js"></script>

<script src="<?php echo G5_JS_URL ?>/wrest.js"></script>

 

그리고 제가 추가로 선언한 js는, 위 선언 밑으로 아래와 같이 추가하였습니다.

 

<!-- 추가로 선언한 js -->

<script src="http://code.jquery.com/jquery-1.9.1.min.js">http://code.jquery.com/jquery-1.9.1.min.js"></script>    -------> 왜 추가 했는지 모름 

<script src="<?php echo G5_JS_URL ?>/jquery.slides.min.js"></script>     ----> 메인 비쥬얼 영역의 슬라이드

<script type="text/javascript" src="<?php echo G5_JS_URL ?>/tab.js"></script>----> tab 사용을 위해 선언 

 

 

① 그런데 여기서 가장 위에 있는

    <script src="http://code.jquery.com/jquery-1.9.1.min.js">http://code.jquery.com/jquery-1.9.1.min.js"></script>

 

    를 삭제하니, 상품 상세페이지에 정상적으로 큰 이미지가 나오는 것입니다.

② 왜 위 제이쿼리를 선언했는지 정확히 알수는 없으나 (기억이 가물가물) 위 제이쿼리와의 충돌이라 판단하였습니다.

    그래서 인터넷을 뒤져본 결과

 

③ <script src="http://code.jquery.com/jquery-1.9.1.min.js">http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

       jQuery.noConflict();

       var jq$=jQuery;

     </script>

 

  라는 코드를 삽입하면 충돌을 피할 수 있다고 하여,

 삽입하였으나, 그러자 갑자기 메인 슬라이드와, 영카트5에서 제공하는 배너 슬라이드가 사라져버리는 것입니다.

 

④ 그래서 선언 순서의 문제인가? 하여, 위 ③번의 코드를 가장 먼저 선언해주었더니 모두 정상 작동하는 것을 확인하였습니다.

 

------------------------------------------------------------------------------------

여기서, 제가 드리고 싶은 질문은,

① <script src="http://code.jquery.com/jquery-1.9.1.min.js">http://code.jquery.com/jquery-1.9.1.min.js">

 

   는 어디에 사용하는 제이쿼리인지 여부

 

② 그리고 위의 설명처럼 해당 코드를 가장 먼저 선언했는데요, 그래도 괜찮은 것인지, 제가 찾은 위 코드는 이상이 없는 것인지의 여부 등..

 

입니다..

------------------------------------------------------------------------------------

 

고수님들의 답변 부탁드립니다. 감사합니다..꾸벅~~

댓글을 작성하려면 로그인이 필요합니다.

답변 5개

채택된 답변
+20 포인트
11년 전

그누보드 자체적으로 /jquery-1.8.3.min.js 를 이미 사용하고 있기 때문에

<script src="http://code.jquery.com/jquery-1.9.1.min.js" target="_blank" style="color: rgb(0, 0, 0);">http://code.jquery.com/jquery-1.9.1.min.js" target="_blank" style="color: rgb(0, 0, 0);">http://code.jquery.com/jquery-1.9.1.min.js">​ 를 삭제했을 때 별다른 이상이 없다면 

삭제하셔도 상관없을것 같은데요. 슬라이드 추가하셨을 때 넣었을 가능성이 있어보이네요.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

11년 전

좋은 답변들 너무 감사합니다. 모두 도움이 된 답변이라  어느 분을 채택해야 할지 몰라, 제일 먼저 답변을 작성해 주신 '작은별'님의 답변을 채택한 점 양해 부탁드립니다.

 

아! 그리고, 1.9 제이쿼리를 삭제하고도 아무런 문제가 없어 그냥 삭제했습니다. 제이쿼리 공부를 좀 해야겠습니다..

 

 

꾸벅~~ 감사합니다. 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

11년 전

충돌을 피하는 코드는 jquery외의 다른 라이브러리랑 충돌을 피하기 위한 코드입니다.

prorotype.js 도 jquery 랑 같이 $예약어를 이용하기때문에 같이 쓸수 없습니다...

jquery도 여러버전을 같이 호출하면 충돌납니다...

1.9를 삭제하시고 배너동작에 문제가 있다면 배너를 수정하시는게...

 

 

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

11년 전

업그레이드라고 보시면 될것이구요, 둘중에 하나만을 사용해보시고 문제 없는 버전으로 사용하시면 될듯합니다. 

 

아니면 링크처럼 해보시던지..

 

http://sir.co.kr/bbs/board.php?bo_table=g4_tiptech&wr_id=32718">http://sir.co.kr/bbs/board.php?bo_table=g4_tiptech&wr_id=32718 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

11년 전

​<script src="<?php echo G5_JS_URL ?>/jquery.slides.min.js"></script>

배너 슬라이드 기능이 jquery 1.9 이상부터 작동하나봅니다.

그렇다고 jquery 1.8를 지우고 jquery 1.9를 사용하시면 영카트 기능 중에 몇가지를 또 에러가 날 수 있습니다.

영카트 기본이 jquery 1.8버전으로 제작이 되었기에 jquery 1.8 버전을 반드시 사용하셔야 합니다.

 

1.8 버전에서 동작되는 슬라이드기능을 사용하시든 슬리이드 js를 1.8에 맞게 개발하셔야 합니다. 

저는 슬라이드 js를 직접 개발하여 사용합니다. 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인