Question

我有一些'item'类div，它们是带有图像和内部标题的灰色框。当他们点击它们时，我希望它们看起来更大。

我已经应用了fancybox，但没有任何反应。我已将所有相关文件添加到html中。

这是html代码：

<div class="container">

<div class="item">
<img src="photo.jpg">
<p>Image caption</p>
</div>


<div class="item">
<img src="photo.jpg">
<p>Image caption</p>
</div>

<div class="item">
<img src="photo.jpg">
<p>Image caption</p>
</div>

<div class="item">
<img src="photo.jpg">
<p>Image caption</p>
</div>

</div>

Answer 1

首先下载并解压缩您的FancyBox文件
第二次使用FTP（或不使用）将这些文件上传到您的服务器
第三次调整FancyBox CSS和JS文件的路径，将您上传FancyBox插件的根目录文件夹的位置改为

出于本演示的目的，我使用了来自http://fancyapps.com/fancybox/ .....

许多似乎有问题的是没有上传CSS＆amp; JS文件，但如何实际执行它们。

---这是严格基本的，我只是遇到了同样的问题，所以我想对这个问题增加一些见解。

使其执行通常缺少的是在主体部分，它位于您以拇指等方式显示的图像下方.--＆gt;这是一些使其工作的JS}; - ）

提示：它是从fancybox下载的页面源...

     <script type="text/javascript">
        $(document).ready(function() {
        $("#single_1").fancybox({
          helpers: {
              title : {
                  type : 'float'
              }
          }`enter code here`
         });

       $("#single_2").fancybox({
        openEffect  : 'elastic',
        closeEffect : 'elastic',

        helpers : {
            title : {
                type : 'inside'
            }
        }
       });

       $("#single_3").fancybox({
        openEffect : 'none',
        closeEffect : 'none',
        helpers : {
            title : {
                type : 'outside'
            }
        }
       });

       $("#single_4").fancybox({
        helpers : {
            title : {
                type : 'over'
            }
        }
       });
       });
       </script>
       <!--end above-->
       <!-- the above JS (in the body & under the images (i.e  
       below the anchor/image attributes...below the id of single_1 
       thru single_4 etc.)  
       executes & triggers the popup effect of the enlarged
       image...Below is similar to how your code should look 
       based on path adjustment within your server -->
       <!--end above-->


From Here you can hit the ground running and customize it as needed.

All the Code to make it Function right:


    <!--begin-->
    <!-- this format makes it work for you -->
    <!-- If you think not go here (below) -->
    <!-- http://www.kovacsphotography.com/fancyBox.html -->
    <!-- as said before adjust your paths to all JS & CSS -->
    <!--begin-->
        <!DOCTYPE html> 
    <html> 
    <head> 
    <title>|demo Of FancyBox |</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <!-- Add jQuery library -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-       latest.min.js"></script>

    <!-- Add mousewheel plugin (this is optional) -->
    <script type="text/javascript" src="/fancyBox/lib/jquery.mousewheel-  3.0.6.pack.js"></script>

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

    <!-- Optionally add helpers - button, thumbnail and/or media -->
    <link rel="stylesheet" href="/fancyBox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
    <script type="text/javascript" src="/kovacsphotography/fancyBox/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="/fancyBox/source/helpers/jquery.fancybox-media.js"></script>

    <link rel="stylesheet" href="/fancyBox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
    <script type="text/javascript" src="/fancyBox/source/helpers/jquery.fancybox-thumbs.js"></script>
    </head> 

    <body> 



     <a id="single_1" href="http://farm8.staticflickr.com                        /7367/16426879675_e32ac817a8_b.jpg" title="Codirosso spazzacamino (Massimo Greco _Foligno)"> <img src="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_m.jpg" alt="" /> </a> 

    <a id="single_2" href="http://farm6.staticflickr.com/5612/15344856989_449794889d_b.jpg" title="Morning Twilight (Jose Hamra Images)"> <img src="http://farm6.staticflickr.com/5612/15344856989_449794889d_m.jpg" alt="" /> </a> 

    <a id="single_3" href="http://farm8.staticflickr.com/7289/16207238089_0124105172_b.jpg" title="(Eric Goncalves (cathing up again!))"> <img src="http://farm8.staticflickr.com/7289/16207238089_0124105172_m.jpg" alt="" /> </a> 

    <a id="single_4" href="http://farm9.staticflickr.com/8568/16388772452_f4d77a92c7_b.jpg" title="Arctic Paradise (Tom Draxler)"> <img src="http://farm9.staticflickr.com/8568/16388772452_f4d77a92c7_m.jpg" alt="" /> </a> 
    <script type="text/javascript">
    $(document).ready(function() {
        $("#single_1").fancybox({
              helpers: {
                  title : {
                      type : 'float'
                  }
              }
          });

        $("#single_2").fancybox({
            openEffect  : 'elastic',
            closeEffect : 'elastic',

            helpers : {
                title : {
                    type : 'inside'
                }
            }
        });

        $("#single_3").fancybox({
            openEffect : 'none',
            closeEffect : 'none',
            helpers : {
                title : {
                    type : 'outside'
                }
            }
        });

        $("#single_4").fancybox({
            helpers : {
                title : {
                    type : 'over'
                }
            }
        });
    });
    </script>
    </body>
     </html>

这里的技巧是为你拥有的每个图像/锚ID编写一个可执行的JS（（或者一个可用于所有图像的可执行JS文件等）））所以，如果你有9个不同的，写一个函数您文档正文部分中锚定图像placholder中的每个相应ID。只要您链接到您的插件文件（（CSS＆amp; JS文件）），您应该没问题。你可以在onedrive或dropbox上托管一个图像文件，如果你想...你只需要替换文件所在链接的路径就可以了。这似乎是勺子喂等等但它可能会帮助其他人来后..

毕竟这只是一个使用其他人代码的指南吗？ ; - ）

我希望Fancybox能够处理我的div - 我需要编辑html吗？

1 个答案: