如何创build任何fancybox框的直接链接

我需要的是，当我点击使用fancybox的东西时，它会为此生成一个特定的URL，所以当我将这个链接发送给某人时，它会打开我想要的特定框。

例如： fancybox.net/home当我点击第一张图片时，链接仍然是fancybox.net/home我想要的是，当我点击图片时，url就会生成并显示在地址栏中，如： fancybox.net/home / imageid = 1所以当我发送fancybox.net/home/imageid=1某人已经打开图像在框

谢谢！

（这就像Facebook的照片，当你点击任何照片，照片打开一个盒子，但地址栏变成图像链接）

////// UPDATE＃1 //////

我做了JFK的build议，但一小时后我仍然不知道为什么箱子是不一样的。

看看之间的区别：

代码：

<script type="text/javascript"> var thisHash = window.location.hash; $(document).ready(function() { if(window.location.hash) { $(thisHash).fancybox({ prevEffect : 'none', nextEffect : 'none', closeBtn : false, arrows : true, nextClick : true, helpers : { thumbs : { width : 80, height : 80 }, title : { type : 'inside' }, buttons : {} }, afterLoad : function() { this.title = (this.index + 1) + ' de ' + this.group.length + '<div id="curti"><iframe src="http://www.facebook.com/plugins/like.php?href=http://www.google.com.br&amp;send=true&amp;layout=standard&amp;width=45&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:56px; height:24px;" allowTransparency="true"></iframe></div>'; } }).trigger('click'); } $('.fancylink').fancybox({ prevEffect : 'none', nextEffect : 'none', closeBtn : false, arrows : true, nextClick : true, helpers : { thumbs : { width : 80, height : 80 }, title : { type : 'inside' }, buttons : {} }, afterLoad : function() { this.title = (this.index + 1) + ' de ' + this.group.length + '<div id="curti"><iframe src="http://www.facebook.com/plugins/like.php?href=http://www.google.com.br&amp;send=true&amp;layout=standard&amp;width=45&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:56px; height:24px;" allowTransparency="true"></iframe></div>'; } }); }); // ready </script> 

那个脚本有什么问题？

Answer 1

首先，您仍然需要在打开fancybox的页面中链接到您的图片，例如：

 <a id="image01" class="fancylink" rel="gallery" href="images/01.jpg" title="image 01">open image 01</a> <a id="image02" class="fancylink" rel="gallery" href="images/02.jpg" title="image 02">open image 02</a> 

…等

注意到我为每个锚都添加了一个ID和一个class ，因为我必须通过URL来定位它们的唯一方法是通过它们的ID …一旦我在上面，该类将用于在fancybox中以常规方式打开这些图像在页面上，所以我不需要为每个ID写一个特定的fancybox代码。

然后在参考页面上设置这个脚本：

 <script type="text/javascript"> var thisHash = window.location.hash; $(document).ready(function() { if(window.location.hash) { $(thisHash).fancybox().trigger('click'); } $('.fancylink').fancybox(); }); // ready </script> 

那么你可以提供像每个图像的目标url

 http://mydomain.com/page.html#image01 

要么

 http://mydomain.com/page.html#image02 

等等

想工作演示？

http://picssel.com/playground/jquery/targetByID_28jan12.html#image01

http://picssel.com/playground/jquery/targetByID_28jan12.html#image02

注意 ：此代码适用于fancybox v1.3.x，因为您使用fancybox.net作为参考。

更新＃1 ：如果你想fancybox选项，你需要添加它们在select器的ID和class如：

 <script type="text/javascript"> var thisHash = window.location.hash; $(document).ready(function() { if(window.location.hash) { $(thisHash).fancybox({ padding: 0 // more API options }).trigger('click'); } $('.fancylink').fancybox({ padding: 0 // more API options }); }); // ready </script> 

当然，为fancybox v1.3.x或2.x使用正确的选项