jquery - 在同一页面上手动触发多个 Fancybox

Question

当我尝试在“点击”事件上触发多个 FancyBox 画廊时遇到了一些问题。第一个画廊显示良好。但是第二个画廊打开了图像，但没有显示导航。我在这里搜索过，但找不到任何东西。

我的代码如下：

HTML

<div class="hidd_div">
        <a rel="example_group" href="gallery_images/umbd1.jpg"><img alt="" class="gall_1" src="gallery_images/umbd1.jpg" /></a>
        <a rel="example_group" href="gallery_images/umbd2.jpg" title=""><img alt="" class="gall_1" src="gallery_images/umbd2.jpg" /></a>
        <a rel="example_group" href="gallery_images/umbd3.jpg" title=""><img alt="" class="gall_1" src="gallery_images/umbd3.jpg" /></a>
        <a rel="example_group" href="gallery_images/umbd4.jpg" title=""><img class="gall_1" alt="" src="gallery_images/umbd4.jpg" /></a>
        <a rel="example_group" href="gallery_images/umbd5.jpg" title=""><img class="gall_1" alt="" src="gallery_images/umbd5.jpg" /></a>
        <a rel="example_group" href="gallery_images/umbd6.jpg" title=""><img class="gall_1" alt="" src="gallery_images/umbd6.jpg" /></a>
        <a rel="example_group" href="gallery_images/umbd7.jpg" title=""><img class="gall_1" alt="" src="gallery_images/umbd7.jpg" /></a>
        <a rel="example_group" href="gallery_images/umbd9.jpg" title=""><img class="gall_1" alt="" src="gallery_images/umbd9.jpg" /></a>
        <a rel="example_group" href="gallery_images/umbd10.jpg" title=""><img class="gall_1" alt="" src="gallery_images/umbd10.jpg" /></a>
    </div>
    <br />
    <h3>Photo Gallery</h3>
    <div class="button_sty" id="gallery1">Environment and Ecological assessment of Kalyan Sagar,Udaipur</div>
    <br />
    <div class="hidd_div">
        <a class="group2" href="gallery_images/rd2.jpg"><img alt="" class="gall_1" src="gallery_images/rd2.jpg" /></a>
        <a class="group2" href="gallery_images/rd3.jpg" title=""><img alt="" class="gall_1" src="gallery_images/rd3.jpg" /></a>
        <a class="group2" href="gallery_images/rd4.jpg" title=""><img alt="" class="gall_1" src="gallery_images/rd4.jpg" /></a>
        <a class="group2" href="gallery_images/rd5.jpg" title=""><img class="gall_1" alt="" src="gallery_images/rd5.jpg" /></a>
        <a class="group2" href="gallery_images/rd6.jpg" title=""><img class="gall_1" alt="" src="gallery_images/rd6.jpg" /></a>
        <a class="group2" href="gallery_images/rd8.jpg" title=""><img class="gall_1" alt="" src="gallery_images/rd8.jpg" /></a>
        <a class="group2" href="gallery_images/rd9.jpg" title=""><img class="gall_1" alt="" src="gallery_images/rd9.jpg" /></a>
        <a class="group2" href="gallery_images/rd10.gif" title=""><img class="gall_1" alt="" src="gallery_images/rd10.gif" /></a>
        <a class="group2" href="gallery_images/rd11.gif" title=""><img class="gall_1" alt="" src="gallery_images/rd11.gif" /></a>
    </div>
    <br />
    <div class="button_sty" id="gallery2">Pollution Status Assessment of Rana Deghi</div>

JS 代码

$(document).ready(function(){
        $("a[rel=example_group]").fancybox({type:'image'});
        $("#gallery1").click(function(){
         $("a[rel=example_group]").eq(0).trigger("click");
        }); 
        $("a[class=group2]").fancybox({type:'image'});
        $("#gallery2").click(function(){
         $("a[class=group2]").eq(0).trigger("click");
        });
    });