duanjia4220 2015-03-22 10:08
浏览 87
已采纳

使用html / php无法使用fancybox-function工作

I have searched for an answer over and over again, but I can't seem to figure this one out. I want to simply use fancybox to show an image.

This is the first time I use fancybox, so probably someone experienced will notice the problem within seconds.

I've followed the steps given at http://fancyapps.com/fancybox/.

This is the code I have in my head.php file:

    <!-- 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?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

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

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

This is copied from the given website. I'm using the exact samen folder-name "fancybox", so I think that can't be the problem. In my code where I want to load an image, this is what I have:

echo'<a class="fancybox" rel="group" href="img/products/'.$row['bestandsnaam'].'"><img class="img-thumbnail" src="img/products/'.$row['bestandsnaam'].'" alt=""></a>';

After loading this page, I have this code (also copied from the given website):

<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox();
});

Yet when I click this image, it won't open in fancybox, but it opens in a new tab instead only showing the image without any fancy styling.

Thanks for your help in advance!

  • 写回答

1条回答 默认 最新

  • dongqian6554 2015-03-22 11:37
    关注

    This is most assuredly due to your files not being in the place your links are pointing to.And you should be seeing several errors in the console related to this.

    Here is a test page using your code with the urls modified to match the folder layout shown in the image below. As you can see it does work. Therefore, your issue must be due to your urls being incorrect or the files themselves being missing.

    This is the code from the test page:

    <!doctype html>
    <html><head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    
       <!-- 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="jquery.mousewheel-3.0.4.pack.js"></script>
    
    <!-- Add fancyBox -->
    <link rel="stylesheet" href="source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
    <script type="text/javascript" src="source/jquery.fancybox.pack.js?v=2.1.5"></script>
    
    <!-- Optionally add helpers - button, thumbnail and/or media -->
    <link rel="stylesheet" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
    <script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
    <script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
    
    <link rel="stylesheet" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
    <script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
    
    
    <script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
    </script>
    </head>
    <body>
    <?php
        $row['bestandsnaam'] = 'images.jpg';
        echo'<a class="fancybox" rel="group" href="img/products/'.$row['bestandsnaam'].'"><img class="img-thumbnail" src="img/products/'.$row['bestandsnaam'].'" alt=""></a>';
    ?>
    </body>
    </html>
    

    Folder layout: enter image description here

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 evo评估时曲线出现问题
  • ¥15 eNSP拓扑图配置实验
  • ¥20 有没有兄弟会替换fmod studio的.bank文件内的音效?
  • ¥20 如何解决访问网址被屏蔽的情况
  • ¥15 本地运行的vue2项目,使用内网穿透,前端界面一直转圈圈
  • ¥20 powerbuilder datawindow控件导出Excel数据,可不可以不自动覆盖原数据,而是在后面新插入入数据。
  • ¥100 无轴承永磁同步电机控制
  • ¥15 eps里添加本地倾斜模型
  • ¥15 telegram 问题
  • ¥15 nrf52810-c三个a 程序