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

时间:2013-09-26 06:47:58

标签: jquery fancybox fancybox-2

当我尝试在“点击”事件上触发多个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");
        });
    });

任何帮助将不胜感激或任何解决方法

0 个答案:

没有答案