1

我正在尝试将 FancyBox 与现有的 div 结合起来。此 div 包括标题悬停效果。我不知道如何组合它，因为我对 JS 还不太了解。我的 HTML 包含多张图片，这是其中之一：

<!-- Image Caption 1 -->
  <div id="box-6" class="box">
    <img id="image-6" src="beeld/images/grafisch/image09.png"/>
    <span class="caption scale-caption">
        <h3>Scale Caption</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </span>

我想要的只是file:///Data$/marketing/2013/Sophia/Website/HTML/Beeld/images/bgimg.jpg（测试图像）弹出。现在它所做的就是重新打开窗口以显示图片。

所以基本上我正在尝试将该 HTML 与 FancyBox HTML 合并：

<a id="single_3" href="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_b.jpg" title="Ayvalık, Turkey (Nejdet Düzen)">
<img src="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_m.jpg" alt="" />

有没有办法做到这一点？

JS：

<script type="text/javascript">

$(document).ready(function() {
$(".fancybox").fancybox();
$("#single_1").fancybox({
      helpers: {
          title : {
              type : 'float'
          }
      }
  });

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

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

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

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

我尝试自己合并​​它，如下所示：

<!-- Image Caption 1 -->
    <a id="single_3" href="file:///Data$/marketing/2013/Sophia/Website/HTML/Beeld/images/bgimg.jpg" title="Ayvalık, Turkey (Nejdet Düzen)">
    <div id="box-6" class="box">
    <img id="image-6" src="beeld/images/grafisch/image_09.png"/></a>
    <span class="caption scale-caption">
        <h3>Scale Caption</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </span>

但 FancyBox 根本不会弹出。

我做错了什么？

4

1 回答 1

0

有几件事：

1) 确保首先加载 jquery 库

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

2）然后你必须加载fancybox代码

<script src="http://yourdomain.com/your_path_to_js/jquery.fancybox.pack.js"></script>

3）然后在head部分写下这段代码

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

4）这在身体部分

<a id="single_3" href="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_b.jpg" title="Ayvalık, Turkey (Nejdet Düzen)">
    <img src="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_m.jpg" alt="" />
</a>

这是一个工作演示http://jsfiddle.net/fkeVR/5/

5）确保您要引用的文件 file:///Data$/marketing/2013/Sophia/Website/HTML/Beeld/images/bgimg.jpg可以从您的脚本中访问

6) 确保您的 javascript 没有错误。如果你使用firefox，Firebug的控制台对调试有很大帮助

于 2013-05-29T15:19:48.020 回答