Fancybox 2 open first gallery element on ajax content, on click

Question

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() {
        $.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>

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>
<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>

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?

Thanks!

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.

Answer 1

Got it! Oh Lord, after 5 days with this headache! ^^

The final code I got running is this one below, all the other code remains the same:

<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>

If you have a best and simple way to do this please answer the question with a improved code!

Thanks to @JFK, I've searched all your posts and found this one, that helped me a lot.