一个简单的灯箱的 javascript 似乎不起作用

Question

不幸的是，我是编程新手，因此为了帮助我，我一直在 youtube 上学习一些简单的教程(除了学习 Treehouse 类(class)之外)。我一直在努力解决并且似乎无法找到解决方案的一个问题是构建一个简单的灯箱，并通过单击事件来调出灯箱。我已经检查了所有行、语法，是否省略了 ;或 {}，以为我的 javascript src 不正确，尝试下载，创建一个 js 文件夹并链接到该文件夹​​，引用谷歌托管的 javascript，检查 firebug，尝试不同的浏览器，检查 CSS 是否正确(这似乎是当将显示设置为阻止时，它显示正常)，认为可能有更新的语法规则(尝试使用 jQuery 而不是 $，但只是看不到我在哪里犯了错误。可能我遗漏了一些非常简单的东西，所以请原谅我我关注的 YouTube 链接是: https://www.youtube.com/watch?v=k-uonF7Gdgw 还检查了视频的评论，看看其他人是否也遇到同样的问题，有些是，但大多数其他人似乎都很好，并且没有为那些没有发布的解决方案让它发挥作用!

请看下面的代码:

<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>

提前非常感谢，感谢您提供宝贵的资源!尼克

Answer 1

Lightbox 是一种 JavaScript 技术，用于使用模式对话框显示图像和其他 Web 内容，其中图像显示在中心，填充大部分屏幕，而窗口的其余部分则变暗。 Lightbox 最初是一个特定 JavaScript 插件的名称。然而，该术语的常见用法已经演变为涵盖灯箱式 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 脚本文件。