Question

我正在为我正在开发的网站使用jQuery fancyBox的多个实例。它位于测试网址; http://youwontbelievewhathappened.com/Test/test.html

我已经使用这种标记和电话设置了网站中的大部分精美框：

首次加价：

<a href="#blogpostBox" title="Blog Post">Blog Post</a>

        <br /><br />

<a href="#announcementBox" title="Announcement Box">Site Announcement</a>

致电内容：

  <div class="fancybox">
    <div id="blogpostBox" style="width:400px;height:100px;overflow:auto;">
    [This is the blog post]
    </div>
  </div> 

  <div class="fancybox">
    <div id="announcementBox" style="width:400px;height:100px;overflow:auto;">
    [This is the announcement]
    </div>
  </div>

但是对于最后两个链接我试图触发花哨的盒子;这不会触发它。它只是在网站的网址末尾加载“#contentdiv”。它不能是我把它移到外面并试过它的位置，但仍然没有这样的运气。有什么建议吗？

这两个麻烦的链接位于可展开的右侧边栏中，标记为“Click Me”

Answer 1

看起来你实际上从未在这些链接上调用fancybox。

在你的scripts.js文件中，你用这些选择器调用fancybox：

//// Fancybox links
$("#footer a,#friendsbox a,#moreinfo").fancybox();
$("#openTextEntry").fancybox({onClosed:update_textEntry});

但是这些链接在#rightsidebar内，所以只需将其添加到选择器：

//// Fancybox links
$("#footer a,#friendsbox a,#moreinfo, #rightsidebar a").fancybox();
$("#openTextEntry").fancybox({onClosed:update_textEntry});

Answer 2

使用

<div  class="lightbox">
<a class="iframe" href="#announcementBox" title="Announcement Box">Site Announcement</a>
</div>

并添加脚本如下

<script type="text/javascript">
 $(document).ready(function() {
    $('.lightbox a').fancybox({
        width   : your preffered,
        height  : your preffered,
        opacity : true
    });
});
</script>

FancyBox没有触发 -

2 个答案: