jquery fancybox add submit button image in title

Is is possible to use the JQuery Fancybox 'Image Gallery' type, and place a form inside the 'title' , or I've read in an HTML area? The latter, I'm struggling to figure out.

I need a gallery of images, which I have working, and also a submit button below the gallery in Fancybox - it's like an 'add to cart'.

I've tried dropping my form submit button inside the #fancy-two div, but it's not showing. I've also tried playing with the title="" but not showing either.

My code is:

<!-- image gallery type -->
<div style="display: none;" id="fancy-two">

<a class="fancybox" href="images/1A_Pathophysiology_of_diabetes/Slide01.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet" src="images/Send_Me_Slides_Button.png" width="720" height="540" /></a>

<a class="fancybox" href="3d-carousel-plus-fancybox/fancybox/img/2_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"></a>

<a class="fancybox" href="3d-carousel-plus-fancybox/fancybox/img/3_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"></a>

<a class="fancybox" href="3d-carousel-plus-fancybox/fancybox/img/4_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"></a>

</div>

Here is my submit button code:

<form class="add_product" action="" method="post">
<input type="hidden" value="1" name="product_id">

<button class="button orange_send_me_slides" name="add_product" type="submit"><img src="images/Send_Me_Slides_Button.png"/></button>

</form>

Your help is appreciated!

Dan

Update: I just noticed that Fancybox have two demos on their page that show how to do this, but I don' know where to put this code or how much of it. I can't get it to work :(

Use element instead of attribute

Add download link to the title

Any help is welcomed!

Using the Use element instead of attribute example, you could place your form inside the hidden div like

<div id="title-1" class="hidden">
    <form class="add_product" action="" method="post">
        <input type="hidden" value="1" name="product_id" />
        <button class="button orange_send_me_slides" name="add_product" type="submit">add to cart</button>
    </form>
</div>

Then use this code

$(document).ready(function () {
    $(".fancybox")
        .attr('rel', 'gallery') // optional if you already have rel in your html
        .fancybox({
        beforeLoad: function () {
            var el, id = $(this.element).data('title-id');

            if (id) {
                el = $('#' + id);

                if (el.length) {
                    this.title = el.html();
                }
            }
        },
        helpers: {
            title: {
                type: "inside"
            }
        }
    });
});

See forked JSFIDDLE