2014-09-22 2 views
0

FancyBox를 작동 시키려면 2 시간이 걸렸습니다. 어떻게 작동하지 않는지도 모릅니다. 분명히 나는 ​​이미지에 연결하기 때문에 뭔가를 놓치고있다.FancyBox가 팝업되지 않습니다

예 : 이미지를 내 이미지 폴더 (엄지와 큰 이미지 모두)에 연결하고 이미지를 클릭하면 새 페이지로 이동하고 팝업 대신 이미지가 표시됩니다. 내가 볼

<head> 

    <!-- Bootstrap Core CSS --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <!-- Custom CSS --> 
    <link href="css/stylish-portfolio.css" rel="stylesheet"> 

    <!-- Custom Fonts --> 
    <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="/stylish-portfolio/fancybox/source/jquery.fancybox.css" media="screen"/> 
    <link rel="stylesheet" type="text/css" href="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-thumbs.css" media="screen"/> 
    <link rel="stylesheet" type="text/css" href="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-buttons.css" media="screen"/> 
    <script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.pack.js"></script> 
    <script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.js"></script> 
    <script type="text/javascript" src="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-buttons.js"></script> 
    <script type="text/javascript" src="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script> 
    <script type="text/javascript" src="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-media.js"></script> 



    <script type="text/javascript"> 
     $(document).ready(function() { 
     $(".fancyImg").fancybox(); 
}); 
     </script></head> 


    <div class="row"> 
         <div class="col-md-6"> 
          <div class="portfolio-item"> 
           <a class="fancyImg" href="img/portfolio-2.jpg" title="Lorem ipsum dolor sit amet"><img src="img/portfolio-2.jpg" alt="" /></a> 
          </div> 
         </div> 
+1

모든 JS 오류가 콘솔에 보인다? –

+0

일반 또는 팩 버전의 fancybox js 파일을로드해야하지만 둘다는 필요하지 않습니다. – JFK

답변

0

우선이 두 번 fancybox를로드하는 것입니다 :

여기 내 코드입니다. 하나를 선택. HTML 본문 섹션 내부

<script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.pack.js"></script> 
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.js"></script> 
0

는이 코드

<a class="fancyImg" href="img1.jpg" title="Lorem ipsum dolor sit amet"><img src="img1.jpg" alt="" /></a> 

     <script type="text/javascript"> 
      $(document).ready(function() { 
       $(".fancyImg").fancybox(); 
        type:"iframe" 
        }); 
     </script> 

추가 그리고 그것을 잘 작동하는 것 :

+0

이미지를 iframe으로 열지 않아도됩니다. – JFK

+0

맞지 않습니다. 체크 아웃 할 때 유형을 추가했습니다. –

관련 문제