如何创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> 

那个脚本有什么问题?

首先,您仍然需要在打开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器的IDclass如:

 <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使用正确的选项