Question

HeJ小鼠。

这是我第一次使用Jquery，我正在尝试将插件FancyBox v2.1.7用于我制作的库。当我单击图库中某个图片的缩略图时，图片会弹出并以更大的版本显示（应该如此）。但是，不可能在图片之间滑动，小箭头图标也不是他们的。

我尝试按照视频中显示的步骤进行操作：https://www.youtube.com/watch?v=5IPIO-T0sfU，插件从http://fancyapps.com/fancybox/#license下载。

我已经下载了zip文件并从中提取了文件。我将lib和源文件放在我的其他文档的文件夹中，并在我的Portofolio html文档中链接到它们。然后我将javascript片段放在脚本标签中我的投资组合html文档的末尾。我已经和它坐了很长时间了，我不再能看到错误了。这是我在lib文件夹中如何订购文件的图片

在我的源文件夹中

在我的根文件夹中。投资组合kopi 2.html是我现在正在处理的那个（我正在努力让fancybox画廊工作。我很陌生，所以我有时会有两个版本的文档，所以我总是可以去回到错误之前。

我的HTML：

<div class="container-fluid">
 <div class ="portfolio-tekst"><h2>Portfolio</h2></div>
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6 filter hdpe"> 
            <div class ="thumbnail">
            <a href="imgs/pexels-photo.jpg" a class="fancybox" rel="group">
            <img src="imgs/pexels-photo.jpg" class="img-thumbnail">
            </a>
          <p class="caption">Thumpnail images</p>
        </div>
     </div>

        <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6 filter hdpe"> 
            <div class ="thumbnail">
            <a href="imgs/pexels-photo.jpg" a class="fancybox" rel="group">
            <img src="imgs/pexels-photo.jpg" class="img-thumbnail">
            </a>
          <p class="caption">Thumpnail images</p>
        </div>
     </div>


 <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6 filter hdpe"> 
            <div class ="thumbnail">
            <a href="imgs/pexels-photo.jpg" a class="fancybox" rel="group">
            <img src="imgs/pexels-photo.jpg" class="img-thumbnail">
            </a>
          <p class="caption">Thumpnail images</p>
        </div>
     </div>

     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6 filter hdpe"> 
            <div class ="thumbnail">
            <a href="imgs/pexels-photo.jpg" a class="fancybox" rel="group">
            <img src="imgs/pexels-photo.jpg" class="img-thumbnail">
            </a>
          <p class="caption">Thumpnail images</p>
        </div>
     </div>

     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6 filter hdpe"> 
            <div class ="thumbnail">
            <a href="imgs/pexels-photo.jpg" a class="fancybox" rel="group">
            <img src="imgs/pexels-photo.jpg" class="img-thumbnail">
            </a>
          <p class="caption">Thumpnail images</p>
        </div>
     </div>

     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6 filter hdpe"> 
            <div class ="thumbnail">
            <a href="imgs/pexels-photo.jpg" a class="fancybox" rel="group">
            <img src="imgs/pexels-photo.jpg" class="img-thumbnail">
            </a>
          <p class="caption">Thumpnail images</p>
        </div>
     </div>

        <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6 filter hdpe"> 
            <div class ="thumbnail">
            <a href="imgs/pexels-photo.jpg" a class="fancybox" rel="group">
            <img src="imgs/pexels-photo.jpg" class="img-thumbnail">
            </a>
          <p class="caption">Thumpnail images</p>
        </div>
     </div>

        <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6 filter hdpe"> 
            <div class ="thumbnail">
            <a href="imgs/pexels-photo.jpg" a class="fancybox" rel="group">
            <img src="imgs/pexels-photo.jpg" class="img-thumbnail">
            </a>
          <p class="caption">Thumpnail images</p>
        </div>
     </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

    <script src="bs/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="lib/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" src="lib/jquery.mousewheel-3.0.6.pack.js"></script>

    <link rel="stylesheet" href="source/jquery.fancybox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="/source/jquery.fancybox.pack.js"></script>
  <script type="text/javascript" src="/source/jquery.fancybox.js¢"></script>




   <script>


$(document).ready(function() {
   $(".fancybox").fancybox();
  });

   </script> 








</body>

jquery插件Fancybox无法正常工作

0 个答案: