CustomBox에 사용자 정의 이미지로드하는 방법?

모달 대화 상자에 CustomBox 플러그인 (http://dixso.github.io/custombox/)을 사용하고 있습니다. 대화 상자를 열기 위해 버튼을 클릭하면 라이브러리 코드 안에있는 이미지 (또는 아이콘)가로드됩니다. 속성은 loader이지만 사용자 정의 이미지 아이콘 속성은 없습니다.CustomBox에 사용자 정의 이미지로드하는 방법?

var modal = new Custombox.modal({ 
    content: { 
     target: '#open', 
     effect: 'fadein', 
    }, 
    loader: { 
     active: true, 
     color: '#fff', 
     speed: 1000, 
    } 
}); 
modal.open();

문제는 애니메이션이 로딩 시간이 1 초 미만이기 때문에 이미지/아이콘 소스를 얻으려면이 컨테이너를 dev 도구로 잡을 수 없습니다.

출처

2017-10-15 sirjay

: 속도 로더 만 비트의 값 여부 이미지 쇼를 변경 여부를

아래를 참조하기 때문에 니펫을 제대로 작동하지 않는 것 같다 그것은 div입니다. 이미지에서 어떤 것을 변경하고 싶습니까? –

간단한 CSS/svg/gif 애니메이션 – sirjay

로더 CSS 스타일 을 ovveriding하여 맞춤 테두리 + 테두리 (0으로 설정)를 설정하면 CSS 애니메이션을 제거 할 수 있습니다.

PS :

var modal = new Custombox.modal({ 
 
    content: { 
 
     target: '#open', 
 
    }, 
 
    loader : { 
 
     active: true, 
 
     background: '#4d0', 
 
     speed:10000 
 
    } 
 
}); 
 
setTimeout(function(){ 
 

 
    modal.open(); 
 
},1000)

.custombox-loader{ 
 
    background:url('https://gifimage.net/wp-content/uploads/2017/07/gif-uploader-10.gif') no-repeat; 
 
    background-size:100%; 
 
    border-width:0px !important; 
 
    animation-name:none!important; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/custombox/4.0.3/custombox.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/custombox/4.0.3/custombox.min.js"></script> 
 

 

 
<div id="open"></div>

출처

2017-10-15 15:25:25

CustomBox에 사용자 정의 이미지로드하는 방법?

답변

관련 문제