데모 코드처럼 fancyBox3을 사용하면 라이트 박스를 표시 할 수 없습니다. 이유가 무엇입니까?

다음 코드는 http://fancyapps.com/fancybox/3/docs/#usage의 데모 코드를 기반으로합니다. 이미지 용 라이트 박스를 표시하려고하지만 코드가 작동하지 않습니다. 이유가 무엇입니까?데모 코드처럼 fancyBox3을 사용하면 라이트 박스를 표시 할 수 없습니다. 이유가 무엇입니까?

받는 사람 : Rick, 코드로 코드를 수정했지만 아직 작동하지 않습니다. 이유가 무엇입니까?

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>My page</title> 

    <!-- CSS --> 
    <link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css"> 
</head> 
<body> 

    <!-- Your HTML content goes here --> 


    <a href="bmp/logo.png" data-fancybox data-caption="My caption"> 
     <img src="bmp/logo.png" alt="" /> 
    </a> 

    <!-- JS --> 
    <script src="//code.jquery.com/jquery-3.1.1.min.js"></script> 
    <script src="jquery.fancybox.min.js"></script> 
</body> 
</html>

수정 된 코드도 작동하지 않습니다.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>My page</title> 

    <!-- CSS --> 
    <link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css"> 
</head> 
<body> 

    <!-- Your HTML content goes here --> 


    <a href="bmp/logo.png" data-fancybox data-caption="My caption"> 
     <img src="bmp/logo.png" alt="" /> 
    </a> 

    <!-- JS --> 
    <script src="//code.jquery.com/jquery-3.1.1.min.js"></script> 
    <script src="jquery.fancybox.min.js"></script> 

    <script type="text/javascript"> 
     $("[data-fancybox]").fancybox({ 
      // Options will go here 
     }); 
    </script> 

</body> 
</html>

출처

2017-03-18 HelloCW

을 당신은'console.log'에 오류를받을 수 있나요 아마 –

을 옵션을 설정해야합니까? –

이 피요를보십시오 https://jsfiddle.net/uy5hjntv/ –

당신은 그것을 초기화되지 않습니다 ..

<script type="text/javascript"> 
    $("[data-fancybox]").fancybox({ 
     // Options will go here 
    }); 
</script>

출처

2017-03-18 06:20:30 Rick

고마워요! To : Rick, 코드로 코드를 수정했지만 아직 작동하지 않습니다. 이유가 무엇입니까? – HelloCW

실제 내용을 추가해야합니다 .. ''. 그걸 "간단한 테스트"로 바꾸면 작동합니다 .. https://jsfiddle.net/x91343ru/ – Rick

죄송합니다, 아직 작동하지 않습니다! 저에게 완전한 샘플 코드를 작성해 주시겠습니까? 감사! – HelloCW

은 당신이 항상 먼저해야 할 것은 개발자 도구를 열고 모든 메시지에 대한 콘솔을 확인하는 것입니다. 단서가 있어야합니다. 나는 당신이 js와 css 파일을 올바르게 로딩하지 않는 것 같아요 - 그들이 존재하는지 확인하고 필요할 경우 파일 경로를 조정하십시오.

BTW, 당신도, CSDN에서 fancyBox을 사용할 수 있습니다 -

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script> 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>

출처

2017-03-19 11:23:24 Janis

데모 코드처럼 fancyBox3을 사용하면 라이트 박스를 표시 할 수 없습니다. 이유가 무엇입니까?

답변

관련 문제