2014-05-14 05:17

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

  • fancybox
  • php
  • ajax
  • jquery

So, I've apadpted the JFK beforeLoad code, and created a PHP script to read the GET input from a link(inside index.php) and populate a page(generate_gallery.php?gallery=N) with images and links based on the content sent through the GET:

On my index.php page I have the following set up:

<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 API options here
                    'padding': 0,
                    helpers : {
                        title   : {
                            type: 'outside'
                        thumbs  : {
                            width   : 50,
                            height  : 50
        });// load
        return false;
<a class="fancybox" href="generate_gallery.php?gallery=1">
    <img src="galleries/1/g1_foto00001_mini.jpg" alt="Picture 1">
<div id="ajaxFancyBox" style="display: none;"></div>

The generated output is something like this: (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 class="fancybox_gallery" rel="gallery1" href="galleries/1/g1_foto00002.jpg" title="Tuocan 2" >
    <img src="galleries/1/g1_foto00002.jpg" alt="Tuocan 2" />

When I click the gallery_link, it pops a fancybox iframe-like. What I want is, when I click on the gallery_link, fancybox opens the first image on the generated_gallery with thumbnail helpers.

What can I do to achive this?


Updated: Added trigger("click"), now it shows a message (The requested cannot be loaded.) on the first popup before automatically opens the second popup. I guess all I need to do now is figure out how to go straigh to the second popup hiding the first.

  • 点赞
  • 回答
  • 收藏
  • 复制链接分享