嘗試使用js創建'close'選項，遇到代碼問題

Question

我正在嘗試將圖像查看機制從http://fancyapps.com/fancybox/demo/實現到我的網站。

我正在尋找這個網站做的與'不同的效果'部分的第二個房子圖像。 （只需查看和關閉，不滾動或下一個按鈕）。

我試圖將.css和html代碼從該網站放入我的代碼中，並附加了必要的圖像，.css和.js文件，但它仍然不起作用。

的html代碼：

 <a class="fancybox-effects-b" href="demo/5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"> 
<img src="demo/5_b.jpg" alt="" /> 
</a> 

JS代碼：

<script type="text/javascript"> 
    $(".fancybox-effects-b").fancybox({ 
       openEffect : 'none', 
       closeEffect : 'none', 

       helpers : { 
        title : { 
         type : 'over' 
        } 
       } 
      }); 
</script> 

誰能告訴我怎麼去有關實現這一點？我花了近2個小時嘗試這一點，似乎仍不能算出這個...提前

感謝，

編輯：

這是我的html代碼：

<div class="content"> 
    <div class="heading">Photoshop</div> 
    <div class="content2"> 
     <div id="featured" class="clearfix grid_12"> 
      <ul> 
       <li> <a class="fancybox-effects-b" href="images/sadMiddle.jpg" target="_blank"> 
       <span>Middle of your heart</span><img src="images/sadMiddle.jpg" alt="Middle" /></a></a> 
      </li> 
      <li> <a href="images/sadLeft.jpg"> 
        <span>Left the heart</span> 
        <img src="images/sadLeft.jpg" alt="Left" /> 
       </a> 

      </li> 
      <li> <a href="images/sadRight.jpg"> 
        <span>Right mind & heart</span> 
       <img src="images/sadRight.jpg" alt="Right" /> 
       </a>  
      </li> 
     </ul> 
    </div> 

（我第一個圖像只是現在測試它），我在已經添加

JS：

<!-- Add jQuery library --> 
< 
script type = "text/javascript" 
src = "lib/jquery-1.9.0.min.js" > < /script> 


    <!-- Add fancyBox main JS and CSS files --> 
    <script type=" 
text/javascript " src=" 
source/jquery.fancybox.js"></script> 
    <link rel=" 
stylesheet " type=" 
text/css " href=" 
source/jquery.fancybox.css" media=" 
screen " /> 

    <!-- Add Button helper (this is optional) --> 
    <link rel=" 
stylesheet " type=" 
text/css " href=" 
source/helpers/jquery.fancybox - buttons.css ? v = 1.0.5 " /> 
    <script type=" 
text/javascript " src=" 
source/helpers/jquery.fancybox - buttons.js ? v = 1.0.5 "></script> 

<script type=" 
text/javascript "> 
    $(function() { 
     $(".fancybox - effects - b ").fancybox({ 
       openEffect : 'none', 
       closeEffect : 'none', 

       helpers : { 
        title : { 
         type : 'over' 
        } 
       } 
      }); 
    }); 
</script> 

CSS文件：

/*! fancyBox v2.1.4 fancyapps.com | fancyapps.com/fancybox/#license */ 
.fancybox-wrap, 
.fancybox-skin, 
.fancybox-outer, 
.fancybox-inner, 
.fancybox-image, 
.fancybox-wrap iframe, 
.fancybox-wrap object, 
.fancybox-nav, 
.fancybox-nav span, 
.fancybox-tmp 
{ 
    padding: 0; 
    margin: 0; 
    border: 0; 
    outline: none; 
    vertical-align: top; 
} 

.fancybox-wrap { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 8020; 
} 

.fancybox-skin { 
    position: relative; 
    background: #f9f9f9; 
    color: #444; 
    text-shadow: none; 
    -webkit-border-radius: 4px; 
     -moz-border-radius: 4px; 
      border-radius: 4px; 
} 

.fancybox-opened { 
    z-index: 8030; 
} 

.fancybox-opened .fancybox-skin { 
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); 
     -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); 
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); 
} 

.fancybox-outer, .fancybox-inner { 
    position: relative; 
} 

.fancybox-inner { 
    overflow: hidden; 
} 

.fancybox-type-iframe .fancybox-inner { 
    -webkit-overflow-scrolling: touch; 
} 

.fancybox-error { 
    color: #444; 
    font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; 
    margin: 0; 
    padding: 15px; 
    white-space: nowrap; 
} 

.fancybox-image, .fancybox-iframe { 
    display: block; 
    width: 100%; 
    height: 100%; 
} 

.fancybox-image { 
    max-width: 100%; 
    max-height: 100%; 
} 

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { 
    background-image: url(fancybox_sprite.png); 
} 

#fancybox-loading { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -22px; 
    margin-left: -22px; 
    background-position: 0 -108px; 
    opacity: 0.8; 
    cursor: pointer; 
    z-index: 8060; 
} 

#fancybox-loading div { 
    width: 44px; 
    height: 44px; 
    background: url('fancybox_loading.gif') center center no-repeat; 
} 

.fancybox-close { 
    position: absolute; 
    top: -18px; 
    right: -18px; 
    width: 36px; 
    height: 36px; 
    cursor: pointer; 
    z-index: 8040; 
} 

.fancybox-nav { 
    position: absolute; 
    top: 0; 
    width: 40%; 
    height: 100%; 
    cursor: pointer; 
    text-decoration: none; 
    background: transparent url('blank.gif'); /* helps IE */ 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    z-index: 8040; 
} 

.fancybox-prev { 
    left: 0; 
} 

.fancybox-next { 
    right: 0; 
} 

.fancybox-nav span { 
    position: absolute; 
    top: 50%; 
    width: 36px; 
    height: 34px; 
    margin-top: -18px; 
    cursor: pointer; 
    z-index: 8040; 
    visibility: hidden; 
} 

.fancybox-prev span { 
    left: 10px; 
    background-position: 0 -36px; 
} 

.fancybox-next span { 
    right: 10px; 
    background-position: 0 -72px; 
} 

.fancybox-nav:hover span { 
    visibility: visible; 
} 

.fancybox-tmp { 
    position: absolute; 
    top: -99999px; 
    left: -99999px; 
    visibility: hidden; 
    max-width: 99999px; 
    max-height: 99999px; 
    overflow: visible !important; 
} 

/* Overlay helper */ 

.fancybox-lock { 
    overflow: hidden; 
} 

.fancybox-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    overflow: hidden; 
    display: none; 
    z-index: 8010; 
    background: url('fancybox_overlay.png'); 
} 

.fancybox-overlay-fixed { 
    position: fixed; 
    bottom: 0; 
    right: 0; 
} 

.fancybox-lock .fancybox-overlay { 
    overflow: auto; 
    overflow-y: scroll; 
} 

/* Title helper */ 

.fancybox-title { 
    visibility: hidden; 
    font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; 
    position: relative; 
    text-shadow: none; 
    z-index: 8050; 
} 

.fancybox-opened .fancybox-title { 
    visibility: visible; 
} 

.fancybox-title-float-wrap { 
    position: absolute; 
    bottom: 0; 
    right: 50%; 
    margin-bottom: -35px; 
    z-index: 8050; 
    text-align: center; 
} 

.fancybox-title-float-wrap .child { 
    display: inline-block; 
    margin-right: -100%; 
    padding: 2px 20px; 
    background: transparent; /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgba(0, 0, 0, 0.8); 
    -webkit-border-radius: 15px; 
     -moz-border-radius: 15px; 
      border-radius: 15px; 
    text-shadow: 0 1px 2px #222; 
    color: #FFF; 
    font-weight: bold; 
    line-height: 24px; 
    white-space: nowrap; 
} 

.fancybox-title-outside-wrap { 
    position: relative; 
    margin-top: 10px; 
    color: #fff; 
} 

.fancybox-title-inside-wrap { 
    padding-top: 10px; 
} 

.fancybox-title-over-wrap { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    color: #fff; 
    padding: 10px; 
    background: #000; 
    background: rgba(0, 0, 0, .8); 
} 

（我假設大多數的這些不同之處在於包含「fancybox_sprite.png」，這是用於關閉按鈕的圖像的一個無用）。

編輯2：（我能混合在一起的JavaScript？）

<script type="text/javascript" src="source/jquery.fancybox.js"></script> 
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.4" media="screen" /> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $(".fancybox").fancybox({ 
     maxWidth: 800, 
     maxHeight: 600, 
     fitToView: false, 
     autoResize: true, 
     closeClick: false, 
     openEffect: 'elastic', 
     closeEffect: 'elastic' 
    }); 
}); 
</script> 

<script type="text/javascript" src="js/showhide.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript" src="js/jquery.roundabout-1.0.min.js"></script> 
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 

<script type="text/javascript" src="js/script.js"></script> 
    <script type="text/javascript">  
     $(document).ready(function() { //Start up our Featured Project Carosuel 
      $('#featured ul').roundabout({ 
       easing: 'easeOutInCirc', 
       duration: 600 
      }); 
     }); 
    </script> 

Answer 1

如果你的腳本是在頭部，那麼你需要把它們放在DOM ready handler

<script type="text/javascript"> 
    $(function() { 
     // Your code here 
    }); 
</script> 

另外，還要確保你包含jquery後的插件。

Answer 2

要麼你把你的JS代碼在年底或

$(document).ready(function(){ 
    //your code here 
}) 

包裹它如果可能的話，請把完整的HTML，所以我可以得到一個更好的主意。

Answer 3

這是一個working example，可以幫助你。

$(document).ready(function() { 
    $(".fancybox").fancybox({ 
     maxWidth: 800, 
     maxHeight: 600, 
     fitToView: false, 
     autoResize: true, 
     closeClick: false, 
     openEffect: 'elastic', 
     closeEffect: 'elastic' 
    }); 
}); 

Answer 4

jQuery庫必須包含的fancybox

<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.4" media="screen" /> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="source/jquery.fancybox.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".fancybox").fancybox({ 
      maxWidth: 800, 
      maxHeight: 600, 
      fitToView: false, 
      autoResize: true, 
      closeClick: false, 
      openEffect: 'elastic', 
      closeEffect: 'elastic' 
     }); 
    }); 
</script> 

<script type="text/javascript" src="js/showhide.js"></script> 
<script type="text/javascript" src="js/jquery.roundabout-1.0.min.js"></script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 

<script type="text/javascript" src="js/script.js"></script> 
<script type="text/javascript">  
    $(document).ready(function() { //Start up our Featured Project Carosuel 
     $('#featured ul').roundabout({ 
      easing: 'easeOutInCirc', 
      duration: 600 
     }); 
    }); 
</script>