jQuery FancyBox如何针对特定的DIV ID进行操作？

Question

我该如何让Fancybox仅针对页面上特定的DIV ID进行操作，而不是请求整个页面呢？ 我目前的代码如下：

$(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();       

    });
    });

我不确定这是如何完成的，或者它是否可能？

这里是文档

- MrThomas

Answer 1

如果你想让fancybox打开特定的DIV，可以按照以下简单步骤进行：

首先，您需要一个链接来将FancyBox连接到：

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

请注意锚点旁边的

。其次，您需要一个将显示在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>

- Peter

---

如果您无法更改href值，那么使用ID在fancybox中打开div如何？即，单击具有ID的img时，在fancybox中打开一个div。 - Charlie Schliesser

如果我理解这个例子正确的话，由于需要使用ID，对于100张图片来说，它非常复杂，因为我需要编写100个脚本，每个脚本针对一张图片。 此外，我的目标是在一个占据屏幕宽度约70%的div中打开漂亮的图片，但是使用这种方法时，当我打开图片时，它会以100%的屏幕大小打开，就像原来一样... - Igor Laszlo

Answer 2

您只需要使用这个选择器：

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

ID选择器（由于ID应该是唯一的）只需使用#IDGoesHere

我认为你想要的是在一些fancybox中加载内容，如果你想从页面中指向的href加载<div id="content"></div>，你可以使用.load()：

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

.load()有一个url选择器选项，可以仅加载目标页面的一部分。

- Nick Craver