如何将FancyBox与现有的div结合起来？

Question

我正在尝试将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 (测试图像)。现在它所做的就是重新打开窗口来显示图片。

所以基本上我尝试将这些超文本标记语言与FancyBox超文本标记语言合并：

<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根本不会弹出来。

我做错什么了？

Answer 1

有几件事：

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)在body部分中

<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 文件可从script访问

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