首先,您仍然需要在打开 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>
... etc.
Notice我要添加两个ID
and a 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
or
http://mydomain.com/page.html#image02
etc.
想要工作演示吗?
http://picssel.com/playground/jquery/targetByID_28jan12.html#image01 http://picssel.com/playground/jquery/targetByID_28jan12.html#image01
http://picssel.com/playground/jquery/targetByID_28jan12.html#image02 http://picssel.com/playground/jquery/targetByID_28jan12.html#image02
NOTE:此代码适用于 fancybox v1.3.x,因为您使用 fancybox.net 作为参考。
更新#1:如果您想要 fancybox 选项,您需要将它们添加到两个选择器中ID
and class
like:
<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 使用正确的选项