Fancybox 2在ajax内容上打开第一个gallery元素,点击

时间:2014-05-14 05:17:11

标签: php jquery ajax fancybox fancybox-2

所以,我已经提供了JFK beforeLoad代码,并创建了一个PHP脚本来从链接(在index.php中)读取GET输入并填充页面(generate_gallery.php?gallery = N)使用基于通过GET发送的内容的图像和链接:

在我的 index.php 页面上,我进行了以下设置:

<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").on("click", function() {
        $.fancybox(this);
        var $id = this.href.split("#");
        $("#ajaxFancyBox").load("generate_gallery.php?gallery="+$id[1], function() {                    
            $(".fancybox_gallery").fancybox({
                    // fancybox API options here
                    'padding': 0,
                    helpers : {
                        title   : {
                            type: 'outside'
                        },
                        thumbs  : {
                            width   : 50,
                            height  : 50
                        }
                    }//helpers
                });//fanxybox
            $(".fancybox_gallery").first().trigger('click');
        });// load
        return false;
    });//on
});//ready
</script>
<a class="fancybox" href="generate_gallery.php?gallery=1">
    <img src="galleries/1/g1_foto00001_mini.jpg" alt="Picture 1">
</a>
<div id="ajaxFancyBox" style="display: none;"></div>

生成的输出是这样的:( generate_gallery.php?gallery = 1

<a class="fancybox_gallery" rel="gallery1" href="galleries/1/g1_foto00001.jpg" title="Tuocan 1" >
    <img src="galleries/1/g1_foto00001.jpg" alt="Tuocan 1" />
</a>
<a class="fancybox_gallery" rel="gallery1" href="galleries/1/g1_foto00002.jpg" title="Tuocan 2" >
    <img src="galleries/1/g1_foto00002.jpg" alt="Tuocan 2" />
</a>

当我点击 gallery_link 时,会弹出 fancybox iframe-like 。 我想要的是,当我点击gallery_link时,fancybox会在 generated_gallery 上打开第一张图片,其中包含缩略图帮助

我能做些什么来实现这个目标?

谢谢!

更新:添加了触发器(“点击”),现在它在第一个弹出窗口中显示一条消息(请求无法加载。),然后自动打开第二个弹出窗口。 我想现在我需要做的就是找出如何直接进入隐藏第一个弹出窗口的第二个弹出窗口。

1 个答案:

答案 0 :(得分:1)

知道了!哦,主啊,经过5天的头痛! ^^

我运行的最终代码如下所示,所有其他代码保持不变:

<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").on("click", function() {             
        var $id = this.href.split("#");
        $("#ajaxFancyBox").load("generate_gallery.php?gallery="+$id[1], function() {                    
            $(".fancybox_gallery").fancybox({
                    // fancybox API options here
                    'padding': 0,
                    helpers : {
                        title   : {
                            type: 'outside'
                        },
                        thumbs  : {
                            width   : 50,
                            height  : 50
                        }
                    }//helpers
                });//fanxybox
            $(".fancybox_gallery").first().trigger('click');
        });// load
        return false;
        $.fancybox(this); // << CHANGED THIS
    });//on
});//ready
</script>

如果您有一种最简单的方法,请使用改进的代码回答问题!

感谢@ JFK,我搜索了您的所有帖子并找到this one,这对我帮助很大。