Question

我不熟悉编程新手，所以为了帮助我，我一直在youtube上关注一些简单的教程（除了以下Treehouse课程）。我一直在努力寻找并且无法找到解决方案的是构建一个简单的灯箱，很好地让点击事件调出灯箱。我检查了所有的行，语法，我是否省略了;或{}，想想也许我有javascript src不正确，尝试下载，创建一个js文件夹并链接到它，引用谷歌托管javascript，检查firebug，尝试不同的浏览器，检查CSS是否正确（它似乎是当设置显示为阻止时，它显示OK），想想可能有更新的语法规则（尝试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>

非常感谢，并感谢您的宝贵资源！ NIC

Answer 1

Lightbox是一种JavaScript技术，用于使用模式对话框显示图像和其他Web内容，其中图像显示在中心，填充大部分屏幕，窗口的其余部分变暗。 Lightbox最初是特定JavaScript插件的名称。但是，该术语的常见用法已经发展到包含Lightbox风格的JavaScript插件和效果。

首先我们拍摄一些图像（当我们点击图像时，LightBox将会显示）。我们将此图像放在

中

HTML code：

       <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脚本文件。

一个简单的灯箱的JavaScript似乎没有运作

1 个答案: