Jquery FancyBox 目标特定的 DIV ID？答案

【问题标题】：Jquery FancyBox target specific DIV ID?Jquery FancyBox 目标特定的 DIV ID？
【发布时间】：2010-04-10 10:27:39
【问题描述】：

如何让 Fancy box 以页面上的特定 DIV ID 为目标，而不是在 fancybox 中请求整个页面。？这是我的代码

$(function() {

$(".style_image a").live('click', function(event) { 

    $(".style_image a").find("#show_style").fancybox();       

});
});

这行不通？

我最初尝试了以下方法：

 $(function() {

    $(".style_image a").live('click', function(event) { 

        $(this.href + " #show_style").fancybox();       

    });
    });

不确定这是怎么做到的，或者是否可能？

here are the doc's

【问题讨论】：

标签： jquery fancybox

【解决方案1】：

如果你想让fancybox打开某个div，你只需使用以下简单步骤：

首先你需要一个链接来将 FancyBox 挂接到：

<a href="#myDivID" id="fancyBoxLink">Click me to show this awesome div</a>

注意锚点旁边的 div id。

其次，您需要一个将显示在 FancyBox 中的 div：

<!-- Wrap it inside a hidden div so it won't show on load -->
<div style="display:none">
    <div id="myDivID">
         <span>Hey this is what is shown inside fancybox.</span>
         <span>Apparently I can show all kinds of stuff here!</span>
         <img src="../images/unicorn.png" alt="" />
         <input type="text" value="Add some text here" />
    </div>
</div>

第三个非常简单的 javascript 将它们连接在一起

<script type="text/javascript">
    $("a#fancyBoxLink").fancybox({
        'href'   : '#myDivID',
        'titleShow'  : false,
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic'
    });
</script>

【讨论】：

如果无法更改href值，如何使用ID打开fancybox中的div？即单击具有 ID> 的 img 时，在花式框中打开一个 div
如果我对这个例子理解得很好，100 个图像会非常复杂，因为我需要编写 100 个脚本，每个脚本对应一个图像，因为它使用 ID。另外，我的目标是在 cca 的 div 中打开精美的图像。 70% 的屏幕宽度，但是使用这种方法，当我打开图像时，它以 100% 的屏幕尺寸打开，就像原来一样......

【解决方案2】：

你只需要这个选择器：

$("#show_style").fancybox();

ID selector（因为 ID 应该是唯一的）就是 #IDGoesHere

我认为您所追求的是将内容加载到某个花哨的框中，如果您想从 href 指向的页面加载 <div id="content"></div>，您可以使用 @987654322 @：

$(".style_image a").on('click', function(event) { 
  $('#show_style').load(this.href + " #content").fancybox();       
});

.load() 有一个url selector 选项，它只加载目标页面的一部分。

【讨论】：