私のイメージギャラリーが閉じていない理由

Question

タイトルはファンシーボックスでイメージギャラリーを作っていますが、イメージをクリックするとイメージは開いていますが、イメージを閉じることができないか、閉じるボタンが見つかりません。私は、HTML、CSSとJavaScriptを使用しています。私は自分の問題点を示すためにイメージをアップロードしています。

$(document).ready(function(){ 
    //FANCYBOX 
    //https://github.com/fancyapps/fancyBox 
    $(".fancybox").fancybox({ 
     openEffect: "none", 
     closeEffect: "none" 
    }); 
}); 

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen"> 
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script> 

<div class="container"> 
    <div class="row"> 
     <div class='list-group gallery'> 
      <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'> 
       <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"> 
        <img class="img-responsive" alt="" src="http://placehold.it/320x320" /> 
        <div class='text-right'> 
         <small class='text-muted'>Image Title</small> 
        </div> <!-- text-right/end --> 
       </a> 
      </div> <!-- col-6/end --> 
      <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'> 
       <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"> 
        <img class="img-responsive" alt="" src="http://placehold.it/320x320" /> 
        <div class='text-right'> 
         <small class='text-muted'>Image Title</small> 
        </div> <!-- text-right/end --> 
       </a> 
      </div> <!-- col-6/end --> 
      <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'> 
       <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"> 
        <img class="img-responsive" alt="" src="http://placehold.it/320x320" /> 
        <div class='text-right'> 
         <small class='text-muted'>Image Title</small> 
        </div> <!-- text-right/end --> 
       </a> 
      </div> <!-- col-6/end --> 
      <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'> 
       <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"> 
        <img class="img-responsive" alt="" src="http://placehold.it/320x320" /> 
        <div class='text-right'> 
         <small class='text-muted'>Image Title</small> 
        </div> <!-- text-right/end --> 
       </a> 
      </div> <!-- col-6/end --> 
      <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'> 
       <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"> 
        <img class="img-responsive" alt="" src="http://placehold.it/320x320" /> 
        <div class='text-right'> 
         <small class='text-muted'>Image Title</small> 
        </div> <!-- text-right/end --> 
       </a> 
      </div> <!-- col-6/end --> 
      <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'> 
       <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"> 
        <img class="img-responsive" alt="" src="http://placehold.it/320x320" /> 
        <div class='text-right'> 
         <small class='text-muted'>Image Title</small> 
        </div> <!-- text-right/end --> 
       </a> 
      </div> <!-- col-6/end --> 
     </div> <!-- list-group/end --> 
    </div> <!-- row/end --> 
</div> <!-- container/end --> 

CSS

.gallery 
{ 
    display: inline-block; 
    margin-top: 20px; 
} 

Answer 1

あなたが問題を引き起こしている必要がありますあなたのhtml内の画像、を指すリンクを持っています。それはない希望のギャラリー、新しいページでイメージを開いています

<a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/300x320.png"> 

デベロッパーコンソールでhref属性に