jquery - 同じページの複数の Fancybox の手動トリガー

Question

「クリック」イベントで複数の FancyBox ギャラリーをトリガーしようとすると、いくつかの問題が発生します。最初のギャラリーは問題なく表示されます。しかし、2 番目のギャラリーは画像を開きますが、ナビゲーションは表示されません。ここで検索しましたが、見つかりませんでした。

私のコードは以下になります：

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");
        });
    });