Pageload가 완료된 후 처음 열릴 때 컬러 상자 팝업이 완전히로드되지 않습니다

Question

사용자 정의 뉴스 섹션과 함께베이스 테마 here이있는 기본 Magento CE 1.9.3.0을 설정했습니다.

중앙 뉴스 섹션의 뉴스 항목 중 페이지가 방금로드 될 때 처음으로 "자세히보기"링크를 클릭하면 팝업 (컬러 박스 팝업)이 열리 며 "다음"버튼이 누락되어 "닫기 "버튼을 누릅니다.

나는 이것이 팝업의 높이와 너비 문제 때문이라고 생각하지만 왜이 문제가 발생하는지 알 수 없습니다.

팝업을 닫은 다음 두 번째로 열면 모든 버튼이 완벽하게로드됩니다.

HTML, CSS &의 아이디어를 얻으려면 페이지의 소스를 확인하십시오. 알 수없는 이유로 인해 바이올린을 만들 수 없어이 중간 뉴스 섹션에로드 된 자바 스크립트 라이브러리.

다음은 현재 사용중인 colorbox 및 owl-carousel 스크립트입니다.

<script type="text/javascript"> 
//<![CDATA[ 
var $cnjQ = jQuery.noConflict(); 
$cnjQ(document).ready(function() { 
    var $cnOwl = $cnjQ("#center_news"); 
    $cnOwl.owlCarousel({ 
     autoPlay: 2500, 
     slideSpeed: 1500, 
     loop:false, 
     autoWidth:true, 
     pagination: false, 
     navigation: true, 
     <?php echo $putTS ?> 
     items: 1, 
     itemsDesktop: [1199,1], 
     itemsDesktopSmall: [979,1], 
     itemsTablet: [768,1], 
     itemsMobile: [600,1] 
    }); 
    $cnjQ('.news-owlgrid').children().find('a.cn-read-more').each(function() { 
     $cnjQ(this).colorbox({ 
      inline: true, 
      width: "50%", 
      rel: "cn-read-more", 
      onLoad: function() {  
       $cnOwl.trigger('autoplay.stop.owl'); 
      }, 
      onClosed: function() { 
       $cnOwl.trigger('autoplay.play.owl',[2000]); 
      } 
     }); 
    }); 
}); 
//]]> 
</script> 

누구든지 제안 사항이 있으십니까?

Answer 1

이것은 순전히 CSS 문제입니다. close, next 및 previous 버튼은 HTML 마크 업에 있지만, #cboxWrapper 요소 바운드 밖에 있습니다. #cboxWrapper은 overflow: hidden입니다.이 부분은 보이는 영역 바깥에 아무것도 숨겨져 있습니다.

당신은 그것의 가시 영역의 경계 내에서 close, next 및 previous 버튼을 이동 #cboxWrapper에 적용되는 CSS를 변경하여 팝업의 눈에 보이는 경계를 확장 할 필요가, 또는 수 있습니다.

colorbox 호출에서도 width 속성의 더 큰 값을 설정할 수 있습니다.

Answer 2

div가 고정 된 높이 인 것처럼 보입니다. 클래스 이름 중 일부가 마젠타 스타일로 덮어 쓰기가 가능합니까?

또 다른 아이디어는 자바 스크립트와 DOM 코드를 추출하여 개별적으로 실행하는 것입니다. 작동하지 않는다면 코드에 문제가 있습니다. 이것은 또한 관련 보이는 Colorbox doesn't open at proper height when first opened : 내가 어떤 버튼을 찾을 수 없습니다 jquery colorbox looks wrong the first time opened and then fine after that