jquery fancybox add submit button image in title

Question

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!

Answer 1

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