javascript對於一個簡單的燈箱看起來不起作用

我是新來的編程不幸，所以幫助我我一直在關注youtube上的一些簡單教程（除了以下樹屋課程）。我一直在努力，似乎無法找到一個解決方案正在建立一個簡單的燈箱，得到點擊事件調出燈箱。我檢查了所有行，語法，是否省略了一個;或{}，認爲可能我有JavaScript的SRC不正確，嘗試下載，創建一個JS文件夾和鏈接到，引用谷歌託管的JavaScript，檢查螢火蟲，嘗試不同的瀏覽器，檢查CSS是正確的（它似乎是當設置顯示屏阻止它看起來OK），想到也許有更新的語法規則（嘗試jQuery而不是$，但只是不能看到我犯的錯誤。可能我已經省略了一些非常簡單的東西，所以請原諒我我正在關注的youtube鏈接是：https://www.youtube.com/watch?v=k-uonF7Gdgw也檢查了視頻中的評論，看看是否有其他人遇到同樣的問題，有些是，但大多數其他人似乎都沒問題，沒有解決方案發布給那些沒有得到它的人上班！javascript對於一個簡單的燈箱看起來不起作用

請參閱以下代碼：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<script type="text/javascript"> 

jQuery(document).ready(function(){ 

    jQuery('.lightbox').click(function(){ 
     jQuery('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear'); //fades in the backdrop and the lightbox - speed of 300, and displayed in a linear fashion. Only want the backdrop displayed with 50% opacity, and the box at 100% (see below line) 
     jQuery('.box').animate({'opacity':'1.00'}, 300, 'linear'); 
     jQuery('.backdrop, .box').css('dispaly', 'block'); //sets the appearance of the box 
    }); 

}); 


</script>

非常感謝提前，並感謝偉大的資源！ Nic

來源

2014-06-25 nicknoop

'顯示器'應該'顯示' – esswilly

非常感謝您的回覆！不幸的是，這個愚蠢的錯誤沒有修復，我已經寫了幾次代碼來確保，所以我有點尷尬做出這樣的錯誤！我再次執行拼寫檢查，沒有更多此類錯誤，我相當有信心。 – nicknoop

燈箱是一種JavaScript技術，用於使用模式對話框顯示圖像和其他Web內容，其中圖像顯示在屏幕的大部分中央，其餘部分顯示爲灰色。 Lightbox最初是特定JavaScript插件的名稱。然而，該術語的常見用法已演變爲包含一般的Lightbox風格的JavaScript插件和效果。

首先我們拍攝一些圖片（當我們點擊LightBox的圖片時）。我們將會把這個圖像中的

HTML代碼：

 <section id="examples" class="examples-section"> 
      <div class="container"> 

       <h3 style="clear: both;">Four image set</h3> 

       <div class="image-row"> 
         <div class="image-set"> 
           <a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="img/demopage/thumb-3.jpg" alt=""/></a> 
           <a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="img/demopage/thumb-4.jpg" alt="" /></a> 
           <a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="img/demopage/thumb-5.jpg" alt="" /></a> 
           <a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="img/demopage/thumb-6.jpg" alt="" /></a> 
         </div> 
       </div> 
      </div> 
    </section>

現在添加CSS代碼文件屏和燈箱。還下載lightbox.js和jquery庫java腳本文件。

來源

2014-12-01 08:44:38

javascript對於一個簡單的燈箱看起來不起作用

回答

相關問題